Thực hiện lựa chọn nhiều lựa chọn jqGrid vẫn tiếp tục sau khi phân trang, tìm kiếm trên thanh công cụ hoặc lọc

Question

Tôi có số này jqGrid. Sau đây là hành vi mong muốn của tôi:

1. các sản phẩm được chọn sẽ có sự lựa chọn vẫn tồn tại (và được trả lại như vậy cho người sử dụng) sau khi thay đổi trang hoặc làm một tìm kiếm (thanh công cụ hoặc bộ lọc)

2. Khi chọn tất cả các nút được chọn, nếu không có mục nào trên trang hiện tại được chọn, nó sẽ chọn tất cả. Nếu có một mục đã được chọn, nó sẽ xóa toàn bộ danh sách, cho dù trên trang hay không.

3. Khi nút In hóa đơn được bấm, nó sẽ sử dụng danh sách ID đã được tạo khi chúng tôi đi hoặc tạo danh sách tất cả ID đã được chọn, cho dù trong màn hình hiện tại hay không.

Sẽ chấp nhận được nếu bộ lọc không được hỗ trợ nhưng được ưu tiên.

---

Để chắc chắn, tôi biết rất ít về js, nhưng đây là một số điều mà tôi đã thử với thành công hỗn hợp:

1. answer Điều này cho thấy sử dụng onSelectRow và onSelectAll, nhưng tôi đã không thể triển khai. see fail

2. This có vẻ đầy hứa hẹn, nhưng chỉ sửa lỗi phân trang. Vì vậy, # 1 trông giống như một tuyến đường ưa thích. pastebin for question #2

---

T.B. trở lại với những điều ít biết về js. trong dự án của tôi, chức năng cảnh báo và không hiển thị của hàm select_ids không hoạt động, không chắc chắn lý do tại sao nó không hiển thị cảnh báo trong jsfiddle. vì vậy xin lỗi trước rằng nó cần sửa chữa, điểm brownie để tuy nhiên đăng bài sửa chữa nĩa.

grid.jqGrid({ 
      datatype: "local", 
      data: mydata, 
      colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
      colModel:[ 
       {name:'id',index:'id', key: true, width:70, sorttype:"int"}, 
       {name:'invdate',index:'invdate', width:90, sorttype:"date"}, 
       {name:'name',index:'name', width:100}, 
       {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, 
       {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, 
       {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, 
       {name:'note',index:'note', width:150, sortable:false} 
      ], 
      search:true, 
      pager:'#pager', 
      jsonReader: {cell:""}, 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      sortname: 'id', 
      sortorder: 'asc', 
      viewrecords: true, 
      multiSort: true, 
      multiselect: true, 

      height: "100%", 
      caption: "Invoice Print" 
     }); 
     grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true}, 
        {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true}); 
     grid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch:"cn"}); 

Answer 1

đây là tập lệnh. onSelectAll và onSelectRow cho phép để lưu trạng thái được phục hồi trong gridComplete

$(function() { 

      var selectedRows = {}; 
      var agentsGrid = $('#agentsTbl'); 
      agentsGrid.jqGrid({ 
       height: 400, 
       datatype: 'local', 
       multiselect: true, 
       ignoreCase: true, 
       colNames: [ 
        'isn', 'Agent', 'Type', 'Country', 'Plan', 'Date To'], 
       colModel: [ 
        { name: 'isn', index: 'isn', hidden: true, key: true, align: 'center' }, 
        { name: 'agentName', index: 'agentName', align: 'center', search: true, stype: 'text', searchoptions: { sopt: ['cn'] } }, 
        { name: 'agentType', index: 'agentType', hidden: true }, 
        { name: 'country', index: 'country', align: 'center', search: true, width: 100, fixed: true }, 
        { name: 'scheme', index: 'scheme', align: 'center', search: true, stype: 'text', searchoptions: { sopt: ['cn'] } }, 
        { name: 'dateTo', index: 'dateTo', align: 'center', search: false } 
       ], 
       grouping: true, 
       groupingView: { 
        groupField: ['agentType'], 
        groupDataSorted: true, 
        groupColumnShow: false 
       }, 
       // to save selection state 
       onSelectAll: function (rowIds, status) { 
        if (status === true) { 
         for (var i = 0; i < rowIds.length; i++) { 
          selectedRows[rowIds[i]] = true; 
         } 
        } else { 
         for (var i = 0; i < rowIds.length; i++) { 
          delete selectedRows[rowIds[i]]; 
         } 
        } 
       }, 
       onSelectRow: function (rowId, status, e) { 
        if (status === false) { 
         delete selectedRows[rowId]; 
        } else { 
         selectedRows[rowId] = status; 
        } 

       }, 
       gridComplete: function() { 
        for (var rowId in selectedRows) { 
         agentsGrid.setSelection(rowId, true); 
        } 
       } 
      });