Настраиваемое агрегирование на стороне клиента в jqGrid

Question

Этот вопрос похож на Настраиваемая агрегация / группировка в jqGrid , но немного по-другому.

У меня есть следующий jqGrid.

Он загружается один раз, и я хотел бы, чтобы все следующие функции выполнялись на стороне клиента.Выпадающий список - это селектор, который меняет способ отображения данных.Скажем, например, я хочу отобразить по состоянию, он должен просто показать столбец состояния (я могу справиться с этим путем отображения и скрытия столбцов), и я хотел бы, чтобы он агрегировал / суммировал "Number1", "Number2" иКолонка «Number3» также.Это должно выглядеть примерно так (Надеюсь, мое ручное добавление правильно).

Мне также нужно иметь возможность получить обратно к первой сетке, хотя так, 869 нужно сломать обратнов 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

Мне интересен ваш вопрос.Более того, поскольку вы тратите почти все свои очки репутации на награду, я решил, что вам действительно нужно решение проблемы.Поэтому я сделал для вас следующую демонстрацию .В начале он отображает полную сетку без группировки:

В отношении элемента select вы можете выбрать столбец группировки и получить в результате, как

или

зависит от выбора в элементе выбора.Если вы выберете «Нет группировки», исходный вид сетки будет восстановлен.

Для реализации я использовал groupSummary с пользовательской реализацией summaryType .

Я рекомендую вам прочитать ответ , который дополнительно описывает, как можно настроить итоговую строку группировки.

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