asp.net mvc - example - ¿Cómo implementar la búsqueda en jqgrid?

jqgrid mvc c# example

Question

Así que tengo un ejemplo básico de que jqgrid funciona 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 Manipular / Datos de cuadrícula). 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 sabe de ejemplos que muestran explícitamente cómo hacerlo?

Answer 1

En caso de que todavía se esté preguntando sobre el manejo de parámetros opcionales, simplemente declare como nulables agregando un ? después del nombre del tipo.

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

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

Answer 2

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

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

Utilizo IModelBinder para el enlace de configuración de cuadrícula, árboles de expresión para clasificar y filtrar datos.

Answer 3

@Alan - vale, utilicé su método y extendí mi servicio web para esperar esos tres parámetros adicionales y verificar que "_search" sea verdadero / falso. Pero, para hacer que esto funcione, tuve que agregar esto a mi llamada ajax en JavaScript:

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

Answer 4

Recientemente lo implementé 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 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í 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 5

Solo sigue 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}
)});