jqGrid Filtering Records

Question

Sembra che ci siano state alcune domande in merito a questo argomento, e hanno delle ottime risposte, ma sembra che il mio caso sia un po 'diverso. Ho bisogno di filtrare i record visualizzati in un jqGrid, ma interamente lato client.

Per diversi motivi, il modo migliore per popolare la mia griglia è con un array emesso direttamente nel JavaScript nella pagina. La griglia stessa non interagisce affatto con il server. Ho alcuni AJAX personalizzati che si verificano in vari eventi della griglia, ma il gioco è fatto. (Fondamentalmente, sto integrando questo con un set esistente di servizi disponibili che non possono cambiare in modo significativo.)

Quello che sto cercando di fare è filtrare la griglia sulla base di un semplice input di testo e pulsante. La mia pagina ha l'input di testo, il pulsante e una tabella (che diventa la griglia sul documento pronto). Mi piacerebbe associare all'evento click del pulsante (normale associazione evento jQuery, niente di speciale) e utilizzare il valore dall'input di testo come filtro di visualizzazione su jqGrid.

Con "filtro" intendo visualizzare solo i record che contengono una corrispondenza (in qualsiasi campo) per il testo nell'input. Quindi, per visualizzare tutti i record, è sufficiente svuotare l'input e fare nuovamente clic sul pulsante. Inoltre, la griglia è multi-selezione e le selezioni devono persistere attraverso il filtraggio. Devo solo essere in grado di nascondere le righe che non corrispondono a ciò che è nell'input.

È possibile?

Answer 1

Per filtrare la griglia locale è necessario riempire solo la proprietà filters del parametro postData di jqGrid e impostare inoltre search:true.

Per salvare la selezione della griglia è possibile utilizzare reloadGrid con il parametro aggiuntivo [{page:1,current:true}] (vedere here).

Il codice corrispondente può essere la seguente

$("#search").click(function() { 
    var searchFiler = $("#filter").val(), grid = $("#list"), f; 

    if (searchFiler.length === 0) { 
     grid[0].p.search = false; 
     $.extend(grid[0].p.postData,{filters:""}); 
    } 
    f = {groupOp:"OR",rules:[]}; 
    f.rules.push({field:"name",op:"cn",data:searchFiler}); 
    f.rules.push({field:"note",op:"cn",data:searchFiler}); 
    grid[0].p.search = true; 
    $.extend(grid[0].p.postData,{filters:JSON.stringify(f)}); 
    grid.trigger("reloadGrid",[{page:1,current:true}]); 
}); 

ho fatto the demo per voi quale filtro per due colonne 'Client' ('name') e 'Notes' ('nota') è possibile estendere il codice per cercare in tutte le colonne di cui hai bisogno.

A seconda di cosa si intende esattamente con la selezione della riga di salvataggio, è possibile salvare la selezione corrente da selarrrow in una variabile e ripristinare le righe selezionate con il metodo setSelection.