jqGrid filterToolbar与本地数据 [英] jqGrid filterToolbar with local data

问题描述

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

I have a jQgrid that loads data initially via an ajax call from backend(java struts). Again, this is one time load and once loaded, the jqGrid should operate on the data available locally. Initially, datatype:json and once loadcomplete, set datatype:local.

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

Now is there a way to use filterToolbar for local datatype with the following options in free jqgrid;

1. 在工具栏中启用了自动完成功能
2. 像过滤选项一样出色

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");

推荐答案

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

All the features are enabled by default if I understand you correctly. The server just have to return all data instead of one page of data to make loadonce: true property work correctly. You need just call filterToolbar after creating the grid. All will work like with local data. You should consider to set sorttype property for correct local sorting and stype and searchoptions for correct filtering of data.

要具有自动完成"和类似于过滤功能的Excel"，还需要遵循答案(设置或stype: "select", searchoptions: { value: ...}属性基于输入数据的不同值.您可以在beforeProcessing回调中执行此操作.答案中的代码使用this.jqGrid("getCol", columnName)来从网格获取数据.而不是那个，它可以访问beforeProcessing回调内部从服务器返回的data.因此，人们可以扫描数据以获取每一列具有唯一值的列表，并设置autocomplete或stype: "select", searchoptions: { value: ...}属性.

To have "autocomplete" and "excel like filtering options" you need additionally to follow the answer which set autocomplete or stype: "select", searchoptions: { value: ...} properties based on different values of input data. You can do this inside of beforeProcessing callback. The code from the answer use this.jqGrid("getCol", columnName) which get the data from the grid. Instead of that one have access to data returned from the server inside of beforeProcessing callback. So one can scan the data to get the lists with unique values in every column and to set either autocomplete or stype: "select", searchoptions: { value: ...} properties.

更新:我创建了JSFiddle演示，该演示演示了可以执行的操作: http://jsfiddle.net/OlegKi/vgznxru6/1/.它使用以下代码(我只是将echo URL更改为您的URL):

UPDATED: I created JSFiddle demo which demonstrates what one can do: http://jsfiddle.net/OlegKi/vgznxru6/1/. It uses the following code (I changed just echo URL to your 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与本地数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！