Флажок заголовка не может быть установлен при нажатии в jQuery Grid

Question

У меня есть 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, показывалось оповещение, но флажок не проверен. (Для более подробной информации, проверьте** ** код части)

Answer 1

Наконец, я решил проблему. Я добавил id и поле класса внутри Input of (colName)

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

Не нужно добавлять какой-либо массив в поле имени.

Затем внутриjquery grid, в методе load complete я написал проверенную непроверенную логику для заголовка checkbox.

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

С этой строкой все флажки, включая заголовок, устанавливаются в соответствии с условием.

Другая вещьявляется то, что вам нужно будет stopPropagation, так как в заголовке jqGrid прикреплено еще одно событие нажатия.Таким образом, чтобы это работало, вам сначала нужно будет добавить add class в ваш чекбокс и передать параметр события, а второй - return 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();        
}