欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » ASP.Net » 正文

热门阅读

为SmartGrid控件的CheckBoxColumn列设置全选与取消全选的功能

创建时间:2012年04月19日 15:00  阅读次数:(6124)
分享到:
在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教程(四):数据与行操作
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论5条
  • #1楼  评论人:匿名  评论时间:2012-5-15 9:38:48
  • 楼主辛苦了!
    谢谢你的示例
  • #2楼  评论人:匿名  评论时间:2012-9-6 9:34:13
  • 能不能通过一个外部按钮,取得当前所在列名呢
  • #3楼  评论人:Wyf  评论时间:2012-9-9 9:39:54
  • 这个没有做过测试,但有一个方法应该是行的通的。
    你在SmartGrid的的列获的焦点的时候,在htc将该列的列名存在页面的一个隐藏的字段中,比如一个<input type='hidden' id='smartgridheader'>中,然后在外部的按钮事件中直接取
    smartgridheader的值就好了。
  • #4楼  评论人:匿名  评论时间:2012-9-10 12:47:52
  • 这里用了类似tagetCol的属性,解决了

    但是复选框单独用htc处理click事件,发现影响到其他下拉的功能了,下拉获得焦点之后焦点就离不开了。纠结在这里几天了
  • #5楼  评论人:Wyf  评论时间:2012-9-10 13:34:50
  • 这个应该不会吧,每个列都使用不同的htc,相互不会有影响吧。
发表评论:
留言人:
内  容:
请输入问题 6+71=? 的结果(结果是:77)
结  果: