在SmartGrid控件中存在CheckBoxColumn类型列,该列提供一个选择框供用户选择“是”与“否”的功能。但如果我们控件中存在许多行数据,而让用户一行一行的来选择是不是太累了了。要是我们能提供一个“全选”的功能就太好了。
本人用的是SmartGrid老版本,也很久没有关注SmartGrid的新版本了。如果新版本中已经有了该功能,呵呵,大家就不用往下看了。
本章主要利用js来实现“全选”的功能,全部代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" % >
<%@ Register Assembly="Smart.Web.UI.WebControls.SmartGrid" Namespace="Smart.Web.UI.WebControls"
TagPrefix="SmartWeb" % >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
<title ></title >
<script type="text/javascript" language="javascript" >
function BatchSetCheckColumn(s, e) {
var TargetCols = s.TargetCols;
var grid = document.getElementById(s.GridName);
for (var i = 0; i < grid.rowCount; i++) {
grid.setCellValue(i, TargetCols, new String(e.srcElement.checked));
}
}
</script >
</head >
<body >
<form id="form1" runat="server" >
<SmartWeb:SmartGrid ID="SmartGrid1" runat="server" ColumnSizeable="true" ColumnMovable="true"
Height="200px" ReadOnly="false" DataKeyField="ID" Width="300px" >
<Columns >
<SmartWeb:CheckBoxColumn ColumnName="A" HeaderText="是否全选<input type='checkbox' onclick=BatchSetCheckColumn(this,event) TargetCols=A GridName='SmartGrid1_div' / >" / >
</Columns >
</SmartWeb:SmartGrid >
</form >
</body >
</html >
实现功能图如下:
很简单的几句代码,我们解释一下:
<SmartWeb:CheckBoxColumn ColumnName="A" HeaderText="是否全选<input type='checkbox' onclick=BatchSetCheckColumn(this,event) TargetCols=A GridName='SmartGrid1_div' / >" / >
在这段代码中,我们为HeaderText添加了一个input,类型为checkbox,这样就可以在列头显示一个选择框了。再为该input设置onclick事件,该事件执行名为BatchSetCheckColumn的js方法。同时需要为input添加两个自定义属性TargetCols与GridName,作用分别如下:
1,TargetCols属性:定义在用户点击该列头上的input时,改变SmartGrid那一列的数据。这里是改变同一列的数据,所以将它设置为本列的列名“A”。
2,GridName属性:该属性为SmartGrid的客户端ID,我们可以在生成的页面的html源码中找到它的值。利用它,我们可以在js中快速找到SmartGrid对象。
js代码就不多解释了,如果有对setCellValue不了解的话,可以参看下面教程:
SmartGrid教程(四):数据与行操作