Rendi “Cerca” remoto e tutto il resto (ordinamento, impaginazione, ecc.) Locale in jqGrid

Sto lavorando a un progetto Django che utilizza JQgrid per visualizzare i dati dal db.

Quello che sto cercando di ottenere è di avere solo l’opzione di ricerca cablata per eseguire una ricerca remota in cui il server restituirà un set di risultati e ogni altra opzione jqgrid come l’ordinamento delle colonne, l’impaginazione ecc. Da eseguire lato client.

So che questo può essere fatto impostando loadonce:true e commutando il parametro 'datatype' tra 'local' e 'json' base all’evento .click() seconda se faccio clic su sort o next-page, search, ecc.

c’è un altro modo per fare ciò? E se no, puoi suggerire un modo pulito di fare questo trucco.

Grazie!

Sono riuscito a fare questo e sono felice di condividere questo con il resto di tutti voi. Ho pubblicato il mio intero codice jqgrid sotto la spiegazione del tuo riferimento.

Quindi, in primo luogo, io uso JSON per i miei risultati e quindi il jsonReader.

Successivamente, seguono le impostazioni specifiche per ottenere il comportamento {{search: remote}, {sorting: local}, {pagination: local}}.

  1. Imposta loadonce: false altrimenti il ​​pulsante di ricerca non colpirà il server e farà sempre una ricerca locale.

  2. Volevo implementare la funzionalità di ricerca multipla di jqGrid e quindi avere il piccolo “vetro di ingrandimento” nella barra del cercapersone.

     jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{},{multipleSearch:true}); 
  3. Ora, come ottenere la funzione di ricerca remota è ansible commutare il tipo di dati da locale a json sull’evento onSearch e onClose. Ad esempio, quando si triggers una query di ricerca (ad esempio facendo clic sul pulsante “Trova”), imposto il loadonce su false e datatype su json. Questo assicura una ricerca remota. Ora che la nostra griglia è popolata con dati ricercati remoti, dobbiamo tornare al tipo di dati: locale, tuttavia impostandolo esplicitamente suClose non funziona, quindi ho impostato loadonce: true che successivamente imposta datatype: local stesso successivamente. Notare anche che ho closeAfterSearch: true, closeOnEscape: true, in modo da garantire che l’evento onClose venga sempre chiuso dopo l’esecuzione di una query di ricerca.

     jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true, onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'}); $("#list2").trigger("reloadGrid"); }, onClose: function(){$("#list2").trigger("reloadGrid"); $("#list2").setGridParam({loadonce: true}); $(".ui-icon-refresh").trigger('click'); } }); 

$(".ui-icon-refresh").trigger('click'); forza un aggiornamento dopo aver caricato i risultati. Ciò era necessario in alcuni casi (non so perché). Sono appena incappato in questa correzione da solo e non sono sicuro del motivo per cui funziona. Mi piacerebbe sapere il motivo alla base anche se hai un’idea.

  1. Infine, ogni volta che la mia griglia è stata caricata, la casella di ricerca viene visualizzata per impostazione predefinita. Così ho forzato la chiusura semplicemente facendo clic con jquery sul pulsante “x” della casella modale. Hacky ma funziona! : P

     $(".ui-icon-closethick").trigger('click'); 

<<< Intero jqgrid codice >>>

Gentilmente scusami per il ‘xyz’s nel codice. Ho inserito del codice Django e l’ho sostituito con xyz per evitare ogni confusione.

 jQuery(document).ready(function(){ $("#list2").jqGrid({ url:'xyz', datatype: 'json', loadonce: false, mtype: 'GET', colNames:xyz colModel :xyz, jsonReader : { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" }, height: '100%', width: '100%', pager: '#pager2', rowNum:15, rowList:[10,15,30], viewrecords: true, caption: '&nbsp', autowidth: false, shrinkToFit: true, ignoreCase:true, gridview: true }); jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{}, {multipleSearch:true}); jQuery("#list2").jqGrid('navButtonAdd', '#pager2', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns", onClickButton: function() { jQuery("#list2").jqGrid('columnChooser'); } }); jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true, onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'}); $("#list2").trigger("reloadGrid"); }, onClose: function(){$("#list2").trigger("reloadGrid"); $("#list2").setGridParam({loadonce: true}); $(".ui-icon-refresh").trigger('click'); } }); $(window).bind('resize', function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeGrids, 60); divwidth = $(".content-box-header").width() - 40; //alert(divwidth); $("#list2").setGridWidth(divwidth,true); }); $(window).resize(); $(".ui-icon-closethick").trigger('click'); }); 

Se guardate il codice qui sotto, sto facendo una ricerca tra due date sulla barra degli strumenti, “e” è l’ID del mio controllo che sto usando. Ora il fattore chiave è la proprietà chiamata “ricerca”, se si imposta su “true” farà una ricerca client, false eseguirà una ricerca remota per qualsiasi metodo ajax che chiamerebbero per la ricerca.

  var gridFilter; var fieldId = e.replace('#', ''); var fieldForFilter = fieldId.replace('gs_', '');//All toolbar filters Id's are the same as the column Id but prefixed with "gs_" var splitteddates = $("#" +fieldId).val().split('-'); var grid = $("#GridJq1"); gridFilter = { groupOp: "AND", rules: [] }; gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "gt", data: "" + $.trim(splitteddates[0]) + "" }); gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "lt", data: "" + $.trim(splitteddates[1]) + "" }); grid[0].p.search = true;//specifies wether to do a client search or a server search which will be done manually. true=client search $.extend(grid[0].p.postData, { filters: JSON.stringify(gridFilter) });//combine post data and newly added filter data grid.trigger("reloadGrid", [{ page: 1, current: true}]);//reset to page and keep current selection if any 

Se ricordo bene, parte del codice di cui sopra per build la ricerca proviene da una risposta del famoso JQGrid Oleg, quindi complimenti a lui se questo fosse parte del suo codice.