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

2019-12-01 18:35:31 阅读：350 来源： 互联网

标签：jquery-ui jqgrid jquery-plugins javascript jquery

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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