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

Question

Así Tengo ejemplo básico de jqGrid trabajar en ASP.NET MVC, el código JavaScript se parece a esto:

$(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 poner en práctica el botón de búsqueda que tienen en la jqgrid examples (clic en la manipulación/Grid Data). Pero no veo cómo lo implementan. Estoy esperando, por ejemplo, una "búsqueda: verdadera" y un método para implementarla.

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

Answer 1

recientemente he implementado esto 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 mvc de asp.net que he visto). El javascript se envía al controlador tanto para la carga inicial como para la búsqueda. Verás en el código que estoy verificando si el parámetro _search es verdadero o no.

A continuación se muestra el controlador y el código de 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í es 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

Solo tiene que seguir this link. Tiene todas las implementaciones explican ...

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

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

Answer 3

@Alan - bien, he utilizado el método y prolongado mi servicio web a esperar esos tres parámetros adicionales y comprobar si hay "_search" es verdad/falso. Pero, con el fin de hacer este trabajo, he tenido que añadir esto a mi llamada AJAX en el código JavaScript:

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

Answer 4

En caso de que todavía se está preguntando sobre cómo tratar con los parámetros opcionales, simplemente declaran como nullables mediante la adición de una ? después del nombre del tipo.

Ahora podrá compararlos con null para comprobar si se encuentran ausentes.

Tenga en cuenta que no necesita hacer esto con cadenas, ya que son anulables.

Answer 5

ver mi artículo sobre CodeProject, que explica cómo podemos hacer la búsqueda múltiple en jqGrid:

Using jqGrid’s search toolbar with multiple filters in ASP.NET MVC

utilizo IModelBinder para la configuración de la red de enlace, los árboles de expresión para los datos de filtrado y clasificación.