Asp.net несколько видов сетки, флажки в шаблоне заголовка выбрать все / отменить выбор всех функций

Question

Я использую два элемента управления gridview на моей странице aspx. И у меня есть столбец флажка в обоих моих элементах управления. Я помогаю пользователю выбрать / отменить выбор всех флажков в обоих видах сетки, предоставив флажок в шаблоне заголовка обоих видов сетки и используя функции сценариев 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 выбираются. Пожалуйста

Answer 1

Добавьте функцию 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>   

и обрабатывать событие Rowbound для gridviews связывают вызов функции javascript, как показано ниже

   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')" );
        }
    }

Answer 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;
            }
        });

    }

Answer 3

Вы делаете это неправильно.Вы должны получить флажки внутри определенной сетки, где щелкается заголовок;вместо этого вы получаете ALL флажки, созданные в форме!Это невероятно неэффективно и объясняет, почему все проверено / снято, независимо от того, на каком заголовке вы щелкнете.

Если вы можете использовать jQuery, вы сможете переписать эти функции примерно так:

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

См. этот jsfiddle для быстрого примера.