javascript - jqGrid 中的自定义客户端聚合

Question

这个问题类似于Custom aggregation/grouping in jqGrid但有点不同。

我有以下 jqGrid。

它只加载一次，我希望以下所有功能都在客户端完成。下拉列表是一个选择器，可以更改数据的显示方式。比如说我想按州显示，它应该只显示州列(我可以通过显示和隐藏列来处理)，我希望它聚合/求和“Number1”、“Number2”和“Number3”列也是如此。它应该看起来像这样(希望我的手动添加是正确的)。

不过，我还需要能够返回到第一个网格，因此，869 需要分解为 Taylor Ridge、Skokie、Beecher 的 285、489、95 值。这是 jqGrid 可以处理的事情吗？

以下是第一个网格的 XML，但我可以完全控制此 XML 的构建方式，因此我可以根据需要进行更改。

    <?xml version ='1.0' encoding='utf-8'?>
<result>
  <row>
    <cell>1</cell>
    <cell>IL</cell>
    <cell>SPARLAND</cell>
    <cell>32</cell>
    <cell>61</cell>
    <cell>19</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>IL</cell>
    <cell>EDWARDS</cell>
    <cell>69</cell>
    <cell>56</cell>
    <cell>2</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>IL</cell>
    <cell>SPARLAND</cell>
    <cell>52</cell>
    <cell>30</cell>
    <cell>8</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>2</cell>
    <cell>CA</cell>
    <cell>TAYLOR RIDGE</cell>
    <cell>285</cell>
    <cell>72</cell>
    <cell>15</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>1</cell>
    <cell>CA</cell>
    <cell>SKOKIE</cell>
    <cell>489</cell>
    <cell>60</cell>
    <cell>12</cell>
    <cell>0</cell>
  </row>
  <row>
    <cell>1</cell>
    <cell>CA</cell>
    <cell>BEECHER</cell>
    <cell>95</cell>
    <cell>46</cell>
    <cell>17</cell>
    <cell>0</cell>
  </row>
</result>

Answer 1

我觉得你的问题很有趣。此外，由于您几乎将所有声望点都花在了赏金上，我认为您确实需要解决问题。所以我做了the following demo为你。一开始它显示完整的网格而不分组:

关于选择元素，您可以选择分组列并作为结果接收

或

取决于选择元素中的选择。如果您选择“不分组”，将恢复网格的原始 View 。

对于实现，我使用了 groupSummary 和 summaryType 的自定义实现.

我推荐你阅读the answer此外，它还描述了如何自定义分组的摘要行。

the demo的正文HTML代码是

<fieldset style="float:left" class="ui-widget ui-widget-content ui-corner-all ui-jqgrid">
    <select id="chooseGrouping">
        <option value="">No grouping</option>
        <option value="State">State</option>
        <option value="City">City</option>
        <option value="Level">Level</option>
    </select>
</fieldset>
<div style="clear:left">
    <table id="grid"><tr><td></td></tr></table>
</div>

对应的JavaScript代码如下:

var intTemplate = { formatter: 'integer', align: 'right', sorttype: 'int',
        summaryType: 'sum'},
    grouppingTemplate = {
        summaryType: function (val, name, record) {
            if (typeof (val) === "string") {
                return record[name];
            }
            return val;
        }
    },
    $grid = $("#grid");

$grid.jqGrid({
    url: 'CustomGrouping2.xml',
    height: 'auto',
    colModel: [
        { name: 'Level', formatter: 'integer', sorttype: 'int', template: grouppingTemplate },
        { name: 'State', template: grouppingTemplate },
        { name: 'City', template: grouppingTemplate },
        { name: 'Number1', template: intTemplate },
        { name: 'Number2', template: intTemplate },
        { name: 'Number3', template: intTemplate },
        { name: 'Selected', template: intTemplate }
    ],
    cmTemplate: { width: 90 },
    xmlReader: { root: 'result' },
    loadonce: true,
    rowNum: 1000,
    grouping: false,
    groupingView: {
        groupField: ['State'],
        groupSummary: [true],
        groupColumnShow: [true],
        groupText: ['{0}'],
        groupDataSorted: true,
        showSummaryOnHide: true
    },
    loadComplete: function () {
        if (this.p.grouping) {
            $(this).children('tbody').children('tr').each(function () {
                var $tr = $(this);
                if (!$tr.hasClass('jqfoot')) {
                    $tr.hide();
                }
            });
        }
    }
});

$('#chooseGrouping').change(function () {
    var index, count, sel = $('option:selected', this).val(),
        allGroups = ["State", "City", "Level"];
    if (sel === "") {
        $grid.jqGrid('setGridParam', {grouping: false});
        for (index = 0, count = allGroups.length; index < count; index++) {
            $grid.jqGrid('showCol', allGroups[index]);
        }
    } else {
        $grid.jqGrid('setGridParam', {grouping: true, groupingView: {groupField: [sel]}});
        $grid.jqGrid('showCol', sel);
        index = $.inArray(sel, allGroups);
        if (index >= 0) {
            allGroups.splice(index, 1);
            for (index = 0, count = allGroups.length; index < count; index++) {
                $grid.jqGrid('hideCol', allGroups[index]);
            }
        }
    }
    $grid.trigger('reloadGrid');
});