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. 效果展示