在 jQuery Grid 中单击时无法选中标题复选框答案

【问题标题】：Header checkbox can not be checked when clicked in jQuery Grid在 jQuery Grid 中单击时无法选中标题复选框
【发布时间】：2018-12-09 15:05:49
【问题描述】：

我有一个 jQUery Grid，我在标题中手动添加了复选框（不使用多选属性）。现在我想做 jQuery Grid 中的标题复选框，点击时应该选中和取消选中。谁能给我一个合理的解决方案？

 function showDepartmentGrid(id) {
    $('#list_department_div').append('<table id="list_department"></table>');     
    $("#list_department").jqGrid({
        data: eventReceiveDepartments,
        datatype: "local",  
        colNames:[
            **'<input type="checkbox" onchange="checkAll(this)" name="chk[]"/>',**        
            dictWords['user_department'],
            'eventId',
            'belongingDepartment',
            'department'
        ],         
        colModel:[
            **{name: 'receive',
                class:'chcktbl',
                cellEdit: true,
                edittype: 'checkbox',
                sortable:false,
                align: 'center',
                editoptions: {value: "true:false"},
                formatter: "checkbox",
                width: '40',
                formatoptions: {disabled: false}
            },**
            {name:'departmentName',width: 170},
            {name: 'eventId', hidden:true},
            {name: 'belongingDepartment', hidden:true},
            {name: 'department', hidden:true}
        ],
        multiselect: false,
        height: 500,
        width: 250,
        shrinkToFit:false,
        rowNum: receiveDepartments.length,
        //caption: 'User master',
        //rownumbers: true,
        caption: dictWords['user_department'],
    });
}

**function checkAll(ele) {      
    var checkboxes = document.getElementsByTagName('input');
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = true;
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {
            console.log(i)
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
};**

我尝试过这种方式，在 checkAll 函数中也设置了警报消息，警报消息已显示但复选框未选中。（更多规范请查看 ** ** 部分代码）

【问题讨论】：

使用哪个版本的 jqGrid - Guriddo jqGrid、free-jqGrid 或 jqGrid

标签： javascript jquery jqgrid

【解决方案1】：

最后我解决了这个问题。我在 (colName) 的 Input 中添加了 id 和 class 字段

colNames:["<input id='headCheck' class='hdCheck' type='checkbox'/>" ]

不需要在名称字段中添加任何数组。

然后在 jquery 网格内部，在加载完成方法中，我为标题复选框编写了选中的未选中逻辑。

         loadComplete: function () {  
            //header checkbox made clickable            
            $('.hdCheck').parent().removeClass('ui-jqgrid-sortable');
            var allRows=[];
            allRows = $('#list_department').jqGrid('getDataIDs');
            if ($("#headCheck").change(function(){
               if ($(this).is(':checked')){
                    isAllDepratment= true;                     
               }else{
                    isAllDepratment= false;
               } 
               allRows.forEach(function(id) {
                    checkUncheckDepartment(id,isAllDepratment);
               });
           }));                                                        
        }
    // This method responsible for checked each row checkbox depends on 'rowid'
    // which satisfied my requirement.shared if helps anyone.  
    function checkUncheckDepartment(rowid, isAllDepratment) {
       var list = kmcUI.getjqGridList({id: '#list_department'});
       var data = list.getRowData(rowid);
       for (var i in receiveDepartments) {
         if (data['eventId'] == receiveDepartments[i].eventId && 
           data['belongingDepartment']==receiveDepartments[i].belongingDepartment &&
           data['department'] == receiveDepartments[i].department
            ) {  
            if (isAllDepratment == true){
                receiveDepartments[i].receive = isAllDepratment;
                list.setRowData(rowid, receiveDepartments[i]);
                break;  
            }else{
                receiveDepartments[i].receive = isAllDepratment;
                list.setRowData(rowid, receiveDepartments[i]);
                break; 
            }
        }
    }
}

【讨论】：

【解决方案2】：

代码中的注释部分是这一行：

var checkboxes = document.getElementsByTagName('input');

通过这一行，所有复选框都包括标题之一，并根据条件进行设置。

另一件事是您需要停止传播，因为在 jqGrid 的标题中附加了另一个单击事件。所以为了这个工作，你首先需要通过在您的复选框中添加一个类并传递事件参数和第二个返回 e.stopPropagation();在你的函数结束时。

...
colNames:[
    '<input type="checkbox" onchange="checkAll(this, event)" class ="myclass" name="chk[]"/>',
...

函数可以是这样的：

function checkAll(ele, e) {     
    var checkboxes = document.getElementsByTagName('input');
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if(!$(checkboxes[i]).hasClass('myclass')) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = true;
                }
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {
            if(!$(checkboxes[i]).hasClass('myclass')) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;
                }
            }
        }
    }
    e.stopPropagation();        
}

【讨论】：