jqGrid 在所有列中都有复选框

Question

我有一个有六列的 jqGrid，每列都有一个“复选框”格式。我需要根据列名获取所有复选框的选中和未选中值。有可能吗？

第一列是提供一个选项来选择所有剩余的列。 在定义 colModel 时，我无法添加像 onclick 或 onselect 这样的事件侦听器。

$("#Grid").jqGrid({
    url: '@Url.Action("Access", "Authorization")' + '?role=' + encodeURIComponent($('input#hIDRole').val()),
    datatype: 'json',
    colNames: ["IDAccess","Permission", "ALL", "Read", "Add", "Edit", "Copy", "Delete"],
    colModel: [
        { name: 'IDAccess', index: 'IDAccess', width: 10, resizable: false, editable: false, hidden: true },
        { name: 'Permission', index: 'Permission', width: 100, resizable: false, editable: false, hidden: false },
        { name: 'ALL', index: 'ALL', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, formatoptions: { disabled: false }, onselect: "checkBox(this.value())" },
        { name: 'IsRead_Allowed', index: 'IsRead_Allowed', editable: true, edittype: 'checkbox', formatter: "checkbox", editoptions: { value: "True:False" }, width: 50, resizable: false, formatoptions: { disabled: false }, onclick: "checkBox(checked,this.value)" },
        { name: 'IsCreate_Allowed', index: 'IsCreate_Allowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false }, onclick:"checkBox(event)"  },
        { name: 'IsUpdateAllowed', index: 'IsUpdateAllowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false }, },
        { name: 'IsCopy_Allowed', index: 'IsCopy_Allowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false } },
        { name: 'IsDeleteAllowed', index: 'IsDeleteAllowed', editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 50, resizable: false, editable: true, formatoptions: { disabled: false } },
    ],
    //rowNum: 10,
    //rowList: [10],
    pager: "#pager-json",            
    autowidth: true,            
    loadComplete: function () {
        var rowIDs = $("#Grid").jqGrid('getDataIDs');
        for (var i = 0; i < rowIDs.length ; i++) {
            var rowId = rowIDs[i];
            var rowData = jQuery('#Grid').jqGrid('getRowData', rowId);
            //below code to check the All column if the other columns have true in the db. But once checked attribute is added i am not able to uncheck
            if ((rowData['IsRead_Allowed'] == "True") && (rowData['IsCreate_Allowed'] == "True") && (rowData['IsUpdateAllowed'] == "True")
                && (rowData['IsCopy_Allowed'] == "True") && (rowData['IsDeleteAllowed'] == "True")) {
                var check = $("#" + rowId).find('input[type="checkbox"]');
                check.attr('checked', 'checked');
            }
        }
        for (var i = 0; i < rowIDs.length; i++) {
            var rowData = rowIDs[i];
            if (rowData['IsCopy_Allowed'] == null) {
                //alert("1");
                var checkbox = $("#Grid" + rowData.i);
                //checkbox.css("visibility", "hidden");
                checkbox.attr("disabled", true);
            }
        }
    }
});

Answer 1

您可以使用以下选择器来获取所有输入元素：

jQuery(".jqgrow td input", "#my_grid").each(function(){
        jQuery(this).unbind('click');
        jQuery(this).click(function(){
            ...
        });
});

input 元素实际上将包含在 td 中：

<td ... aria-describedby="my-column"><input type="checkbox" ...></td>

您可以使用td 元素上的aria-describedby 属性来确定是否添加您的点击处理程序。比如：

var col = jQuery(this).parent().attr('aria-describedby');
if (col === "IDAccess") {
    // Add handler here, etc...
}

您需要通过类似的练习来查找特定行中的所有复选框，尽管您可以使用 ID 来限制搜索，即：

jQuery(".jqgrow td input", "#" + my_id)

---

或者，您还可以使用classes colmodel 选项为每列分配一个唯一的类。例如：classes:'col1'。这将简化您设置点击处理程序的代码，并可能让您完全避免使用aria 属性。