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

Question

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

以下是我的名字：

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

这是我的colModel和rest属性：

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,

Answer 2

最简单和最好的方法是使用multiselect。无需在colNames中使用input type = checkbox。下面我提一个例子。

                        data: JSON.parse(result), //Load Data
                        loadonce: true,
                        rowList: [5, 10, 20],
                        rowNum: 10, //Total records to display by default
                        pager: '#EmpPager',
                        viewrecords: true,
                        sortorder: 'asc',
                        gridview: true,
                        sortname: 'FirstName',
                        height: 'auto',
                        altRows: true,
                        hoverrows: true,
                        caption: "Student Details",
                        multiselect: true