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