search - multiselect - JqGrid Buscar con múltiples cuadros de texto para el campo

jqgrid search example

Question

Me pregunto si es posible con la búsqueda avanzada de JqGrid mostrar múltiples cuadros de texto para algunos de los campos en los que quiero buscar. Por ejemplo, si tengo un campo ''Número de teléfono'', quiero poder visualizar 2 cuadros, uno para el código de área y el otro para el resto del número de teléfono. Luego, después de presionar ''Encontrar'', quiero poder obtener los dos valores y fusionarlos o hacer otra cosa.

Cualquier ayuda sería apreciada,

Gracias,

fromano2802

Answer 1

Tienes una pregunta interesante, pero te sugiero que hagas una entrada del número de teléfono más agradable y fácil de usar. Hay un buen complemento jQuery "Entrada enmascarada". Le permite mostrar una máscara dentro de un campo de entrada, algo así como "( _) _ -____" y permitir solo la entrada de números. Para ver la vida a lo que me refiero, abra la página http://digitalbush.com/projects/masked-input-plugin/#demo , establezca el foco en el campo Teléfono e intente escribir algo. ¿No es lindo?

Para hacer esto dentro del diálogo de búsqueda avanzada de JqGrid debes hacer lo siguiente

1. Descargue jquery.maskedinput-1.2.2.js o / y jquery.maskedinput-1.2.2.min.j s desde http://digitalbush.com/projects/masked-input-plugin/ .
2. Inserta uno de estos archivos JavaScript en tu página web.

3. Agregue a la definición de su columna ''Número de teléfono'' en colModel searchoptions bloque como sigue

   {name: ''PhoneNumber'', width: 83, index: ''PhoneNumber'', alinear: ''center'', searchoptions: {dataInit: function (elem) {$ (elem) .mask ("[phone]"); }}}

Es todo. Ahora solo abra "Diálogo de búsqueda avanzada", elija el campo "Número de teléfono" y establezca el foco en el campo de entrada. La función dataInit describe en la documentación de jqGrid en http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita y en http://www.trirand.com/jqgridwiki/doku. php? id = wiki: reglas_comunes & s [] = datainit .

Por cierto, puede recibir la misma entrada enmascarada durante la edición de datos (edición de formulario y edición en línea). Simplemente defina la misma función de editoption como searchoption s:

{ name: ''PhoneNumber'', width: 83, index: ''PhoneNumber'', align: ''center'',
editoptions: {
dataInit: function (elem) {
$(elem).mask("[phone]");
}
},
searchoptions: {
dataInit: function (elem) {
$(elem).mask("[phone]");
}
}
}