在GridView中实现数据行的多选

来源:互联网 发布:欧洲经济知乎 编辑:程序博客网 时间:2024/04/28 00:56

1、在为GridView指定列的时候,把第一列设置成BoundField列,列头名称为“选择”。

如:BoundField bf;
bf = new BoundField();
bf.HeaderText = "选择";
bf.ItemStyle.Width = 35;
GridView1.Columns.Add(bf);

2、在GridView的GridView1_RowDataBound事件中,添加客户端控件checkbox。

如:e.Row.Cells[0].Text = "<input type=/"checkbox/" id=/"c_" + e.Row.Cells[1].Text + "/" />";//选择

注意:参数e.Row.Cells[1].Text,表二列ID列,这样就可以和每条数据的ID关联起来了。在后边的操作,都是循环选中项,然后取出ID进行操作。

3、用js代码判断是否有项被选中。并将选中项的ID连接成字符串(用","分隔),存储到一个HiddenField控件中,供服务器端直接使用。

<script language="javascript" type="text/javascript">

        function InfoDel()
        {
            if(document.getElementById("GridView1") != null)
            {
                var dels = '';//要删除的ID串
                chs = document.getElementById("GridView1").getElementsByTagName("INPUT");
                n = 0;
                for(i = 0;i<chs.length;i++)
                {
                    if(chs[i].checked)
                    {
                        dels += chs[i].id.substr(2,chs[i].id.length)+'_';
                        n++;
                    }
                }
                if(n == 0)
                {
                   alert('请先选择要删除的记录!');
                   return false;
                }
            }
            else
            {
                alert('无数据!');
                return false;
            }
            if(!confirm('确定要删除选中的记录吗?'))
            {
                return false;
            }
            dels = dels.substr(0,dels.length-1);//去最后一位"_"
            document.getElementById('hid_dels').value = dels;//跳转到删除页进行处理
        }
</script>

4、服务器端直接对控件hid_dels中的值时行操作,就可以实现对选中的数据项的操作了。

        string[] Delids1 = hid_dels.Value.Split('_');
        for (int i = 0; i < Delids1.Length; i++)
        {
            ……

        }
至此,对数据项多选的操作就完成了。

通过这个例子,还可以进行扩展,如增加“全选”、“全消”等按钮。

这里,也把全选、全消的按钮帖出来

        // GridView 的全选不选

        //全选
        function AllCheck(GVID)
        {
            if(document.getElementById(GVID) != null)
            {
                chs = document.getElementById(GVID).getElementsByTagName("INPUT");
                n = 0;
                for(i = 0;i<chs.length;i++)
                {
                    if(!chs[i].disabled)
                    {
                        chs[i].checked = true;
                    }
                }
            }
            else
            {
                alert('暂无数据');
            }
        }
        //不选
        function AllCheckNo(GVID)
        {
            if(document.getElementById(GVID) != null)
            {
                chs = document.getElementById(GVID).getElementsByTagName("INPUT");
                n = 0;
                for(i = 0;i<chs.length;i++)
                {
                    if(!chs[i].disabled)
                    {
                        chs[i].checked = false;
                    }
                }
            }
            else
            {
                alert('暂无数据');
            }
        }
       
        /*
        说明:
            GVID 即 要控制的 GridView 的ID
       
            1、引用文件
            <script language="javascript" src="../js/AllChecked.js">//GridView的全选、不选 Js文件</script>
           
            2、全选|不选 效果实现;将以下代码拷入即可
           
            <a href="javascript:AllCheck('GridView1')" >全选</a> 
            |
             <a href="javascript:AllCheckNo('GridView1')">不选</a>
                   
        */

欢迎大家使用,如果有更好的建议或者更强的扩展,希望可以留言,一起交流。

原创粉丝点击