带有本地数据的 jqGrid filterToolbar

Question

我有一个 jQgrid，它最初通过来自后端的 ajax 调用加载数据 (java struts)。同样，这是一次加载，一旦加载，jqGrid 应该对本地可用的数据进行操作。最初，datatype:json 加载完成后，设置 datatype:local.

现在有一种方法可以在免费的 jqgrid 中使用具有以下选项的 本地数据类型 的 filterToolbar；

工具栏中启用了自动完成功能
excel 喜欢过滤选项

Jqgrid 选项：

jQuery("#listTable").jqGrid({
    url:'/WebTest/MainAction.do',
    datatype: "json",
    colNames: ['Label','Value'],
    colModel: [
        {name:'label',index:'label',width: 40,search:true, stype:'text',sorttype:'int'},
        {name:'value',index:'value',width: 56,search:true, stype:'text',sorttype:'text'}
    ],
    autowidth: true,
    autoResizing: { compact: true, widthOfVisiblePartOfSortIcon: 13 },
    rowNum: 10,
    rowList: [5, 10, 20, "10000:All"],
    viewrecords: true,
    pager: true,
    toppager: true,
    rownumbers: true,
    sortname: "label",
    sortorder: "desc",
    caption: "Test 235",
    height: "200",
    search: true,
    loadonce: true,
    loadComplete: function (data) {
    },
    gridComplete: function(){ 
        jQuery("#listTable").jqGrid('setGridParam', { datatype: 'local' });
    }
}) .jqGrid("navGrid", { view: true, cloneToTop: true})
.jqGrid("filterToolbar")
.jqGrid("gridResize");

Answer 1

如果我没理解错的话，所有的功能都是默认启用的。服务器只需 return 所有数据而不是一页数据即可使 loadonce: true 属性正常工作。您只需要在创建网格后调用 filterToolbar。一切都将像使用本地数据一样工作。您应该考虑设置 sorttype 属性以进行正确的本地排序，并设置 stype 和 searchoptions 以正确过滤数据。

要获得 "autocomplete" 和 "excel like filtering options"，您还需要遵循，它根据输入数据的不同值设置 autocomplete 或 stype: "select", searchoptions: { value: ...} 属性。您可以在 beforeProcessing 回调中执行此操作。答案中的代码使用 this.jqGrid("getCol", columnName) 从网格中获取数据。而不是那个可以从 beforeProcessing 回调内部的服务器访问 data returned。因此，可以扫描数据以获取每一列中具有唯一值的列表，并设置 autocomplete 或 stype: "select", searchoptions: { value: ...} 属性。

更新： 我创建了 JSFiddle 演示，演示了可以做什么：http://jsfiddle.net/OlegKi/vgznxru6/1/。它使用以下代码（我将 echo URL 更改为您的 URL）：

$("#grid").jqGrid({
    url: "/WebTest/MainAction.do",
    datatype: "json",
    colNames: ["Label", "Value"],
    colModel: [
        {name: "label", width: 70, template: "integer" },
        {name: "value", width: 200 }    
    ],
    loadonce: true,
    pager: true,
    rowNum: 10,
    rowList: [5, 10, "10000:All"],
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true },
    shrinkToFit: false,
    autoResizing: { compact: true },
    beforeProcessing: function (data) {
        var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [],
            $self = $(this);

        for (i = 0; i < data.length; i++) {
            item = data[i];
            if (!labelMap[item.label]) {
                labelMap[item.label] = true;
                labels += ";" + item.label + ":" + item.label;
            }
            if (!valueMap[item.value]) {
                valueMap[item.value] = true;
                values.push(item.value);
            }
        }

        $self.jqGrid("setColProp", "label", {
            stype: "select",
            searchoptions: {
                value: labels,
                sopt: ["eq"]
            }
        });
        $self.jqGrid("setColProp", "value", {
            searchoptions: {
                sopt: ["cn"],
                dataInit: function (elem) {
                    $(elem).autocomplete({
                        source: values,
                        delay: 0,
                        minLength: 0,
                        select: function (event, ui) {
                            var grid;
                            $(elem).val(ui.item.value);
                            if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                                    grid = $self[0];
                                    if ($.isFunction(grid.triggerToolbar)) {
                                        grid.triggerToolbar();
                                    }
                            } else {
                                // to refresh the filter
                                $(elem).trigger("change");
                            }
                        }
                    });
                }
            }
        });

        // one should use stringResult:true option additionally because
        // datatype: "json" at the moment, but one need use local filtreing later
        $self.jqGrid("filterToolbar", {stringResult: true });
    }
});

带有本地数据的 jqGrid filterToolbar

jqGrid filterToolbar with local data

jqgrid

free-jqgrid