在jQuery Grid中单击时无法检查 Headers 复选框-Java 学习之路

我有一个jquery Grid我在 Headers 中手动添加了复选框（不使用多选属性） . 现在我想在jQuery Grid中做 Headers 复选框应该在单击时检查并取消选中 . 有人可以建议我一个合理的解决方案吗？

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函数中也设置了警告信息，警告信息显示但是复选框没有检查 . （如需更多规格，请查看** **部分代码）

1 回答

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

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

使用此行，所有复选框都包括 Headers 一，并根据条件设置 .

另一件事是你需要stopPropagation，因为在jqGrid的 Headers 中附加了另一个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();        
}

回复于 2024-05-05T15:36:54+08:00

在jQuery Grid中单击时无法检查 Headers 复选框

1 回答

相关问题