jquery - 选中/取消选中 JqGrid 标题复选框

Question

我的标题栏复选框无法正常工作。请指导我，我做错了什么。

这是我的colNames:

  colNames: ['', '<input type="checkbox" id="cbox" onclick="checkBox(event)" />', 'Fee Type', 'Description','Actions']

这是我的 colModel 和其余属性:

colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
                   { name: 'Check_Box',editable: true, index: 'Check_Box', width: 100, align: 'left', resizable: false, edittype: 'checkbox', formatoptions: { disabled: false }, editoptions: { value: "True:False" }, formatter: checkboxFormatter,sortable:false },
                   { name: 'Fee_Type', index: 'Fee_Type', width: 200, align: 'left', resizable: false },
                   { name: 'Description', index: 'Description', width: 400, align: 'left', resizable: false },
                   {
                       name: 'Actions', edittype: 'select', width: 95, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div style='float:left;margin-left:2px;margin-right:5px'><a class='ui-icon ui-icon-pencil' href=#" + rowObject[0] + " title='Edit'></a></div><div style='float:left;'><a class='ui-icon ui-icon-closethick' onclick=\"return confirm('Are you sure you want to delete this record?');\" title='Delete' href=#" + rowObject[0] + "></a></div><div class='clear'></div>"; }, resizable: false
                   }],
        rowNum: 20,
        rowList: [2, 10, 20, 50],   // page size dropdown
        pager: jQuery('#pager_Alerts'),
        pgbuttons: true,            
        viewrecords: true,      
        pagerpos: 'right',
        recordpos: 'left',
        shrinkToFit: false,
        sortorder: "asc",
        sortname: "tc_id",
        loadtext: "Loading",
        width: 795,
        hoverrows: false,
        gridComplete: function () {
        }

这是我的复选框格式化程序:

function checkboxFormatter(cellvalue, options, rowObject) {
 return "<input type='checkbox' class='check' name='checkboxIsCC'>";
}

这是我的标题列复选框事件:

function checkBox(e) {
    debugger;
   e = e || event;/* get IE event ( not passed ) */
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = false;


}

这是我的初始屏幕:

单击标题列复选框时，我希望选中所有其余行复选框，并且在未选中任何行复选框时标题复选框变为未选中状态。

Answer 1

我认为你正在追求这个:

multiselect: true

这允许在每一行上实现复选框并选择标题行上的所有复选框。

您可以输入提供的选项:

    loadtext: "Loading",
    width: 795,
    multiselect: true, // <------like here or your choice.
    hoverrows: false,

Demo jqgrid with multiselect:true,