在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
        }

一般的想法是固定值将填充来自viewmodel的东西.

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

Answer 1

你datatype: 'json'结合使用loadonce: true.所以,你应该叫mygrid[0].triggerToolbar()的内部loadComplete事件句柄.只有在加载数据后,您才应过滤数据.可能你应该将代码triggerToolbar置于setTimeout方法内部,以便在datatype将更改为'local'期间之后启动过滤loadonce: true.所以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的免费jqGrid fork支持forceClientSorting: true选项,该选项在显示第一页数据之前强制对服务器返回的数据进行排序和可选过滤.它不需要上面的代码.而不是那个可以设置使用postData.filters

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

看看演示.