如何在jqgrid上实现搜索?

29

我在ASP.NET MVC中有一个jqgrid的基本示例,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)。但我不知道它们是如何实现的。我期望例如一个“search:true”和一个实现它的方法。

是否有人在jqgrid上实现了搜索,或者知道展示如何执行此操作的示例?

5个回答

40

我最近第一次实现了这个功能(昨天实际上)。对我来说最大的障碍是弄清楚如何编写控制器函数。函数签名是我最难弄清楚的部分(请注意_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"});

使用更明确的服务方法替换List<AppGroup> groups = service.GetAppGroups();(此方法在每个查询中选择所有DB元素):) - SDReyes
1
谢谢你的回答,我在整个互联网上寻找该方法的签名。干得好,再次感谢。 - lidermin

19

@Veleslav:这是我最喜欢的jqGrid实现方式:)在.Net中。恭喜+1 - SDReyes
另一种解决方案(不需要表达式树):http://codefucius.blogspot.co.uk/2012/11/implementing-jqgrid-search.html - jimasp

2

如果你仍然纠结于如何处理可选参数,只需在类型名称后面添加?将它们声明为可空参数。

现在,你可以使用null来比较它们以检查是否缺失。

请注意,对于字符串,你不需要这样做,因为它们已经是可空的。


-1

@Alan - 好的,我使用了你的方法并扩展了我的 Web 服务以期望这三个额外的参数,并检查 "_search" 是 true 还是 false。但是,为了使其工作,我不得不将此添加到我的 JavaScript 中的 ajax 调用中:

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

-1

只需跟随此链接。它解释了所有的实现...

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

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

14
虽然我不喜欢,但我理解为什么人们用“ass”缩写“assignment”。但将“button”缩写为“butt”超出了我的理解范围。我的意思是,只需要再加两个字母就可以避免看起来像屁股的情况。 - Yaser Sulaiman
1
哈哈,我要把这个读给我的同事听,他总是把“assignment”缩写成“ass” :). 点赞鼓励士气。 - Yonatan Karni

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接