layui数据表格自定义复选框表头_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. 效果展示

---

![](https://img.itqaq.com/art/content/f04eedbb81b549750a5084cd9fe4040b.png)

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页