jquery - Jqgrid-行レベルのデータのグループ化

Question

jqgridを使用すると、添付の画像のように行レベルのデータをグループ化できますか？基本的に、特定の行のデータを特定の列以降の複数の行に分割したかったのです。

例

Answer 1

一部のセルに属性を設定するか、別の不要なセルを非表示にするようcellattrに設定することをお勧めします。考え方は答えからと同じです。rowspanstyle="display:none"colspan

その結果、次のグリッドを作成できます（デモを参照）

または別のもの（別のデモを参照）

グリッドの問題は、並べ替え、ページング、ホバー、選択などの別のjqGrid機能にあります。追加の努力で実装できる機能の一部もありますが、実装がより難しい機能もあります。

デモで使用したコードは次のとおりです。

var mydata = [
        { id: "1", country: "USA", state: "Texas",      city: "Houston",       attraction: "NASA",               zip: "77058", attr: {country: {rowspan: "5"},    state: {rowspan: "5"}} },
        { id: "2", country: "USA", state: "Texas",      city: "Austin",        attraction: "6th street",         zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "3", country: "USA", state: "Texas",      city: "Arlinton",      attraction: "Cowboys Stadium",    zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "4", country: "USA", state: "Texas",      city: "Plano",         attraction: "XYZ place",          zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "5", country: "USA", state: "Texas",      city: "Dallas",        attraction: "Reunion tower",      zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "6", country: "USA", state: "California", city: "Los Angeles",   attraction: "Hollywood",          zip: "65456", attr: {country: {rowspan: "4"},    state: {rowspan: "4"}} },
        { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "8", country: "USA", state: "California", city: "San Diego",     attraction: "See world",          zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "9", country: "USA", state: "California", city: "Anaheim",       attraction: "Disneyworld",        zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} }
    ],
    arrtSetting = function (rowId, val, rawObject, cm) {
        var attr = rawObject.attr[cm.name], result;
        if (attr.rowspan) {
            result = ' rowspan=' + '"' + attr.rowspan + '"';
        } else if (attr.display) {
            result = ' style="display:' + attr.display + '"';
        }
        return result;
    };

$("#list").jqGrid({
    datatype: 'local',
    data: mydata,
    colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],
    colModel: [
        { name: 'country', width: 70, align: 'center', cellattr: arrtSetting },
        { name: 'state', width: 80, align: 'center', cellattr: arrtSetting },
        { name: 'city', width: 90 },
        { name: 'attraction', width: 120 },
        { name: 'zip', index: 'tax', width: 60, align: 'right' }
    ],
    cmTemplate: {sortable: false},
    rowNum: 100,
    gridview: true,
    hoverrows: false,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    height: '100%',
    caption: 'Grid with rowSpan attributes',
    beforeSelectRow: function () {
        return false;
    }
});

上記のコードattrでは、入力データと一緒に配置された追加のプロパティを使用しました。これは単なる例です。cellattr関数の実装をもっと簡単にしたかったのです。同じアイデアを使用して、必要な情報をcellattr他の形式で配置できます。

Answer 2

これは、JSONデータの私のソリューションです。

var prevCellVal = { cellId: undefined, value: undefined };

$("#list").jqGrid({
    url: 'your WS url'
    datatype: 'json',
    mtype: "POST",
    ajaxGridOptions: {
        contentType: "application/json"
    },
    colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],
    colModel: [
        { name: 'country', width: 70, align: 'center', 
            cellattr: function (rowId, val, rawObject, cm, rdata) {
                        var result;

                        if (prevCellVal.value == val) {
                            result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
                        }
                        else {
                            var cellId = this.id + '_row_' + rowId + '_' + cm.name;

                            result = ' rowspan="1" id="' + cellId + '"';
                            prevCellVal = { cellId: cellId, value: val };
                        }

                        return result;
                    }
        },
        { name: 'state', width: 80, align: 'center' },
        { name: 'city', width: 90 },
        { name: 'attraction', width: 120 },
        { name: 'zip', index: 'tax', width: 60, align: 'right' }
    ],
    cmTemplate: {sortable: false},
    rowNum: 100,
    gridview: true,
    hoverrows: false,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    height: '100%',
    caption: 'Grid with rowSpan attributes',
    beforeSelectRow: function () {
        return false;
    },
    gridComplete: function () {
        var grid = this;

        $('td[rowspan="1"]', grid).each(function () {
            var spans = $('td[rowspanid="' + this.id + '"]', grid).length + 1;

            if (spans > 1) {
                $(this).attr('rowspan', spans);
            }
        });
    }
});

この例は単一の列用ですが、いくつかの修正を加えるだけで、複数の列にも使用できます。

Answer 3

ねえ「ピスティパンコ」

私はあなたのソリューションに変更を加えました、私はそれがよりうまくいったと思います。

cellattr: function(rowId, val, rawObject, cm, rdata) {
                        var result;
                        var cellId = this.id + '_row_' + rawObject[3] + grid.getGridParam('page');

                        if (prevCellVal.cellId == cellId) {
                            result = ' style="display: none"';
                        }
                        else {
                            result = ' rowspan="' + rawObject[6] + '"';
                            prevCellVal = { cellId: cellId, value: rawObject[3] };
                        }

                        return result;
                    }

別の列の値を使用してグループ化を行っているためrawObject[3] 、アプリケーションから返された行スパン値を使用しています。rawObject[6]

よく働く。

それが役に立てば幸い ：）