Layui 数据表格方法渲染中的复杂表头简单使用示例

1. 数据表格接口数据

{
    "code": 0,
    "msg": "用户信息",
    "count": 5,
    "data":[
        {
            "id": 1,
            "name": "张三",
            "sex": "女",
            "prov": "河南",
            "city": "郑州市",
            "dist": "金水区"
        },
        {
            "id": 2,
            "name": "李四",
            "sex": "男",
            "prov": "河南",
            "city": "郑州市",
            "dist": "金水区"
        },
        {
            "id": 3,
            "name": "王五",
            "sex": "女",
            "prov": "河南",
            "city": "郑州市",
            "dist": "二七区"
        },
        {
            "id": 4,
            "name": "赵六",
            "sex": "女",
            "prov": "河南",
            "city": "开封市",
            "dist": "龙亭区"
        },
        {
            "id": 5,
            "name": "小七",
            "sex": "男",
            "prov": "河南",
            "city": "开封市",
            "dist": "鼓楼区"
        }
    ]
}

2. 方法渲染数据表格

table.render({
    elem: '#demo'
    ,url: '/dbtable' //数据接口
    ,cols: [
        [ //标题栏
            {align: 'center', field: 'name', title: '姓名', rowspan: 2} //rowspan 合并行
            ,{align: 'center', field: 'sex', title: '性别', rowspan: 2}
            ,{align: 'center', title: '地址', colspan: 3} //colspan 合并列
        ],
        [
            {align: 'center', field: 'prov', title: '省'}
            ,{align: 'center', field: 'city', title: '市'}
            ,{align: 'center', field: 'dist', title: '区'}
        ]
    ]
});

3. 效果展示