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