1. 程式人生 > >easyui datagrid 列分組和行歸組

easyui datagrid 列分組和行歸組

資料格式:

{
    "col": [
        "分類",
        "id",
        "模式英文名",
        "模式中文名",
        "教務系統",
        "Oracletest",
        "收費系統",
        "SqlServer test",
        "門戶系統"
    ],
    "db": [
        {
            "收費系統": "U",
            "sqlserver test": "U",
            "門戶系統": "U",
            "id
": "c7e60fcb5c24442bbd44872e57a8d0ee", "分類": "在校生", "模式英文名": "T_DB_XSJBXXL", "oracletest": "U", "教務系統": "C", "模式中文名": "學生基本資訊類" }, { "收費系統": "C", "sqlserver test": "U", "門戶系統": null, "id
": "103e3041c7e64d47a08112e46b900045", "分類": "組織機構", "模式英文名": "T_DB_MYSQLTEST", "oracletest": "U", "教務系統": null, "模式中文名": "mysql測試" }, { "收費系統": "C", "sqlserver test": "U", "門戶系統": null, "id
": "24cfc969c68d462280296c278afe3ad1", "分類": "組織機構", "模式英文名": "T_DB_ORACLETEST", "oracletest": null, "教務系統": null, "模式中文名": "oracle測試" }, { "收費系統": "U", "sqlserver test": "U", "門戶系統": null, "id": "09cf452922de42a08183e7182a81caa2", "分類": "組織機構", "模式英文名": "T_DB_YXZYNJBJ", "oracletest": "U", "教務系統": "C", "模式中文名": "院系專業設定" } ]
}

col是列,db是資料

js程式碼:

function getDbSet() {
    $.post('/DataCenter/DBC/UcData', function (data) {
        var col = data.col;
        var ds = data.db;
        var columns = [[
        { title: '資料集', colspan: 3 },
        { title: '業務系統', colspan: col.length - 4 }],
        []];

        columns[1][0] = { field: '分類', title: '分類', align: 'center' };
        columns[1][1] = { field: '模式英文名', title: '模式英文名' };
        columns[1][2] = { field: '模式中文名', title: '模式中文名' };

        col.splice($.inArray('分類', col), 1);
        col.splice($.inArray('模式英文名', col), 1);
        col.splice($.inArray('模式中文名', col), 1);

        var index = 3;
        for (i = 0; i < col.length; i++) {
            if (col[i] != "id") {
                var colname = col[i].toLowerCase();
                columns[1][index] = {
                    field: colname, title: colname, formatter: function (value, row, index) {
                        var str = value;
                        if (value == 'C' || value == 'U') {
                            str = "<div style='text-align:center'>" + value + "</div>";
                        }
                        return str;
                    },
                    styler: function (value, row, index) {
                        return 'background-color:#E5EDD3;';
                    }
                };
                index++;
            }
        }

        tab_uc.datagrid({
            data: ds,
            idField: 'id',
            rownumbers: true,
            columns: columns,
            onLoadSuccess: function (data) {
                var merges = [];
                var tmpClass = '';
                var index = 0;
                var rowspan = 0;
                for (i = 0; i < ds.length; i++) {
                    if (tmpClass == '') {
                        tmpClass = ds[i].分類;
                        index = i;
                    } else {
                        rowspan++;
                    }

                    if (tmpClass != ds[i].分類 || i == ds.length - 1) {
                        merges.push({ index: index, rowspan: rowspan });
                        tmpClass = ds[i].分類;
                        index = i;
                        rowspan = 1;
                    } 
                }

                console.log(merges);
                for (var i = 0; i < merges.length; i++) {
                    tab_uc.datagrid('mergeCells', {
                        index: merges[i].index,
                        field: '分類',
                        rowspan: merges[i].rowspan
                    });
                }
            }
        })
    });

}