Как реализовать поиск на jqgrid?

Итак, у меня есть базовый пример работы jqgrid в ASP.NET MVC, javascript выглядит так:

    $(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'
        });

Теперь я пытаюсь реализовать кнопку поиска, которую они имеют в примерах jqgrid (нажмите Manipulating/Grid Data). Но я не понимаю, как они это реализуют. Я ожидаю, например. "поиск: истина" и метод его реализации.

Кто-нибудь реализовал поиск по jqgrid или знал примеры, которые явно показывают, как это сделать?

Ответ 1

Недавно я реализовал это сам (вчера на самом деле) в первый раз. Самое большое препятствие для меня заключалось в том, как написать функцию контроллера. Подпись функции - это то, что заняло у меня самое длинное значение (обратите внимание на параметры _search, searchField, searchOper и searchString, поскольку они отсутствуют в большинстве примеров asp.net mvc, которые я видел). Сообщения javascript для контроллера как для начальной загрузки, так и для поискового вызова. Вы увидите в коде, который я проверяю, является ли параметр _search истинным или нет.

Ниже приведен контроллер и код javascript. Приносим извинения за любые проблемы с форматированием, так как это моя первая публикация.

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

И вот мой 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"});

Ответ 2

См. мою статью о codeproject, в которой объясняется, как мы можем выполнять множественный поиск в jqgrid:

Использование панели инструментов поиска jqGrids с несколькими фильтрами в ASP.NET MVC

Я использую IModelBinder для привязки настроек сетки, деревьев выражений для сортировки и фильтрации данных.

Ответ 3

Если вам все еще интересно узнать о дополнительных параметрах, просто объявите их как nullables, добавив ? после имени типа.

Теперь вы сможете сравнить их с null, чтобы проверить, отсутствуют ли они.

Обратите внимание, что вам не нужно делать это со строками, поскольку они уже обнуляются.

Ответ 4

@Alan - хорошо, я использовал ваш метод и расширил свой веб-сервис, чтобы ожидать этих дополнительных трех параметров и проверить, что "_search" - true/false. Но, чтобы сделать эту работу, мне пришлось добавить это к моему вызову ajax в JavaScript:

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

Ответ 5

Просто следуйте эту ссылку. Он объясняет все реализации...

Вы можете создать кнопку searchBtn и можете вызвать форму поиска при нажатии

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