在 jqGrid 中加载时触发客户端过滤

Question

我正在尝试让 JqGrid 在它完成数据加载后进行一些客户端过滤（和排序）。我可以正确设置搜索字段，但调用 TriggerToolbar() 似乎没有任何效果。

$("#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
        }

一般的想法是固定值将由视图模型中的某些内容填充。

当我们执行 gridUnload() 和后续重新加载时，我们还希望有保存和恢复过滤器和排序选择的选项，但一次只有一个障碍。 @Url.Action 等带有@prefixes 的东西是Razor 标记，在页面发送到浏览器之前处理。

Answer 1

您将datatype: 'json' 与loadonce: true 结合使用。所以你应该在loadComplete 事件句柄内调用mygrid[0].triggerToolbar()。只有在加载数据后，您才应该过滤数据。可能您应该将带有triggerToolbar 的代码放在setTimeout 方法中，以便在datatype 在loadonce: true 期间更改为'local' 之后已经开始过滤。所以你的loadComplete 事件句柄的代码可能如下：

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 方法。

更新： jqGrid 的Free jqGrid fork 支持forceClientSorting: true 选项，它强制排序和可选过滤从服务器返回的数据，之前 显示第一页数据。它使上述代码不需要。而不是那个可以设置postData.filters使用

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

见the demo。