Question

我有一个jQUery Grid，我在标题中手动添加了复选框（不使用multiselect属性）。现在，我想在单击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函数中设置警报消息，警报消息已显示但复选框未选中。（有关更多说明，请检查** **部分代码）

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

Answer 2

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

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

在这一行中，所有复选框都包括标题1，并根据条件进行设置。

另一件事是，您将需要stopPropagation，因为在jqGrid的标题中附加了另一个click事件。因此，为了使其正常工作，您需要先通过在您的复选框中添加一个类，并传递事件参数，第二个返回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();        
}

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

2 个答案: