在jqGrid的加载时触发客户端过滤 [英] triggering client-side filtering at load time in a jqGrid

问题描述

我正试图让JqGrid在完成数据加载后立即进行一些客户端筛选(和排序).我可以正确设置搜索字段，但是调用TriggerToolbar()似乎没有任何效果.

I'm trying to get a JqGrid to do some client-side filtering (and sorting) just after it has finished loading in the data. I can set the search-field correctly, but calling TriggerToolbar() doesn't seem to have any effect.

$("#list").GridUnload();
        var mygrid = $("#list").jqGrid({
            url: '@Url.Action("GetSearchCriteriaWithNoComponents", "SearchCriteria")',
            postData: { BookingSiteId: function () { return $("#BookingSiteId option:selected").val(); }, MethodId: function () { return $("#MethodId option:selected").val(); } },
            datatype: 'json',
            mtype: 'Post',
            colNames: ['Id', 'PID', 'Ori', 'Dest', 'Conn', 'Pos', 'Method', 'Billing', 'Filter', 'Pattern', 'Class', 'Wildcard', 'Components', 'Comment'],
            colModel: [
          { name: 'Id', index: 'Id', width: 30, hidden: true },
          { name: 'PID', index: 'PID', width: 35 },
          { name: 'Ori', index: 'Ori', width: 35 },
          { name: 'Dest', index: 'Dest', width: 35 },
          { name: 'Conn', index: 'Conn', width: 35 },
          { name: 'Pos', index: 'Pos', width: 35 },
          { name: 'Method', index: 'Method', width: 50 },
          { name: 'Billing', index: 'Billing', width: 45, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Filter', index: 'Filter', width: 90, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Pattern', index: 'Pattern', width: 100, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Class', index: 'Class', width: 40 },
          { name: 'Wildcard', index: 'Wildcard', width: 50 },
          { name: 'Components', index: 'Components', width: 80, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Comment', index: 'Comment', width: 75, search: true, stype: 'text', searchoptions: { sopt: ['cn']} }
          ],
            pager: '#pager',
            rowNum: 25,
            rowTotal: 1000,
            rowList: [25, 50, 100],
            sortname: 'Origin',
            sortorder: "asc",
            viewrecords: true,
            loadonce: true,
            multiselect: true,
            ignoreCase: true,
            gridview: true,
            height: "100%",
            caption: 'Subscribed Search Criteria without Components'
        }).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false }
         ).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-search", onClickButton: function () { mygrid[0].toggleToolbar() }, position: "first", title: "Toggle Search Toolbar", cursor: "pointer" })
          .jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-refresh", onClickButton: function () { mygrid[0].clearToolbar() }, title: "Clear Search Toolbar", cursor: "pointer" }
        );

        $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

        if(firstrun = true)
        {
            $("#gs_PID").val('AA');
            mygrid[0].triggerToolbar();
            firstrun = false;
        }
        else
        {
            mygrid[0].toggleToolbar(); //hide the toolbar by default
        }

通常的想法是，将使用视图模型中的内容填充固定值.

The general idea is that the fixed value will be populated with something from the viewmodel.

当我们执行gridUnload()和随后的重载时，我们还可以选择保存和恢复过滤器以及排序选择，但是一次只能有一个障碍. 带有@前缀(例如@ Url.Action)的内容是Razor标记，在页面发送到浏览器之前进行处理.

We would also like to have the option of saving and restoring filter and sorting selection for when we do gridUnload() and subsequent reloads, but one hurdle at a time. stuff with @prefixes such as @Url.Action is Razor markup, which is handled before the page is sent to the browser.

推荐答案

您将datatype: 'json'与loadonce: true结合使用.因此，您应该在loadComplete事件句柄内部调用mygrid[0].triggerToolbar().仅在加载数据之后，才应过滤数据.在loadonce: true期间datatype更改为'local'之后，可能应该在setTimeout方法内放置triggerToolbar的代码以开始过滤.因此，loadComplete事件句柄的代码可能与以下内容有关:

You use datatype: 'json' in combination with loadonce: true. So you should call mygrid[0].triggerToolbar() inside of the loadComplete event handle. Only after the data are loaded you should filter the data. Probably you should place the code with triggerToolbar inside of setTimeout method to start the filtering already after the datatype will be changed to 'local' during loadonce: true. So the code of your loadComplete event handle could be about the following:

loadComplete: function () {
    var gridDOM = this; // save $("#list")[0] in a variable
    if ($(this).jqGrid('getGridParam', 'datatype') === 'json') {
        // the first load from the server
        setTimeout(function () {
            $("#gs_PID").val('AA');
            gridDOM.triggerToolbar();
        }, 100);
    }
}

此外，我不完全了解您如何使用发布的代码片段以及为什么需要使用gridUnload方法.

Additionally I don't full understand how you use the code fragment which you posted and why you need to use gridUnload method.

更新: jqGrid的免费jqGrid 分支支持forceClientSorting: true选项，它强制排序和可选的数据过滤，是从服务器返回的，显示在 前.它使不需要上面的代码.除此以外，还可以设置postData.filters使用

UPDATED: Free jqGrid fork of jqGrid supports forceClientSorting: true option, which force sorting and optional filtering of the data, returned from the server, before displaying the first page of data. It makes unneeded the above code. Instead of that one can set postData.filters use

forceClientSorting: true,
search: true,
postData: {
    filters: {
        groupOp: "AND",
        rules: [
            { op: "le", field: "PID", data: "AA" }
        ]
    }
}

请参见演示.

这篇关于在jqGrid的加载时触发客户端过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！