javascript - 在 jQuery Grid 中单击时无法选中标题复选框

Question

我有一个 jQUery 网格，我在标题中手动添加了复选框(不使用多选属性)。现在我想在 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函数中也设置了alert message，alert message已经显示但是checkbox没有勾选。(更多说明请查看** **部分代码)

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