Easyui动态列(并且是复杂表头)

Easyui动态列(并且是复杂表头)

效果图

1：查询datagrid的动态列数据

（来源后端配置业务代码忽略）

[{
    "addDeleteFlag": 0,
    "dimensionCode": "000001",
    "dimensionName": "TAB1",
    "dynamicFields": [{
        "dimensionCode": "000001",
        "dimensionName": "TAB1",
        "editableAdmin": 1,
        "editableSupplier": 1,
        "fieldCode": "86eac7f6ebe3441e966765e430108e2e",
        "fieldName": "\u4E0B\u62C9",
        "fieldType": 2,
        "fixedCheckFunction": "",
        "isFixed": 0,
        "isRequired": "",
        "jsonData": "[{\"selectValue\":\"A\",\"isNewRecord\":false},{\"selectValue\":\"B\",\"isNewRecord\":false}]",
        "labelAlias": "\u4E0B\u62C9",
        "orderNum": "0",
        "promptText": "",
        "width": "80"
    }],
    "hasWeiYiFlag": "",
    "templateCode": "000006",
    "templateName": "\u4E00\u4E2A\u7EF4\u5EA6",
    "weiYiFieldCode": ""
}]

2：生成动态列需要的column属性数据

/**
 * 生成动态的复杂表头
 * @param data
 */
function generateCol(data) {
    var columns1 = [];
    var columns2 = [];
    $.each(data, function (index, dimension) {
        columns1.push({
            field: dimension.dimensionCode,
            title: '<span style="color: #722ed1">' + dimension.dimensionName + '</span>',
            halign: 'center',
            //第一行合并单元格
            colspan: dimension.dynamicFields.length,
        });
        $.each(dimension.dynamicFields, function (fieldIndx, field) {
            var title = '<span style="color: #FFB6C1">' + field.labelAlias + '</span>';
            columns2.push({
                field: field.fieldCode,
                title: title,
                width: field.width,
            });
        });
    });

    var columns = [];
    columns.push(columns1);
    columns.push(columns2);
    return columns;
}

3：构建datagrid

function loadGrid(columns) {
    let searchHeight = $(el.searchForm).outerHeight();
    $(el.tb).datagrid({
        height: el.bodyHeight - searchHeight - 60,
        width: gridwidth,
        singleSelect: false,
        pagination: false,
        idField: '',
        url: 'url',
        autoHeight: true,
        loadMsg: "数据加载中......",
        rownumbers: true,
        fitColumns: false,
        striped: false,
    });
}

4：datagrid展示数据后端接口处理

核心就是返回一个hasmap的集合，key就是动态的field

 public List<HashMap<String, String>> allFieldData(DynamicSupplierDataQuery query)