如何通过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 }); 




    });