Asp.net多个gridview, headertemplate中的复选框选择所有/取消选择所有功能

Asp.net multiple gridviews, checkboxes in headertemplate select all / deselect all functionality

本文关键字：选择 功能 取消 复选框 多个 net gridview headertemplate Asp      更新时间：2023-09-26

我在aspx页面中使用两个gridview控件。我在两个控件中都有一列复选框。我方便用户选择/取消选择所有复选框在我的两个网格视图通过在两个网格视图的头模板中提供一个复选框和使用java脚本函数。下面是代码

<script type="text/javascript">
    function UncheckParent(obj) {
        var isUnchecked = obj.checked;
        if (isUnchecked == false) {
            var frm = document.forms[0];
            for (i = 0; i < frm.length; i++) {
                if (frm.elements[i].id.indexOf('chkSelectAllCheckboxes') != -1) {
                    frm.elements[i].checked = false;
                }
            }
        }
    }
    function CheckAll(obj) {
        var row = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
        var inputs = row.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type == "checkbox") {
                inputs[i].checked = obj.checked;
            }
        }
    }
</script>

但问题是，一旦我选择或取消选择这样的复选框中的一个，所有复选框在两个网格视图得到检查。我也可以举一个简短的例子来说明正在发生的事情。两个网格视图gdvwStudents和gdvwTeachers。两者都有复选框列和标题模板中的复选框。使用上面的代码，当我点击gdvwStudents的标题复选框时，gdvStudents和gdvTeachers中的所有复选框都会被选中。请

你做错了。你应该得到的复选框内的特定网格，其中头部被点击;相反，您将获得ALL在表单上创建的复选框!这是非常低效的，并且解释了为什么无论您单击哪个头文件，所有内容都是选中/未选中的。

如果你可以使用jQuery，你应该能够重写这些函数像这样:

function checkAll(gridID,checkbox) {
    $("#"+gridID+" input:checkbox").attr("checked",checkbox.checked);
}

按如下方式添加javascript函数

 <script type="text/javascript">
 function SelectAll(id, grd) {
     //get reference of GridView control
     var grid = null;
     if (grd = "1") {
         grid = document.getElementById("<%= GridView1.ClientID %>");
     }
     else {
         grid = document.getElementById("<%= GridView2.ClientID %>");
     }

     //variable to contain the cell of the grid
     var cell;
     if (grid.rows.length > 0) {
         //loop starts from 1. rows[0] points to the header.
         for (i = 1; i < grid.rows.length; i++) {
             //get the reference of first column
             cell = grid.rows[i].cells[0];
             //loop according to the number of childNodes in the cell
             for (j = 0; j < cell.childNodes.length; j++) {
                 //if childNode type is CheckBox                 
                 if (cell.childNodes[j].type == "checkbox") {
                     //assign the status of the Select All checkbox to the cell checkbox within the grid
                     cell.childNodes[j].checked = document.getElementById(id).checked;
                 }
             }
         }
     }
 }
</script>

并处理gridviews绑定调用javascript函数的Rowbound事件，如下所示

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        { 
            //Find the checkbox control in header and add an attribute
            ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + 
                    ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "'" + ", '1')" );
        }
    }
    protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        { 
            //Find the checkbox control in header and add an attribute
            ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + 
                    ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "'" + ", '2')" );
        }
    }

我是这样做的:

        function UnCheckAllContainer(obj) {
        var isUnchecked = obj.checked;
        if (isUnchecked == false) {
            var frm = document.forms[0];
            for (i = 0; i < frm.length; i++) {
                if (frm.elements[i].id.indexOf('chkSelectAllCheckboxesContainers') != -1
                ) {
                    frm.elements[i].checked = false;
                }
            }
        }
    }
    function CheckAllContainer(chk) {
        $('#<%=gdvwContainers.ClientID %>').find("input:checkbox").each(function () {
            if (this != chk) {
                this.checked = chk.checked;
            }
        });
    }
相关文章：