2011-01-21 11 views
7

Tengo una página ASP.NET MVC 3. En él, tengo una tabla que convierto en un jqGrid usando datos JSON de una llamada ajax. La grilla tiene la siguiente configuración:filtro jqGrid o buscar por fecha no funciona del lado del cliente

myGrid = $('#myGrid'); 
myGrid.jqGrid({ 
    caption: 'My Grid', 
    datatype: 'local', 
    data: data.rows, 
    height: 250, 
    pager: '#myPager', 
    viewrecords: true, 
    colModel: [ 
     ..., 
     { 
      label: 'blah', 
      name: 'blah', 
      align: 'left', 
      sortable: true, 
      editable: false, 
      width: 85, 
      formatter: 'date', 
      sorttype: 'date', 
      datefmt: 'm/d/Y', 
      formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } 
     }, 
     ... 
    ] 
}); 

// turn on filter toolbar 
myGrid.filterToolbar(); 

data.rows se devuelve desde la llamada ajax. Esto funciona en todos los sentidos excepto en uno. Puedo paginar el lado del cliente, clasificar el lado del cliente y buscar en cada campo, excepto en el que muestro colModel. Este campo 'blah' es un campo de fecha y muestra las fechas correctamente, en formato mm/dd/aaaa. Sin embargo, cuando escribo algo como el 17/11/2010 en la barra de herramientas y presiono enter, la búsqueda devuelve 0 registros.

Así que cavó profundamente en el código jqGrid, y aquí es lo que se genera antes de que se busca:

{"groupOp":"AND","rules":[{"field":"blah","op":"bw","data":"11/17/2010"}]} 

Finalmente, cuando pasa a través de cada fila y se evalúa la operación en el campo, la función eval (m) & & p.push (este) de la línea, m es la siguiente:

(String(this.blah).substr(0,10) == String("11/17/2010")) 

Básicamente, me parece que no está reconociendo que el campo es una fecha. Llama a parse en lugar de parseDate. ¿Alguien tiene alguna idea de cómo solucionar esto? Sé que buscar en el lado del servidor es fácil, puedo pasar esa cadena, analizarla y bam. Pero me gustaría quedarme del lado del cliente si puedo. Pude duplicar esto en algunas de las muestras que Oleg y Tom pusieron, así que es un problema o me falta algo en la configuración ...

+0

Por cierto, jqGrid puede hacer una llamada AJAX, por lo que no será necesario el uso de 'data.rows'. Vea algunos enlaces de http://stackoverflow.com/questions/2835957/jquery-with-asp-net-mvc-calling-ajax- habilitado-servicio-web/2836817#2836817, http://stackoverflow.com/questions/ 4169384/how-can-i-bind-my-view-model-to-a-jqgrid/4169848 # 4169848 y http://www.trirand.com/blog/?page_id = 393/feature-request/rest-support/# p21762. Puedo continuar con los enlaces ... – Oleg

+0

En realidad, tuve que envolver la creación de la cuadrícula dentro de mi llamada ajax. El motivo es que tengo que llamar a GridUnload() porque estoy actualizando dinámicamente mi filtro desplegable en la barra de herramientas de filtro. Miré a través de la documentación y no pude encontrar algo como trigger ('reloadToolbar'). – Milimetric

Respuesta

3

Me resulta interesante su pregunta, así que +1 de mí a tu pregunta. Debido a que usted fijó la línea

(String(this.blah).substr(0,10) == String("11/17/2010")) 

utilizado en eval durante la búsqueda local, supongo que gasta mucho tiempo para entender cómo se implementa la búsqueda local. Como ve que la línea anterior (consulte (String(this.blah).substr(0,10) ...) no es lo que debe hacerse (el valor de String(this.blah) será "2010-11-17" en lugar de "17/11/2010"), puede sobrescribir la función correspondiente de jqGrid (la función _getStr dentro de $.jgrid.from) y soluciona el problema en el camino.

Hace un tiempo pasé mucho tiempo preparando el correspondiente the demo, que demuestra esta técnica. La demostración se preparó como the answer in trirand forum. En la pregunta uno quería encontrar cadenas como 'bénevise' en caso de buscar 'benevise'. Entonces uno tiene que implementar una búsqueda local realmente personalizada. Espero que la información sea suficiente para que resuelvas el problema que describes.

ACTUALIZADO: Me parece que he encontrado una solución mucho más simple. Solo debe definir searchoptions: {sopt: ['eq','ne']} para la columna 'blah' que contiene los datos. Entonces "bw" (comenzar con) no se usará para la columna. Las operaciones "igual a" y "diferente de" funcionan correctamente en la búsqueda local.

Actualizado hace 2: Here es el ejemplo de trabajo donde uso sopt opción.

+0

Ok, trabajé con el ejemplo y funciona si cambio mis datos de origen. Noté que los datos que estás usando tienen fechas definidas como "2007-09-01". Mis datos tenían: nueva Fecha ("2007-09-01"). El motivo es que mis datos de origen proceden de ASP.NET MVC y tuve que anular JSON.parse para interpretar correctamente el formato de fecha de Microsoft:/^ \/Date \\ ((\ d +) \\) \/$/ Entonces eso no es un problema con la grilla, pero sería bueno poder pasar objetos Date. Creo que el único cambio necesario es en la función parseDate, agregue: if (Object.prototype.toString.call (e) === '[object Date]') {return e; } Gracias Oleg! – Milimetric

Cuestiones relacionadas