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> 

可以使用aria-describedby归因于td元素，以确定是否添加您的点击处理程序。喜欢的东西：

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属性。