può jcgrid supportare i menu a discesa nei campi del filtro della barra degli strumenti

sto usando jqgrid e il filtro della barra degli strumenti. per impostazione predefinita, ti dà solo una casella di testo in cui inserire i dati. Supporta un menu a discesa selezionare la casella combinata in cui posso fornire un elenco di valori tra cui scegliere per filtrarli?

Esistono alcune regole comuni per tutti i tipi di ordinamento in jqGrid

{ name: 'Category', index: 'Category', width: 200, formatter:'select', stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr } } 

dove categoriesStr sono definiti come

 var categoriesStr = ":All;1:sport;2:science"; 

Qui in aggiunta allo standard sono inseriti i valori “1: sport; 2: science” “: All” stringa che consente di non filtrare la colonna. Ovviamente puoi usare “:” o “: Seleziona …” e così via.

Nella demo preparata per la risposta puoi vedere i risultati ravvicinati.

AGGIORNATO : trovo la tua domanda interessante e ho fatto la demo . Mostra come si possono build le caselle di selezione selezionate che possono essere utilizzate nella barra degli strumenti di ricerca o nella finestra di ricerca avanzata basata sul testo che contiene la colonna corrispondente . Per una colonna uso anche il completamento automatico dell’interfaccia utente jQuery . È ansible modificare il codice per utilizzare più potenti opzioni del completamento automatico. Ecco il codice del codice:

 var mydata = [ {id:"1", Name:"Miroslav Klose", Category:"sport", Subcategory:"football"}, {id:"2", Name:"Michael Schumacher", Category:"sport", Subcategory:"formula 1"}, {id:"3", Name:"Albert Einstein", Category:"science", Subcategory:"physics"}, {id:"4", Name:"Blaise Pascal", Category:"science", Subcategory:"mathematics"} ], grid = $("#list"), getUniqueNames = function(columnName) { var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i; for (i=0;i 

È questo che vuoi?

AGGIORNATO : Un'ulteriore opzione potrebbe essere l'utilizzo del plugin select2 che combina i vantaggi del menu a discesa e la ricerca confortevole con il completamento automatico. Vedere la risposta e questa (vedere la demo) per demo ( questo e questo ) ed esempi di codice.

AGGIORNATO 2 : La risposta contiene la modifica del codice sopra per lavorare con jqGrid 4.6 / 4.7 o con jqGrid 4.8 gratuito .

Ho avuto una situazione simile. Grazie all’esempio eccellente di Oleg sopra, ha quasi risolto il problema. C’era un leggero miglioramento di cui avevo bisogno. La mia griglia è una griglia loadonce con circa 40 righe, 10 per pagina. il metodo getCol utilizzato in precedenza ha restituito solo i valori delle colonne della pagina corrente. Ma volevo popolare il filtro con valori univoci sull’intero set di dati. Quindi ecco una leggera modifica alla funzione getUniqueNames:

 var getUniqueNames = function(columnName) { // Maybe this line could be moved outside the function // If the data is really huge then the entire segregation could // be done in a single loop storing each unique column // in a map of columnNames -> unique values var data = grid.jqGrid('getGridParam', 'data'); var uniqueTexts = [], text, textsMap = {}, i; for (i = 0; i < data.length; i++) { text = data[i][columnName]; if (text !== undefined && textsMap[text] === undefined) { // to test whether the texts is unique we place it in the map. textsMap[text] = true; uniqueTexts.push(text); } } // Object.keys(textsMap); Does not work with IE8: return uniqueTexts; } 

L’ho fatto solo io. Sembrava un po ‘un trucco, ma funziona!

  1. Creato un nuovo “navButtonAdd” e per la “didascalia”, aggiunto il codice html per un menu a discesa.
  2. La funzione onclickButton non contiene nulla.
  3. Quindi ho creato una funzione onchange per gestire la ricarica della griglia quando il valore è cambiato.

      $('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', { caption: "", title: "Apply Filter", onClickButton: function () { } }); function ChangeGridView() { var gridViewFilter = $("#gridFilter").val(); $('#myGrid').setGridParam({ datatype: 'json', url: '../../Controller/ActionJSON', postData: { msgFilter: gridViewFilter } }); $('#myGrid').trigger("reloadGrid"); }; 

    Spero che questo ti aiuti!

la categoria è il nome della colonna.

 loadComplete: function () { $("#" + TableNames).setColProp('Category', { formatter: 'select', edittype: "select", editoptions: { value: "0:MALE;1:FEMALE;2:other;" } }); },