如何实现对搜索的jqGrid？ [英] How to implement search on jqgrid?

问题描述

所以我得在jqGrid的ASP.NET MVC工作基本的例子中，JavaScript是这样的：

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

    $(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的例子有搜索按钮（点击操纵/网格数据）。但我不明白他们是如何实现它。我期待例如一个搜索：真正的和一个方法来实现它。

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?

推荐答案

最近，我的第一次执行这个自己（其实昨天）。对我来说，最大的障碍就是如何写的控制器功能。函数签名是我花了最长找出（注意_search，searchField，searchOper和搜索字符串参数为那些缺少大部分的asp.net的MVC的例子我见过）。 JavaScript的职位，以控制器为初始加载和搜索呼叫。您将在code说我检查_search参数是否是真还是看不到。

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.

下面是控制器和JavaScript code。我对任何格式的问题表示歉意，因为这是我第一次张贴在这里。

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

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的：

And here is my 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"});

这篇关于如何实现对搜索的jqGrid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！