如何在gridComplete之后过滤数据 - 客户端（jqGrid）答案

【问题标题】：How to filter data after gridComplete - client side (jqGrid)如何在gridComplete之后过滤数据 - 客户端（jqGrid）
【发布时间】：2019-03-24 01:52:31
【问题描述】：

我有定制的过滤器（不是 jqgrid 的过滤器栏），工作正常，但我想在重新加载网格中的数据后执行过滤。我知道 DoSearch 函数已执行，但我没有看到任何过滤结果。

这是网格（包含我的一些实验）：

function PopulateMainGrid() {
    $.jgrid.gridUnload('#list2');
    jQuery("#list2").jqGrid({
        url: 'service.aspx?method=yxc',
        datatype: "XML",
        colNames: [' ', 'id', 'CustomerID', 'Material name', 'Unit', 'Producer', 'Cat. Nr.', 'Supplier', 'Order', 'Project', 'Ordered', 'OrderHeadID', 'Material type', 'Amount', 'Received', 'Remaining', 'state'],
        colModel: [
            { name: ' ', index: ' ', hidden: true },
            { name: 'id', index: 'id', hidden: true },
            { name: 'CustomerID', index: 'CustomerID', hidden: true },
            { name: 'MaterialName', index: 'MaterialName', width: 300 }

            ...
            ...
            ...

        ],
        rowNum: 25, rowList: [10, 25, 50, 100, 200],
        pager: '#pager2',
        height: 580,
        width: 1100,
        ignoreCase: true,
        loadonce: true,
        viewrecords: true,
        ondblClickRow: function (id) { OpenCard(id); },
        //gridComplete: function (data) { setTimeout(DoSearch(), 2000);  }
        postData: function () { DoSearch(); }
    });

这是执行过滤的函数：

function DoSearch() {

    var grid = $("#list2");
    var filter = {
        "groupOp": "AND", "rules":
            [
                { "field": "Unit", "op": "cn", "data": $("#cmbsUnits  option:selected").text() },
                { "field": "ProducerName", "op": "cn", "data": $("#cmbsProducers  option:selected").text() },

                 ...
                 ...
                 ...

            ]
    };
    grid.jqGrid('setGridParam', { search: true, postData: { filters: filter } });
    grid.trigger("reloadGrid", [{ page: 1 }]);
}

XML 作为响应：

<?xml version="1.0" encoding="UTF-8"?>
<rows>
   <page>1</page>
   <total>1</total>
   <records>7</records>
   <row id="">
      <cell />
      <cell />
      <cell><![CDATA[35]]></cell>
      <cell />
      <cell />
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[1-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-09-18 10:13:45]]></cell>
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[0]]></cell>
      <cell />
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="">
      <cell />
      <cell />
      <cell><![CDATA[35]]></cell>
      <cell />
      <cell />
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[2-10-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-02 15:23:14]]></cell>
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[0]]></cell>
      <cell />
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="">
      <cell />
      <cell />
      <cell><![CDATA[35]]></cell>
      <cell />
      <cell />
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[1-10-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-02 15:26:37]]></cell>
      <cell />
      <cell />
      <cell />
      <cell><![CDATA[0]]></cell>
      <cell />
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="86">
      <cell />
      <cell><![CDATA[86]]></cell>
      <cell><![CDATA[35]]></cell>
      <cell><![CDATA[test1]]></cell>
      <cell><![CDATA[unit 1]]></cell>
      <cell><![CDATA[prod 1]]></cell>
      <cell><![CDATA[111]]></cell>
      <cell><![CDATA[sup 1]]></cell>
      <cell><![CDATA[3-10-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-19 08:33:33]]></cell>
      <cell><![CDATA[67]]></cell>
      <cell><![CDATA[Custom item]]></cell>
      <cell><![CDATA[33]]></cell>
      <cell><![CDATA[9]]></cell>
      <cell><![CDATA[24]]></cell>
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="84">
      <cell />
      <cell><![CDATA[84]]></cell>
      <cell><![CDATA[35]]></cell>
      <cell><![CDATA[test 2]]></cell>
      <cell><![CDATA[unit 1]]></cell>
      <cell><![CDATA[prod 2]]></cell>
      <cell><![CDATA[222]]></cell>
      <cell><![CDATA[sup 1]]></cell>
      <cell><![CDATA[4-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-19 10:30:50]]></cell>
      <cell><![CDATA[64]]></cell>
      <cell><![CDATA[Custom item]]></cell>
      <cell><![CDATA[33]]></cell>
      <cell><![CDATA[0]]></cell>
      <cell><![CDATA[33]]></cell>
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="85">
      <cell />
      <cell><![CDATA[85]]></cell>
      <cell><![CDATA[35]]></cell>
      <cell><![CDATA[test1]]></cell>
      <cell><![CDATA[unit 1]]></cell>
      <cell><![CDATA[prod 1]]></cell>
      <cell><![CDATA[111]]></cell>
      <cell><![CDATA[sup 1]]></cell>
      <cell><![CDATA[4-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-19 10:30:50]]></cell>
      <cell><![CDATA[64]]></cell>
      <cell><![CDATA[Custom item]]></cell>
      <cell><![CDATA[12]]></cell>
      <cell><![CDATA[0]]></cell>
      <cell><![CDATA[12]]></cell>
      <cell><![CDATA[4]]></cell>
   </row>
   <row id="87">
      <cell />
      <cell><![CDATA[87]]></cell>
      <cell><![CDATA[35]]></cell>
      <cell><![CDATA[test 2]]></cell>
      <cell><![CDATA[unit 1]]></cell>
      <cell><![CDATA[prod 2]]></cell>
      <cell><![CDATA[222]]></cell>
      <cell><![CDATA[sup 1]]></cell>
      <cell><![CDATA[4-10-2018]]></cell>
      <cell><![CDATA[aa]]></cell>
      <cell><![CDATA[2018-10-19 10:31:59]]></cell>
      <cell><![CDATA[68]]></cell>
      <cell><![CDATA[Custom item]]></cell>
      <cell><![CDATA[22]]></cell>
      <cell><![CDATA[0]]></cell>
      <cell><![CDATA[22]]></cell>
      <cell><![CDATA[4]]></cell>
   </row>
</rows>

我想在刷新后网格上的所有内容完成后执行过滤。 DoSearch 函数被触发，但我没有看到任何效果。

欢迎提出任何想法。

编辑：

jqGrid 5.1.1

【问题讨论】：

正确的方法是在 gridComplete 事件中使用它 - 只需取消注释该行。以这种方式将函数放在 postData 中是错误的。我强烈建议您检查您的服务器端代码 - 搜索是否真的在您的服务器上工作
@TonyTomov 这就是问题所在，执行了 gridComplete 函数但未过滤行。一切都应该在客户端完成。
抱歉错过了加载参数。在 colModel 索引和名称中不能有空值，因为你有这样一个。您能否发布一些测试 xml 响应和完整的 colModel 或者在 jsfiddle 中准备示例？顺便问一下使用的是哪个版本的jqGrid？
@TonyTomov 我已经更新了版本和 xml 响应，但我必须强调，如果 DoSearch 由用户触发，它可以完美运行。问题是在网格加载后动态过滤。
@dllhell：您目前使用的是商业版"Guriddo jqGrid JS"。 jqGrid 的替代分支 - "free jqGrid" 具有您需要的功能。只需将forceClientSorting: true 选项添加到loadonce: true 和search: true、postData: { filters: filter }。作为结果 free jqGrid 将对从服务器返回的数据进行过滤和排序，并显示结果的第一页。不需要使用reloadGrid 重新加载网格。

标签： javascript jquery ajax jqgrid

【解决方案1】：

我已经测试了您的代码，如果发生 gridComplete 事件，这会导致您在触发网格后进入无限循环。为了正确执行，需要在某处设置全局标志，并且当网格完成执行时设置此标志，以便不执行 DoSearch 函数。这是一个工作代码：

$(document).ready(function () {
    var dynamic = false;
    $("#jqGrid").jqGrid({
    ...
    gridComplete: function (data) { 
        setTimeout(function() {
            if( !dynamic) { 
                DoSearch();
            }
        }, 1000);
    },
    ....
});

function DoSearch() {
    var grid = $("#jqGrid");
    var filter = {
        "groupOp": "AND", "rules":
            [
                { "field": "name", "op": "eq", "data": 'Client 1' },
                { "field": "tax", "op": "gt", "data": '200' }
            ]
    };
    grid.jqGrid('setGridParam', { search: true, postData: { filters: filter } });
    grid.trigger("reloadGrid");
    dynamic = true;
}

如果将来进行动态搜索，您只需将此变量设置为 false。

这里是demo example

【讨论】：