jquery - jqGrid のグループ化が機能しない

Question

jqGrid グループ化オプションをデータ テーブルに表示することができませんでした。データを表示するための私のプロセスは、サーバーから jSon を取得することです。それを配列に並べ替え、フィルターを設定してから、テーブルにデータを表示します。

グループ化がローカル データとサーバー データを異なる方法で処理する方法について読んでいますが、その違いが何であるか、またはそれが私の問題に関係しているのかどうかを完全には理解していません。

 $("#transGrid").jsGrid({
        width: '100%',
        height: 'auto',

        editing: false,
        autoload: true,
        paging: true,
        filtering: true,
        sorting: true,

        pageSize: 100,
        pageButtonCount: 10,

        grouping:true,
        groupingView : {
            groupField: ['amount'],
            groupColumnShow: [false],
            groupOrder: ['desc'],
            groupCollapse: true
        },

        rowClick: function(args){
            TransactionReceipt(args.item);
        },

        controller: {
            loadData: function (filter) {
                $('#error').empty();
                var deferred = $.Deferred();
                $.ajax({
                    type: 'GET',
                    url: '/tableGet/payments',
                    dataType: 'json',
                    success: function (data) {
                        var rawPayments = data;
                        var rows;
                        $.ajax({
                            type: 'GET',
                            url: '/getProjects',
                            dataType: 'json',
                            success: function (data) {
                                //HERE IS WHERE I SORT THAT DATA INTO AN ARRAY
                                rows = BuildRow(rawPayments, data);
                                rows = $.grep(rows, function (item) {
                                    return (!filter.amount || item.amount === filter.amount)
                                        && (!filter.sku || item.sku.indexOf(filter.sku) > -1)
                                        && (!filter.name || item.name.indexOf(filter.name) > -1)
                                        && (!filter.quantity || item.quantity === filter.quantity)
                                        && (!filter.price_per_ton || item.price_per_ton === filter.price_per_ton)
                                        && (!filter.project_name || item.project_name.indexOf(filter.project_name) > -1)
                                        && (!filter.cardType || item.cardType.indexOf(filter.cardType) > -1)
                                        && (!filter.class || item.class.indexOf(filter.class) > -1)
                                        && (!filter.memo || item.memo.indexOf(filter.memo) > -1)
                                        && (!filter.created.from || new Date(item.created) >= filter.created.from)
                                        && (!filter.created.to || new Date(item.created) <= filter.created.to);
                                });
                                deferred.resolve(rows);
                            }
                        });
                    }
                });

                $('#homeCSV').unbind().click(function () {
                    $('#paymentGridContent').tableToCSV();
                });

                return deferred.promise();
            }

        fields: [
            {name: 'created', type: 'date', title: 'DATE', align: 'left', headercss: 'gridHeader', css: 'gridBody'},
            {name: 'class', type: 'text', title: 'CLASS', align: 'left', headercss: 'gridHeader', css: 'gridBody'},
            {name: 'name', type: 'text', title: 'NAME', align: 'left', headercss: 'gridHeader', css: 'gridBody'},
            {name: 'sku', type: 'text', title: 'SKU', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: '', type: 'text', title: 'COST FOR CE', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: 'quantity', type: 'text', title: 'QUANTITY', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: 'vendor', type: 'text', title: 'VENDOR', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: 'term', type: 'text', title: 'TERMS', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: 'account', type: 'text', title: 'ACCOUNT', headercss: 'gridHeader', css: 'gridBody', align: 'left'},
            {name: 'amount', type: 'text', title: 'AMOUNT', headercss: 'gridHeader gridMoneyHeader', css: 'gridMoney gridBody', align: 'left',
                itemTemplate: function (value) {
                    return '$' + PennyReduction(value);
                }
            },
            {name: 'memo', type: 'text', title: 'MEMO', headercss: 'gridHeader gridMoneyHeader', css: 'gridBody', align: 'left'},
            {
                type: 'control',
                editButton: false,
                deleteButton: false,
                clearFilterButton: true,
                modeSwitchButton: true
            }
        ]
    });