jqGrid - 以编程方式过滤数据

时间:2016-05-10 12:39:28

标签: jquery jqgrid

我对jqGrid有些疑问。我希望将我的数据过滤到jqGrid,并希望显示唯一的记录取决于id值...

我想显示id值介于1-3050-8040-60之间的唯一记录。

所以我调用了我创建的on函数,并传递了id的值,该函数将filter数据并显示过滤后的数据。

如果我通过0则表示它将显示1-30的记录。

我的编码如下......

var jsonData = {
                "page": 1,
                "records": 100,
                "rows": [
                    { id: "1",...},
                    { id: "3",...},
                    { id: "4",...},
                    { id: "5",...},
                    { id: "6",...},
                    { id: "7",...},
                    { id: "8",...},
                    { id: "13",...},
                    { id: "14",...},
                    { id: "15",...},
                    { id: "16",...},
                    { id: "17",...},
                    { id: "18",...},
                    { id: "19",...},
                    { id: "20",...},
                    { id: "21",...},
                    { id: "22",...},
                    { id: "23",...},
                    { id: "24",...},
                    { id: "25",...},
                    { id: "26",...},
                    { id: "27",...},
                    { id: "28",...},
                    { id: "29",...},
                    { id: "30",...},
                    { id: "31",...},
                    { id: "32",...},
                    { id: "33",...},
                    { id: "34",...},
                    { id: "35",...},
                    { id: "36",...},
                    { id: "37",...},
                    { id: "38",...},
                    { id: "39",...},
                    { id: "40",...},
                    { id: "41",...},
                    { id: "42",...},
                    { id: "43",...},
                    { id: "44",...},
                    { id: "46",...},
                    { id: "47",...},
                    { id: "48",...},
                    { id: "49",...},
                    { id: "50",...},
                    { id: "51",...},
                    { id: "52",...},
                    { id: "53",...},
                    { id: "54",...},
                    { id: "55",...},
                    { id: "56",...},
                    { id: "57",...},
                    { id: "58",...},
                    { id: "59",...},
                    { id: "61",...},
                    { id: "62",...},
                    { id: "63",...},
                    { id: "64",...},
                    { id: "65",...},
                    { id: "66",...},
                    { id: "67",...},
                    { id: "68",...},
                    { id: "69",...},
                    { id: "70",...},
                    { id: "71",...},
                    { id: "72",...},
                    { id: "73",...},
                    { id: "74",...},
                    { id: "75",...},
                    { id: "76",...},
                    { id: "77",...},
                    { id: "78",...},
                    { id: "79",...},
                    { id: "80",...},
                    { id: "82",...},
                    { id: "83",...},
                    { id: "84",...},
                    { id: "85",...},
                    { id: "86",...},
                    { id: "87",...},
                    { id: "88",...},
                    { id: "89",...},
                    { id: "90",...},
                    { id: "91",...},
                    { id: "92",...},
                    { id: "93",...},
                    { id: "94",...},
                    { id: "95",...},
                    { id: "96",...},
                    { id: "97",...},
                    { id: "98",...},
                    { id: "99",...},
                    { id: "100",...},
                ]
            };

            $grid = $("#gridList");
            $grid.jqGrid({
                datatype: "jsonstring",
                datastr: jsonData,
                jsonReader: { "repeatitems": false },
                colNames: ['ID',...],
                colModel: [
                    { name: 'id', index: 'id', width: 10, alight: 'right', resizable: false, sortable: false }
                ],
                rowNum: 30,
                gridview: true,
                loadonce: true,
                height: "auto",
                ignoreCase: true,
                forceFit: true,
                autowidth: false,
                width: 244,
                loadComplete: function () {
                    $(this).find(">tbody>tr.jqgrow:odd").addClass("ui-jqgrow-even-blue");
                }
            });

            function FilterGridRow(value) {
                var startData = parseInt(value);
                var endData = startData + 30;

                var filter = {
                    groupOp: "AND",
                    rules: [
                        { field: "id", op: "ge", data: startData },
                        { field: "id", op: "le", data: endData },
                    ]
                }
                $grid[0].p.search = true;
                $.extend($grid[0].p.postData, { filters: eval(filter) });
                $grid.trigger("reloadGrid", [{ page: 1, current: true }]);
            }

            FilterGridRow(30);

1 个答案:

答案 0 :(得分:1)

如果您的代码缺少属性

,则会出现主要问题
sorttype: "integer"
<{1>}列中的

。见https://jsfiddle.net/OlegKi/beutgLo8/3/。如果没有该属性,id列中的数据将被解释为字符串而不是整数,因此id"4""5"会更大"6"(见https://jsfiddle.net/OlegKi/beutgLo8/4/