Question

我有一个jQgrid，它最初通过来自后端（java struts）的ajax调用来加载数据。同样，这是一次加载，一旦加载，jqGrid应该对本地可用的数据进行操作。最初，数据类型：json和一次loadcomplete，设置数据类型：local。

现在有一种方法可以将filterToolbar用于本地数据类型，并在free jqgrid中使用以下选项;

工具栏中启用了自动填充功能
excel like filtering options

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

如果我理解正确，默认情况下会启用所有功能。服务器只需要返回所有数据而不是一页数据来使loadonce：true属性正常工作。您只需在创建网格后调用filterToolbar即可。所有这些都与本地数据一样。您应该考虑设置sorttype属性以进行正确的本地排序，并设置stype和searchoptions以正确过滤数据。

要拥有“自动填充”和“类似过滤选项”，您还需要关注the answer，根据输入数据的不同值设置autocomplete或stype: "select", searchoptions: { value: ...}属性。您可以在beforeProcessing回调中执行此操作。答案中的代码使用this.jqGrid("getCol", columnName)从网格中获取数据。而不是那个人可以访问data回调内从服务器返回的beforeProcessing。因此，可以扫描数据以获取每列中具有唯一值的列表，并设置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

1 个答案: