tonytomov style for example bootstrap jqgrid free-jqgrid

style - Filtrar las columnas de fecha y hora de jqGrid usando el selector de fecha justo en la fecha



jqgrid style bootstrap (2)

Actualmente tengo un problema donde tengo columnas de fecha y hora en una grilla que están formateadas para mostrar solo la parte de la fecha del campo. Por lo tanto, los datos brutos se ven como "2015-04-15T15: 31: 49.357" y la columna de la cuadrícula parece "15/04/2015".

Estoy usando un marcador de fecha para admitir el filtrado de columnas y me gustaría poder usar el operador "eq" para filtrar usando "iguales" pero solo en la parte de la fecha. Actualmente no obtengo ninguna coincidencia porque el tiempo se interpone en el camino.

¿Es posible evitar esto? Sé que puedo manipular los datos brutos para quitar la porción de tiempo de la fecha, pero preferiría mantener esa información en los datos brutos ya que también apoyo la exportación para sobresalir y el tiempo puede ser necesario.

Mis opciones actuales para la columna son:

formatter = "date"; formatoptions = {srcformat: "Y-m-d", newformat: "n/j/Y"};

He intentado varias opciones, pero hasta ahora no he tenido suerte.

También estoy usando el tenedor free-jqgrid.


Introduje la función de filtrado personalizado en jqGrid gratuito para permitir implementaciones sencillas en escenarios como el de los jóvenes. La respuesta proporciona un ejemplo de tal implementación.

En su caso, se puede definir una nueva operación de comparación de Date only "equal" con el nombre abreviado "deq" por ejemplo, y la operación de comparación Date only "not equal" bajo el nombre abreviado dne . El código de la opción customSortOperations podría ser el siguiente:

customSortOperations: { deq: { operand: "==", text: "Date only /"equal/"", filter: function (options) { var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol], newformat = cm.formatoptions != null && cm.formatoptions.newformat ? cm.formatoptions.newformat : $(this).jqGrid("getGridRes", "formatter.date.newformat"), srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ? cm.formatoptions.srcformat : $(this).jqGrid("getGridRes", "formatter.date.srcformat"), fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]), searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue); return fieldData.getFullYear() === searchValue.getFullYear() && fieldData.getMonth() === searchValue.getMonth() && fieldData.getDate() === searchValue.getDate(); } }, dne: { operand: "!=", text: "Date only /"not equal/"", filter: function (options) { var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol], newformat = cm.formatoptions != null && cm.formatoptions.newformat ? cm.formatoptions.newformat : $(this).jqGrid("getGridRes", "formatter.date.newformat"), srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ? cm.formatoptions.srcformat : $(this).jqGrid("getGridRes", "formatter.date.srcformat"), fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]), searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue); return fieldData.getFullYear() !== searchValue.getFullYear() || fieldData.getMonth() !== searchValue.getMonth() || fieldData.getDate() !== searchValue.getDate(); } } }

Para poder utilizar las nuevas "deq" y "dne" , debe incluirlas en el sopt de las searchoptions de searchoptions de la columna con la fecha.

La demostración usa el código anterior. Los datos de entrada contienen 3 fechas: "2015-04-15T15:31:49.357" , "2015-04-15T21:15:40.123" , "2015-04-15" :

var mydata = [ { id: "10", invdate: "2015-04-15T15:31:49.357", name: "test1",... }, { id: "20", invdate: "2015-04-15T21:15:40.123", name: "test2",... }, { id: "30", invdate: "2015-04-15", name: "test3", ...}, ... ]

El filtro antes del 15-Apr-2015 muestra las tres filas:

Otra demostración usa prácticamente el mismo código, pero muestra la fecha en formato de fecha / hora completa. Sin embargo, el filtrado funciona. Tenga cuidado, use las últimas fuentes libres de jqGrid de GitHub en la demostración. Realmente es necesario porque hice algunos pequeños cambios en el código de parseDate para que la demostración funcione.


Respuesta de OlegKi en github: https://github.com/free-jqgrid/jqGrid/issues/50

Introduje la función de filtrado personalizado en jqGrid gratuito para permitir implementaciones sencillas en escenarios como el de los jóvenes. La respuesta proporciona un ejemplo de tal implementación.

En su caso, se puede definir una nueva operación de comparación de fecha solamente "igual /" bajo el nombre abreviado "deq", por ejemplo, y la operación de comparación Fecha solo "no igual" bajo el nombre abreviado dne. El código de la opción customSortOperations podría ser el siguiente:

customSortOperations: { deq: { operand: "==", text: "Date only /"equal/"", filter: function (options) { var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol], newformat = cm.formatoptions != null && cm.formatoptions.newformat ? cm.formatoptions.newformat : $(this).jqGrid("getGridRes", "formatter.date.newformat"), srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ? cm.formatoptions.srcformat : $(this).jqGrid("getGridRes", "formatter.date.srcformat"), fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]), searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue); return fieldData.getFullYear() === searchValue.getFullYear() && fieldData.getMonth() === searchValue.getMonth() && fieldData.getDate() === searchValue.getDate(); } }, dne: { operand: "!=", text: "Date only /"not equal/"", filter: function (options) { var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol], newformat = cm.formatoptions != null && cm.formatoptions.newformat ? cm.formatoptions.newformat : $(this).jqGrid("getGridRes", "formatter.date.newformat"), srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ? cm.formatoptions.srcformat : $(this).jqGrid("getGridRes", "formatter.date.srcformat"), fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]), searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue); return fieldData.getFullYear() !== searchValue.getFullYear() || fieldData.getMonth() !== searchValue.getMonth() || fieldData.getDate() !== searchValue.getDate(); } }

} Para poder usar la nueva operación "deq" y "dne" debe incluir allí en el lugar de las opciones de búsqueda de la columna con la fecha.

La demostración usa el código anterior. Los datos de entrada contienen 3 fechas: "2015-04-15T15: 31: 49.357", "2015-04-15T21: 15: 40.123", "2015-04-15". El filtro antes del 15 de abril de 2015 muestra las tres filas.

Otra demostración usa prácticamente el mismo código, pero muestra la fecha en formato de fecha / hora completa. Sin embargo, el filtrado funciona. Tenga cuidado, use las últimas fuentes libres de jqGrid de GitHub en la demostración. Realmente es necesario porque hice algunos pequeños cambios en el código de parseDate para que la demostración funcione.