easyui datagrid 列分组和行归组

来源：互联网发布：上海美国学校知乎编辑：程序博客网时间：2024/06/03 21:02

数据格式：

{    "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                    });                }            }        })    });}

0 0