puede jqgrid support desplegables en los campos de filtro de la barra de herramientas

Estoy usando jqgrid y el filtro de la barra de herramientas. de forma predeterminada, solo te da un cuadro de texto para ingresar datos. ¿Admite un cuadro combinado de selección desplegable donde puedo darle una lista de valores para elegir filtrar?

Hay algunas reglas comunes para todos los tipos de clasificación en jqGrid

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

donde categoriesStr se definen como

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

Aquí, además de los valores estándar “1: deporte; 2: ciencia”, se insertan “: todos”, que permiten filtrar la columna. Por supuesto, puede usar “:” o “: Seleccionar …” y así sucesivamente.

En la demostración preparada para la respuesta , puede ver los resultados cercanos.

ACTUALIZADO : encuentro interesante tu pregunta y realicé la demostración . Muestra cómo se pueden crear los cuadros combinados de selección que se pueden usar en la barra de herramientas de búsqueda o en el cuadro de diálogo de búsqueda avanzada en función del contenido de texto de la columna correspondiente . Para una columna utilizo además jQuery UI autocomplete . Puede modificar el código para usar más opciones potentes diferentes de la función autocompletar. Aquí está el código del código:

 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 

¿Es esto lo que quieres?

ACTUALIZADO : Una opción más podría ser el uso del complemento select2, que combina las ventajas del menú desplegable y la búsqueda cómoda mediante Autocompletar. Vea la respuesta y esta (vea la demostración) para demostraciones ( esta y esta ) y ejemplos de código.

ACTUALIZADO 2 : la respuesta contiene la modificación del código anterior para trabajar con jqGrid 4.6 / 4.7 o con jqGrid 4.8 .

Tuve una situación similar. Gracias al excelente ejemplo anterior de Oleg, casi resolvió el problema. Hubo una ligera mejoría que necesitaba. Mi cuadrícula es una grilla loadonce que tenía alrededor de 40 filas, 10 por página. El método getCol utilizado anteriormente solo devolvió los valores de columna de la página actual. Pero quería llenar el filtro con valores únicos en todo el conjunto de datos. Aquí hay una pequeña modificación a la función 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; } 

Yo solo hice esto yo mismo. Se sentía un poco como un truco, ¡pero funciona!

  1. Creó un nuevo “navButtonAdd” y para el “título”, agregó código html para un menú desplegable.
  2. La función onclickButton no contiene nada.
  3. Luego creé una función onchange para manejar la recarga de la grilla cuando se modificó su valor.

      $('#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"); }; 

    ¡Espero que esto ayude!

categoría es el nombre de columna.

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