¿Cómo implementar la búsqueda en jqgrid?

Question

Así que tengo un ejemplo básico de jqgrid trabajando en ASP.NET MVC, el JavaScript se ve así:

    $(document).ready(function() {

        $("#list").jqGrid({
            url: '../../Home/Example',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Action', 'Parameters'],
            colModel: [
                   { name: 'id', index: 'id', width: 55, resizable: true },
                   { name: 'action', index: 'action', width: 90, resizable: true },
                   { name: 'paramters', index: 'parameters', width: 120, resizable: true}],
            pager: $('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            multikey: "ctrlKey",
            imgpath: '../../themes/basic/images',
            caption: 'Messages'
        });

Ahora estoy tratando de implementar el botón de búsqueda que tienen en los ejemplos de jqgrid (haga clic en Manipulación / Cuadrícula de datos). Pero no veo cómo lo implementan. Estoy esperando p. una " búsqueda: verdadero " y un método para implementarlo.

¿Alguien ha implementado la búsqueda en jqgrid o conoce ejemplos que muestren explícitamente cómo hacerlo?

Answer 1

Recientemente implementé esto yo mismo (ayer en realidad) por primera vez. El mayor obstáculo para mí fue descubrir cómo escribir la función del controlador. La firma de la función es lo que me llevó más tiempo descubrir (observe los parámetros _search, searchField, searchOper y searchString, ya que faltan en la mayoría de los ejemplos de asp.net mvc que he visto). El javascript publica en el controlador tanto para la carga inicial como para la llamada de búsqueda. Verá en el código que estoy comprobando si el parámetro _search es verdadero o no.

A continuación se muestra el controlador y el código javascript. Mis disculpas por cualquier problema de formato, ya que esta es la primera vez que publico aquí.

public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
    List<AppGroup> groups = service.GetAppGroups();
    List<AppGroup> results;
    if (_search)
       results = groups.Where(x => x.Name.Contains(searchString)).ToList();
    else
       results = groups.Skip(page * rows).Take(rows).ToList();

    int i = 1;

    var jsonData = new
    {
        total = groups.Count / 20,
        page = page,
        records = groups.Count,
        rows = (
            from appgroup in results
            select new
            {
                i = i++,
                cell = new string[] {
                         appgroup.Name,
                         appgroup.Description
                     }
            }).ToArray()
    };

    return Json(jsonData);
}

Y aquí está mi HTML / Javascript:

$(document).ready(function() {
  $("#listGroups").jqGrid({
    url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
    datatype: 'json',
    mtype: 'GET',
    caption: 'App Groups',
    colNames: ['Name', 'Description'],
    colModel: [
        { name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
        { name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
    ],
    loadtext: 'Loading Unix App Groups...',
    multiselect: true,
    pager: $("#pager"),
    rowNum: 10,
    rowList: [5,10,20,50],
    sortname: 'ID',
    sortorder: 'desc',
    viewrecords: true,
    imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});

Answer 2

Vea mi artículo sobre codeproject, que explica cómo podemos hacer búsquedas múltiples en jqgrid:

Usando la barra de herramientas de búsqueda de jqGrid con múltiples filtros en ASP. NET MVC

Uso IModelBinder para el enlace de configuración de la cuadrícula, árboles de expresión para ordenar y filtrar datos.

Answer 3

En caso de que todavía se pregunte si se trata de parámetros opcionales, simplemente declare como anulables agregando un ? después del nombre del tipo.

Ahora podrá compararlos con null para verificar si están ausentes.

Tenga en cuenta que no es necesario que haga esto con cadenas, ya que son anulables.

Answer 4

@Alan - ok, usé su método y extendí mi servicio web para esperar esos tres parámetros adicionales y verifiqué '' _search '' es verdadero / falso Pero, para que esto funcione, tuve que agregar esto a mi llamada ajax en JavaScript:

if (!postdata._search) {    
           jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});  
}

Answer 5

Simplemente siga este enlace . Tiene todas las implementaciones explicadas ...

Puede crear un botón searchBtn y puede invocar el formulario de búsqueda al hacer clic

$("#searchBtn").click(function(){
   jQuery("#list4").searchGrid(
   {options}
    )});