在gridComplete之后如何过滤数据-客户端(jqGrid)

时间:2018-10-19 07:40:44

标签: javascript jquery ajax jqgrid

我有定制的过滤器(不是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

1 个答案:

答案 0 :(得分:0)

我已经测试了您的代码,并且在触发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