带有本地数据的 jqGrid filterToolbar


jqGrid filterToolbar with local data

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

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

  • 在工具栏中启用自动完成
  • excel 喜欢过滤选项

    • Jqgrid 选项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    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 以正确过滤数据。

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    $("#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 });
        }
    });
    相关讨论