Dokonaj wyboru wielokrotnego zaznaczenia jqGrid, który będzie kontynuowany po paginacji, wyszukiwaniu paska narzędzi lub filtru

Question

Mam to jqGrid. Poniżej znajduje mój pożądane zachowanie:

1. Wybrany element będzie miał wybór utrzymywać (i być renderowane jako taka dla użytkownika) po zmianie stron lub przeprowadzając wyszukiwanie (pasek narzędzi lub filtra)

2. Gdy select wybrany jest cały przycisk, jeśli nie wybrano żadnych elementów na bieżącej stronie, wszystkie zostaną wybrane. Jeśli jest już zaznaczony element, wyczyści całą listę, czy na stronie, czy nie.

3. Po kliknięciu przycisku Wydrukuj fakturę, albo użyje listy identyfikatorów, które zostały utworzone w trakcie naszej podróży, albo utworzy listę wszystkich IDS, które zostały wybrane, niezależnie od tego, czy są na bieżącym wyświetlaczu, czy nie.

Byłoby do zaakceptowania, gdyby filtr nie był obsługiwany, ale preferowany.

---

Aby mieć pewność, wiem trochę o js, ​​ale tutaj są pewne rzeczy, które próbowałem z mieszanym powodzeniem:

1. Ten answer sugeruje użycie onSelectRow i onSelectAll, ale byłem niezdolny do wdrożenia. see fail

2. This wygląda obiecująco, ale tylko naprawi sprawę stronicowania. Tak więC# 1 wygląda jak preferowana trasa. pastebin for question #2

---

PS: wracając do wiedzy niewiele o js. w moim projekcie działa funkcja alertu i nie pokazuje funkcjonalności select_ids, nie wiem, dlaczego nie wyświetla alertu w jsfiddle. więc przepraszam z góry, że wymaga naprawy, punkty brownie, aby jednak opublikować rozwidloną poprawkę.

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

tutaj jest skrypt. onSelectAll i onSelectRow pozwalają zapisać stan, który jest przywrócony w 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); 
        } 
       } 
      });