asp.net-mvc 如何在jqgrid上实现搜索？

How to implement search on jqgrid?

提问by Edward Tanguay

So I've got basic example of jqgrid working in ASP.NET MVC, the javascript looks like this:

所以我有 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'
        });

Now I am trying to implement the search button that they have in the jqgrid examples(click on Manipulating/Grid Data). But I don't see how they implement it. I'm expecting e.g. a "search:true" and a method to implement it.

现在我正在尝试实现他们在jqgrid 示例中的搜索按钮（单击操作/网格数据）。但我不明白他们是如何实施的。我期待例如“搜索：真”和实现它的方法。

Has anyone implemented search on jqgrid or know of examples that show explicitly how to do it?

有没有人在 jqgrid 上实现搜索或知道明确显示如何做到这一点的示例？

回答by Alan

I recently implemented this myself (yesterday actually) for the first time. The biggest hurdle for me was figuring out how to write the controller function. The function signature is what took me the longest to figure out (notice the _search, searchField, searchOper, and searchString parameters as those are missing from most of asp.net mvc examples I've seen). The javascript posts to the controller for both the initial load and for the search call. You'll see in the code that I'm checking whether the _search parameter is true or not.

我最近第一次自己实现了这个（实际上是昨天）。对我来说最大的障碍是弄清楚如何编写控制器函数。函数签名是我花了最长的时间才弄明白的（注意 _search、searchField、searchOper 和 searchString 参数，因为我见过的大多数 asp.net mvc 示例都缺少这些参数）。javascript 向控制器发送初始加载和搜索调用。您将在代码中看到我正在检查 _search 参数是否为真。

Below is the controller and the javascript code. My apologies for any formatting issues as this is my first time posting on here.

下面是控制器和 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);
}

And here is my HTML/Javascript:

这是我的 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"});

回答by Ilya Builuk

See my article on codeproject, which explains how we can do multiple search in jqgrid:

请参阅我关于 codeproject 的文章，其中解释了我们如何在 jqgrid 中进行多次搜索：

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

在 ASP.NET MVC 中使用带有多个过滤器的 jqGrid 搜索工具栏

I use IModelBinder for grid's settings binding, expression trees for sorting and filtering data.

我使用 IModelBinder 进行网格设置绑定，使用表达式树对数据进行排序和过滤。

回答by Daniel Earwicker

In case you're still wondering about dealing with optional parameters, just declare them as nullables by adding a ?after the type name.

如果您仍然想处理可选参数，只需通过?在类型名称后添加 a 将它们声明为可空对象。

Now you'll be able to compare them with nullto check if they are absent.

现在您可以将它们与它们进行比较null以检查它们是否不存在。

Note that you don't need to do this with strings, as they are already nullable.

请注意，您不需要对字符串执行此操作，因为它们已经可以为空。

回答by Briana Finney

@Alan - ok, I used your method and extended my webservice to expect those additional three parameters and check for "_search" is true/false. But, in order to make this work, I had to add this to my ajax call in the JavaScript:

@Alan - 好的，我使用了你的方法并扩展了我的网络服务以期待这三个额外的参数并检查“_search”是否为真/假。但是，为了完成这项工作，我必须在 JavaScript 中将其添加到我的 ajax 调用中：

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

回答by Briana Finney

Just follow this link. It has all implementations explained...

只需点击此链接。它解释了所有实现......

You can create a button searchBtnand can invoke search form on click

您可以创建一个按钮searchBtn并可以在单击时调用搜索表单

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