jqGrid filterToolbar with local data

问题

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.

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

1. autocomplete enabled in the toolbar
2. excel like filtering options

Jqgrid Options:

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

回答1:

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.

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.

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

来源：https://stackoverflow.com/questions/30444865/jqgrid-filtertoolbar-with-local-data