如何通過webMethod在jqGrid中保存/恢復CheckBox狀態？

Question

我正在使用「multiselect：true」和webMethods的jqGrid。我需要堅持狀態，所以我將把數據庫中的網格狀態，爲了做到這一點，我需要知道哪些行選擇了複選框，並通過webMethod傳遞，然後在另一方面，我需要能夠指定給網格來選擇或取消選擇特定的複選框。

這是我當前的綁定代碼，serializeGridData沒有選取複選框狀態。

$(document).ready(function() { 
    jQuery("#selectedInmateList").jqGrid({ 
     url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3", 
     postData: { 
      inmateList: function() { 
       return InmateListArg; 
      } 
     }, 
     mtype: 'POST', 
     datatype: 'json', 
     ajaxGridOptions: { contentType: "application/json" }, 
     serializeGridData: function (postData) { 

      var propertyName, propertyValue, dataToSend = {}; 
      for (propertyName in postData) { 
       if (postData.hasOwnProperty(propertyName)) { 
        propertyValue = postData[propertyName]; 
        if ($.isFunction(propertyValue)) { 
         dataToSend[propertyName] = propertyValue(); 
        } else { 
         dataToSend[propertyName] = propertyValue 
        } 
       } 
      } 
      return JSON.stringify(dataToSend); 
     }, 
     onSelectRow: function (id) { 

     }, 

     jsonReader: { 
      root: "d.rows", 
      page: "d.page", 
      total: "d.total", 
      records: "d.records" 
     }, 
     colNames: ['select', 'LastName', 'FirstName', 'id'], 
     colModel: [ 
       { name: 'select', index: 'select', width: 300, align: 'center' }, 
       { name: 'LastName', index: 'LastName', width: 300, align: 'center' }, 
       { name: 'FirstName', index: 'FirstName', width: 300, align: 'center' }, 
       { name: 'id', index: 'id', align: 'center', hidden: true } 
       ], 
     pager: '#prod_pager', 
     rowList: [10, 20, 30], 
     sortname: 'Code', 
     sortorder: 'desc', 

     rowNum: 10, 
     loadtext: "Loading....", 
     shrinkToFit: false, 
     multiselect: true, 
     emptyrecords: "No records to view", 
     //width: x - 40, 
     height: "auto", 
     rownumbers: true, 
     //subGrid: true, 
     caption: 'Selected Inmates' 
    }); 
}); 

Answer 1

如果我理解你的正確，首先需要將選定行的當前列表發送到服務器。例如，如果用戶選擇或取消選擇新行，則可以將當前行的列表直接發送到服務器。您可以在onSelectRow和onSelectAll回調中執行此操作。此外，您需要服務器只發送當前頁面的數據（如果使用loadonce: true選項，則爲完整數據），但也需要選擇行的id列表。在loadComplete裏面你可以調用循環setSelection方法來選擇行。

我會建議您檢查回調onSelectRow，onSelectAll以及爲the answer創建the demoloadComplete的代碼。 The old answer提供了相同想法的基礎。

Answer 2

要傳遞所選擇的行ID到我用這個WEBMETHOD：

var selectedIDs = jQuery('#selectedInmateList').jqGrid('getGridParam', 'selarrrow'); 

然後我補充說，我的WEBMETHOD PARAM「InmateListArg」

然後我說如果行這表明隱藏的列應該檢查與否，然後我使用loadComplete事件來根據隱藏列中的數據選擇所需的行。

$(document).ready(function() { 
     jQuery("#selectedInmateList").jqGrid({ 
      url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3", 
      postData: { 
       inmateList: function() { 
        return InmateListArg; 
       } 
      }, 
      mtype: 'POST', 
      datatype: 'json', 
      ajaxGridOptions: { contentType: "application/json" }, 
      serializeGridData: function (postData) { 

       var propertyName, propertyValue, dataToSend = {}; 
       for (propertyName in postData) { 
        if (postData.hasOwnProperty(propertyName)) { 
         propertyValue = postData[propertyName]; 
         if ($.isFunction(propertyValue)) { 
          dataToSend[propertyName] = propertyValue(); 
         } else { 
          dataToSend[propertyName] = propertyValue 
         } 
        } 
       } 

       return JSON.stringify(dataToSend); 
      }, 
      onSelectRow: function (id) { 

      }, 
      loadComplete: function (id) { 

       idsOfSelectedRows = []; 

       var gridData = jQuery("#selectedInmateList").getRowData(); 

       for (i = 0; i < gridData.length; i++) { 
        var isChecked = gridData[i]['checked']; 
        var id = gridData[i]['id']; 

        if (isChecked == 'True') { 
         idsOfSelectedRows.push(id); 
        } 
       } 

       var $this = $(this), i, count; 
       for (i = 0, count = idsOfSelectedRows.length; i < count; i++) { 
        $this.jqGrid('setSelection', idsOfSelectedRows[i], false); 
       } 


      }, 

      jsonReader: { 
       root: "d.rows", 
       page: "d.page", 
       total: "d.total", 
       records: "d.records" 
      }, 
      colNames: ['select', 'LastName', 'FirstName', 'id', 'checked'], 
      colModel: [ 
        { name: 'select', index: 'select', width: 300, align: 'center' }, 
        { name: 'LastName', index: 'LastName', width: 300, align: 'center' }, 
        { name: 'FirstName', index: 'FirstName', width: 300, align: 'center' }, 
        { name: 'id', index: 'id', align: 'center' /*, hidden: true*/ }, 
        { name: 'checked', index: 'checked', align: 'center' } 
        ], 
      pager: '#prod_pager', 
      rowList: [10, 20, 30], 
      sortname: 'Code', 
      sortorder: 'desc', 


      rowNum: 10, 
      loadtext: "Loading....", 
      shrinkToFit: false, 
      multiselect: true, 
      emptyrecords: "No records to view", 
      //width: x - 40, 
      height: "auto", 
      rownumbers: true, 
      //subGrid: true, 
      caption: 'Selected Inmates' 
     }); 
     jQuery("#prodgrid").jqGrid('navGrid', '#prod_pager', 
       { edit: false, add: false, del: true, excel: true, search: false }); 




    });