动态绑定Gridview带模板列
界面效果如下图：
一、动态绑定需要显示的字段（可控制显示顺序）
前台代码：
[html]
<p id="pgvdata" runat="server" style="position: relative; top: 0px; left: 0px;
overflow: auto; width:96%; height:410px;">
<:gridview id="gvequdata" runat="server" cssclass="usertableborder" onrowcreated="gvequdata_rowcreated"
allowsorting="true" datakeynames="samid" onrowdatabound="gvequdata_rowdatabound"
onsorting="gvequdata_sorting"
onprerender="gvequdata_prerender">
<headerstyle cssclass="freezing" />
<emptydatatemplate>
<p style="margin: 0 auto; text-align: center; width: auto; height: auto">
没有查询到数据！</p>
</emptydatatemplate>
</asp:gridview>
</p>
[csharp]
/// <summary>
/// 绑定gridview查询数据
/// </summary>
public void bindgridviewdata()
{
getwebconfiginfo();
initdatainfo();
try
{
gridview gridview = gvequdata;
gridview.columns.clear();
gridview.autogeneratecolumns = false;
string[] selectfields = string.isnullorempty(shows) ? null : shows.split(','); //获取所有需要带复选框的列
boundfield b = new boundfield();
b.headertext = "序号";
gridview.columns.add(b);
boundfield bf = new boundfield();
bf.headertext = "设备连接状态";
bf.datafield = "linkstatu";//固定列
gridview.columns.add(bf);
string[] names = quarrysclass.all.split(',');
string newname;
if (selectfields == null)
return;
foreach (string name in selectfields)
{
newname = name.trim('@').tolower();
string colname = resources[newname] == null ? string.empty : resources[newname].tostring();
if (quarrysclass.checkflag.tolower().indexof("@" + newname + "@") != -1) //绑定复选框列
{
templatefield tf = new templatefield();
if (resources[newname] == null)
{
continue;
}
tf.headertemplate = new gridviewitemtemplate(datacontrolrowtype.header, newname, colname, "checkbox", id);
tf.itemtemplate = new gridviewitemtemplate(datacontrolrowtype.datarow, newname, colname, "checkbox", id);
gridview.columns.add(tf);
}
else
{
if (quarrysclass.converts.tolower().contains(newname)) //转换显示格式
{
templatefield tf = new templatefield();
tf.headertemplate = new gridviewitemtemplate(datacontrolrowtype.header, newname, colname, "", id);
tf.itemtemplate = new gridviewitemtemplate(datacontrolrowtype.datarow, newname, colname, "convert", id);
gridview.columns.add(tf);
}
else //普通列
{
bf = new boundfield();
bf.itemstyle.horizontalalign = horizontalalign.center;
bf.headertext = resources[newname] == null ? string.empty : colname;
bf.datafield = newname;
bf.sortexpression = bf.datafield;
gridview.columns.add(bf);
}
}
}
quarrysclass.busno = txtbusno == null ? string.empty : txtbusno.text.trim();
quarrysclass.deviceno = txtdeviceno == null ? string.empty : txtdeviceno.text.trim();
quarrysclass.lineno = txtlineno == null ? string.empty : txtlineno.text.trim();
quarrysclass.resources = resources;
equsearchbll.equbll.setgridview(gridview, shows);
}
catch (exception)
{
}
}
动态绑定模板列，可以新建一个类gridviewitemtemplate.cs供调用，对于动态绑定的模板列中的textbox，如何在前台通过js获取到，然后一点击选中则通过ajax调用更改状态值是难点，因为你不知道触发的是哪个控件并且更新那个字段的值，这里我通过在动态绑定时，将其id设置为改行的主键值+列名的形式，这样在前台通过监听所有texbox就可以获取到被点击的chexbox从而实时进行修改状态
[csharp]
using system;
using system.data;
using system.configuration;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
using xiongdi.common.commonhelper;
using xiongdi.bizrul;
using gprs.admin;
namespace gprs
{
public class gridviewitemtemplate : itemplate
{
private string ctype; //控件对象的字符串，以此来判断具体创建哪个控件
private datacontrolrowtype templatetype; //当前行的模板 （header，item）
private string colname; //控件要显示的字符，或是绑定数据源的字段列名
private string colid; //绑定字段
private int ischecked;
private int ischeckedall;
private int datatype=convert.toint32(quarrysclass.datatype); //数据库类型
private string id; //主键
/// <summary>
/// 是否回发
/// </summary>
public bool isautopostback{get;set;}
public string id
{
get
{
return id;
}
set
{
id = value;
}
}
public string idvalue{get;set;}
public int ischecked
{
get
{
return ischecked;
}
set
{
ischecked = value;
}
}
/// <summary>
/// 是否全部选中
/// </summary>
public int ischeckedall
{
get
{
return ischeckedall;
}
set
{
ischeckedall = value;
}
}
/// <summary>
/// 控件模板
/// </summary>
/// <param name="rtype">rowtype</param>
/// <param name="colid">字段id</param>
/// <param name="name">字段名称</param>
/// <param name="ctype">模板字段类型</param>
/// <param name="id">主键</param>
public gridviewitemtemplate(datacontrolrowtype rtype, string colid,string name,string ctype,string id)
{
isautopostback = true;
this.colid = colid;
colname = name;
templatetype = rtype;
this.ctype = ctype;
this.id = id;
}
private void texboxclicking(object sender, eventargs e)
{
checkbox cbx = (checkbox)sender;
gridviewrow container = (gridviewrow)cbx.namingcontainer;
//关键位置
//使用databinder.eval绑定数据
//proname,mytemplate的属性.在创建mytemplate实例时,为此属性赋值(数据源字段)
cbx.attributes.add("onclick", "alert('" + databinder.eval(container.dataitem, colid).tostring() + "');");
}
public void instantiatein(system.web.ui.control container)
{
if (templatetype == datacontrolrowtype.header)
{
if (ctype == "checkbox")
{
checkbox cbxall = new checkbox();
//cbxall.autopostback = isautopostback;
//cbxall.attributes.add("onclick", "javascript：return confirm('确定要更新本列数据吗？');");
//cbxall.checkedchanged += new eventhandler(cbxall_checkedchanged);
cbxall.checked = convert.toboolean(equstatussearch.ht[colid]);
cbxall.id = colid;
container.controls.add(cbxall);
}
literal ltl = new literal();
ltl.text = colname;
container.controls.add(ltl);
}
else if (templatetype == datacontrolrowtype.datarow)
{
if (ctype == "checkbox")
{
//hiddenfield hdf = new hiddenfield();
//hdf.id = "hidf" + colid;
//hdf.databinding += new eventhandler(this.hiddenfieldxdatabinding);
//container.controls.add(hdf);
checkbox cbx = new checkbox();
//cbx.autopostback = isautopostback;
//cbx.checkedchanged += new eventhandler(cbx_checkedchanged);
cbx.databinding += new eventhandler(cbx_databinding);
container.controls.add(cbx);
}
else if (ctype == "convert")
{
literal lbl = new literal();
lbl.id = "lbl" + colid;
lbl.databinding += new eventhandler(lbl_databinding);
container.controls.add(lbl);
}
}
}
void cbx_checkedchanged(object sender, eventargs e)
{
checkbox cbx = (checkbox)sender;
ischecked = cbx.checked ? 1 : 0;
string strwhere = string.format(" {0}='{1}'", this.id, idvalue);
equsearchbll.equbll.updateallchecked(colid, ischeckedall, strwhere);
}
void cbxall_checkedchanged(object sender, eventargs e)
{
checkbox cbxall= (checkbox)sender;
ischeckedall = cbxall.checked ? 1 : 0;
cbxall.checked = !cbxall.checked;
equsearchbll.equbll.updateallchecked(colid, ischeckedall,string.empty);
}
void lbl_databinding(object sender, eventargs e)
{
label lbl = (label)sender;
gridviewrow row = (gridviewrow)lbl.namingcontainer;
if (!string.isnullorempty(colid))
{
lbl.text =commonclass.convertdatetime(databinder.eval(row.dataitem, colid));
}
}
void cbx_databinding(object sender, eventargs e)
{
checkbox cbx = (checkbox)sender;
gridviewrow row = (gridviewrow)cbx.namingcontainer;
string str=databinder.eval(row.dataitem, colid)==null?string.empty:databinder.eval(row.dataitem, colid).tostring();
string id = databinder.eval(row.dataitem, colid) == null ? string.empty : databinder.eval(row.dataitem, id).tostring();
cbx.id = "cbx_" + id + "-" + colid; //这里给chexbox的id赋予唯一且包含特殊含义的值
if (datatype == (int)enumdatatype.access)
{
if (str.tolower() == "true")
{
cbx.checked = true;
}
else
{
cbx.checked = false;
}
}
else
{
if (str =="1")
{
cbx.checked = true;
}
else
{
cbx.checked = false;
}
}
}
}
}
更新选中：
[javascript]
var isreturnstatus = function (data) {
if (data > 1) {
searchdata();//点击查询按钮
}
}
$(function () {
$("td").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxid = $(this).attr("id");
var state = $(this).attr("checked")
$.post("ajax/updatestatus.ashx", { "id": cbxid, "ischecked": state, "fid": "samid" }, isreturnstatus);
});
});
$("th").find("input:checkbox").click(
function () {
if (confirm("确定要更新这一列数据吗？") == true) {
var cbxid = $(this).attr("id");
var state = $(this).attr("checked");
$.post("ajax/updatestatus.ashx", { "id": cbxid, "ischecked": state }, isreturnstatus);
}
});
});
function searchdata() {
var btn = document.getelementbyid("<%=btnquery.clientid %>");
btn.click();
}
ajax一般处理文件，用于异步更新选中的checdbox值
[csharp]
public class updatestatus : ihttphandler
{
public void processrequest(httpcontext context)
{
context.response.contenttype = "text/plain";
hashtable ht =equstatussearch.ht; //表头选中项状态保持
int ischecked = context.request["ischecked"] == "checked" ? 1 : 0;
string colid=context.request["id"];
string name = colid.substring(colid.lastindexof('_')+1, colid.length - colid.lastindexof('_')-1);
int result=0;
if (quarrysclass.checkflag.tolower().indexof("@" + name + "@") != -1)
{
if (ht.containskey(name))
{
ht.remove(name);
}
if (ischecked == 1)
{
ht.add(name, true);
}
else
{
ht.add(name, false);
}
string selectstr = quarrysclass.strwhere;
//控制前台刷新
result = equsearchbll.equbll.updateallchecked(name, ischecked, selectstr) == 1 ? 2 : equsearchbll.equbll.updateallchecked(name, ischecked, selectstr);
}
else
{
if (name.contains('-'))
{
string idname = context.request["fid"];
string[] arrays = name.split('-');
string id = arrays[0];
string fieldname = arrays[1];
string strwhere = string.format(" and {0}='{1}'",idname,id);
result = equsearchbll.equbll.updateallchecked(fieldname, ischecked, strwhere);
}
}
context.response.write(result);
}
public bool isreusable
{
get
{
return false;
}
}
}
推荐阅读
-
C#中GridView动态添加列的实现方法
-
.NET导出Gridview到excel 带模板列显示
-
[Devexpress]GridControl 绑定DataSource时GridView列不变化
-
JavaScript动态绑定事件，且触发自定义函数时，如何带参数传递？
-
.NET导出Gridview到excel 带模板列显示
-
动态绑定Gridview带模板列
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
-
js循环动态绑定带参数函数遇到的问题及解决方案[转]_javascript技巧
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
-
js循环动态绑定带参数函数遇到的问题及解决方案[转]_javascript技巧