3

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

现在有没有办法在免费的 jqgrid 中使用 filterToolbar 作为本地数据类型，并提供以下选项；

  1. 在工具栏中启用自动完成
  2. 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");
4

1 回答 1

3

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

要拥有“自动完成”和“类似过滤选项的 Excel”，您还需要根据输入数据的不同值来遵循设置或属性的答案。您可以在回调中执行此操作。答案中的代码使用从网格中获取数据。而不是那个可以访问 从回调内部的服务器返回的。因此，可以扫描数据以获取每列中具有唯一值的列表，并设置其中一个或属性。autocompletestype: "select", searchoptions: { value: ...}beforeProcessingthis.jqGrid("getCol", columnName)databeforeProcessingautocompletestype: "select", searchoptions: { value: ...}

更新：我创建了 JSFiddle 演示，演示了可以做什么：http: //jsfiddle.net/OlegKi/vgznxru6/1/。它使用以下代码（我将回显 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 });
    }
});
于 2015-05-25T20:03:32.693 回答