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

这个问题类似于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>

解决方法:

我觉得你的问题很有趣.此外,由于您几乎将所有声誉点都花在了赏金上,因此我决定您真的需要解决问题的方法.所以我为你赚了the following demo.在开始时,它将显示完整的网格而不进行分组：

关于select元素,您可以选择分组列并接收如下结果

要么

取决于select元素中的选择.如果选择“不分组”,将还原网格的原始视图.

对于实现,我将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');
});

标签：jquery-ui,jqgrid,jquery-plugins,javascript,jquery
来源： https://codeday.me/bug/20191201/2082802.html