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

}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值