本文介绍了如何使用layui框架在数据表格中实现自定义复选框表头，通过方法渲染实现复杂表头的简单使用示例。内容包括数据接口的数据结构，方法渲染的数据表格代码，以及最终效果的展示。
#### 1. 数据表格接口数据
---
```json
{
"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. 方法渲染数据表格
---
```javascript
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. 效果展示
---
扫一扫
2108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
