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

【问题标题】：Check/Uncheck JqGrid Header Checkbox选中/取消选中 JqGrid 标题复选框
【发布时间】：2014-08-04 07:11:01
【问题描述】：

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

这是我的 colNames：

  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;


}

这是我的初始屏幕：

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

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

我想你是这样的：

multiselect: true

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

您可以输入提供的选项：

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

Demo jqgrid with multiselect:true,

【讨论】：

你可以把它放在你有所有其他选项的地方，比如gridComplete等。检查答案。
当我放多选时：true，它会在每一行中创建一个额外的标题复选框和复选框，并具有突然的行为。
看看你已经摆脱了所有的自定义复选框和格式化回调。
更新您的列：colNames: ['', 'Fee Type', 'Description','Actions']
我删除了复选框的所有自定义格式化程序，它会自动创建标题和所有行复选框，但是当我单击标题复选框时，它不会选择所有行复选框。我在 jqgrid 中有三行，它只选择前两行，当我通过单击第三行中的 chechkbox 选择第三行，然后取消选择标题复选框时，第三行复选框保持选中状态。我不知道为什么？？是的，我已经更新了我的列名。

【解决方案2】：

最简单且最好的方法是使用多选。无需在您的 colNames 中使用 input type = 复选框。下面我举个例子。

                        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

【讨论】：