jqGrid: utilizzo di più metodi per filtrare i dati

Il mio requisito è mostrare una pagina con più filtri da applicare ai dati della griglia.

Supponiamo che stiamo parlando di ordini e un ordine ha i seguenti attributi

public class Order { public int OrderID public DateTime OrderDate public DateTime ShipmentDate public int OrderTotal public int OrderStatus } 

All’interno dell’object jqgrid sto mostrando tutti gli attributi tranne OrderStatus

Il requisito è creare una vista che abbia

  • il jqGrid sulla parte sinistra
  • un pannello sulla destra

All’interno del pannello di destra l’utente vedrà un elenco di checkbox che rappresenta ogni ansible valore OrderStatus e che desidera eseguire la ricerca utilizzando entrambi i metodi (ad esempio selezionando la casella “Ordini spediti” e quindi filtrando la griglia con Importo maggiore di un valore)

Ho già configurato il filtro avanzato (ricerca multiplesearch:true ) all’interno dell’object jqGrid e sono in grado di creare filtri complessi che combinano campi e operatori logici.

Qualche idea su come posso inviare anche i dati dal pannello di destra quando l’utente preme il pulsante di ricerca?

Aggiornamento 1 :

Preambolo: il campione Oleg è fantastico ma sfortunatamente non soddisfa i requisiti del mio cliente 🙁

@ Oleg: non capisco perché pensi che:

Se i dati sono al di fuori della griglia, verranno visualizzati i dettagli dell’ordine nel riquadro destro solo per la riga selezionata. Quindi l’utente non avrà una così buona panoramica dei dati.

forse la mia descrizione non era chiara ma non mostrerò alcun dettaglio dell’ordine. Per chiarire meglio il mio requisito, ho modificato il tuo campione per mostrarti l’interfaccia utente finale desiderata, come nell’immagine seguente: L'interfaccia utente come lo desidera il cliente

Il cliente desidera filtrare i dati nella griglia utilizzando due metodi o entrambi:

  • Utilizzando le strutture di ricerca multiplesearch fornite dalla griglia stessa (grazie per la menzione del workaround)
  • Utilizzo del pannello di ricerca personalizzato (quello con le caselle di controllo a destra) fornito

Da un punto di vista funzionale il requisito è molto semplice da esprimere: quando l’utente fa clic su una casella di controllo o effettua una ricerca utilizzando la ricerca multiplesearch nativa, dovrei pubblicare i valori sul server includendo anche lo stato delle caselle di controllo.

Per riassumere dovrei:

  • Aggiungi lo stato delle caselle di controllo quando viene effettuato un post tramite la ricerca multiplesearch nativa
  • Aggiungi lo stato corrente di ricerca multiplesearch (se presente) quando l’utente fa clic su una casella di controllo

C’è un modo per fare questo?

Comprendo questo requisito molto bene. Nel caso in questione ho usato le checkbox all’interno di jqGrid. Il vantaggio maggiore di avere le informazioni all’interno di jqGrid non è solo la possibilità di una facile ricerca. Se i dati sono al di fuori della griglia, verranno visualizzati i dettagli dell’ordine nel riquadro destro solo per la riga selezionata . Quindi l’utente non avrà una così buona panoramica dei dati.

Per poter posizionare molte caselle di controllo nella tabella senza scorrimento orizzontale permanente ho ruotato le intestazioni delle colonne con “checkbox con la tecnica descritta in Testo verticale all’interno delle intestazioni delle tabelle utilizzando una libreria SVG basata su JavaScript .” Questa rotazione non sembra perfetta in IE, ma in altri browser funziona perfettamente.

È ansible conservare i dati dal campo OrderStatus in una colonna nascosta e decodificare la maschera di bit su boolean che compilano le caselle di controllo sul client o sul lato server.

Perché usare vuole utilizzare la ricerca multiplesearch:true Devo menzionare un bug in jQuery.clone che segue il bug in jqGrid multi-search in tutte le versioni dei browser IE. Se si definisce più come filtri di ricerca, verrà utilizzato solo il primo perché il campo operativo di tutti gli altri filtri verrà letto come undefined . È un peccato, ma il bug non è stato corretto anche in jQuery 1.4.3 appena pubblicato. Per poter utilizzare la ricerca multiplesearch:true puoi usare il suggerimento di soluzione alternativa di Jiho Han sul forum di trirand.com .

Tutti insieme puoi vedere nell’esempio demo che produce la griglia

alt text

dove puoi cercare più campi

alt text

Il codice corrispondente:

 var myData = [ { orderID: "10", orderDate: "2010-09-18", shipmentDate: "2010-09-20", orderStatus: "2" }, { orderID: "15", orderDate: "2010-09-20", shipmentDate: "2010-09-24", orderStatus: "3" }, { orderID: "20", orderDate: "2010-10-16", shipmentDate: "2010-10-17", orderStatus: "1" } ]; // decode 'orderStatus' column and add additional boolean data based on the bitmap mask for (var i=0, l=myData.length; i 

dove rotateCheckboxColumnHeaders e il bugfix nella ricerca avanzata lo hanno definito

 // we use workaround from http://www.trirand.com/blog/?page_id=393/bugs/in-multiple-search-second-and-subsequent-ops-are-sent-as-undefined-in-ie6/ // to fix the bug in the jQuery.clone (see http://bugs.jquery.com/ticket/6793 and // dscussion on the http://api.jquery.com/clone/ jQuery.event.special.click = { setup: function() { if (jQuery(this).hasClass("ui-search")) { jQuery(this).bind("click", jQuery.event.special.click.handler); } return false; }, teardown: function() { jQuery(this).unbind("click", jQuery.event.special.click.handler); return false; }, handler: function(event) { jQuery(".ui-searchFilter td.ops select").attr("name", "op"); } }; var rotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = jQuery("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); jQuery("thead:first tr th").height(headerHeight); headerHeight = jQuery("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = jQuery("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!jQuery.browser.msie) { if (jQuery.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { jQuery("span", headDiv).css("left", 0); headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); } else { headDiv.css("left", 3); } headDiv.parent().css("zoom",1); } } } }; 

Se preferisci mantenere le caselle di controllo al di fuori della griglia, puoi eseguire la decodifica del OrderStatus maschera di bit all'interno del gestore di eventi onSelectRow .

AGGIORNAMENTO : Ho davvero frainteso le tue esigenze all'inizio. Guarda l' esempio modificato . Adesso sembra alt text

ed è più vicino a ciò di cui hai bisogno.

Proprio come follow-up sto includendo qui un altro metodo che ho trovato per ottenere lo stesso risultato.

Questo metodo suppone di utilizzare il parametro postData di jqGrid. All’interno del metodo ho definito varie funzioni che verificano lo stato attuale delle caselle di controllo e invia un parametro al server in cui può essere utilizzato per il filtraggio.

Questo è un campione

 postData: { pending: function () { if ($("#cb_pending").is(':checked')) { return true; } else { return false; } } } 

Il vantaggio di questa soluzione rispetto a quello illustrato da Oleg è che è ansible utilizzare operatori logici misti (AND / OR) sul lato server mentre usando la sezione filtri come nella risposta Oleg non è ansible.

Buona programmazione!