Layui 表格
Layui 分页是由 laypage 实现的，所以既需要分页 laypage 还需要数据表格相关的内容。
数据表格设置
table.render({
page: true
...
})这样就可以进行分页了，但是如果想要修改分页的样式，可以按下面的方式进行修改：
table.render({
page: {
layout: ['limit','count','prev','page','next','skip'] // 分页布局
,groups: 1 // 只显示1个连续页码
,first: false // 不显示首页
,last: false // 不显示尾页
,theme: '#c00' // 可以传入颜色或者任意普通字符
}
})其中 layout 中支持数据有：
- count 总条目输区域
- prev 上一页区域
- page 分页区域
- next 下一页区域
- limit 条目选项区域
- refresh 页面刷新区域
- skip 快捷跳页区域
实现复选框
在后来的版本，已经提供了复选框功能了。
实现
首先要在 templet 加上行号数据
<script type="text/html" id="test_id">
<input type=“checkbox” title=“testbox” id=“id{{d.LAY_TABLE_INDEX}}”>
</script>然后在 table 的表头中增加对应的内容
table.render({
cols: [[ //表头
field: 'test'
,title: 'test'
,templet: '#test_id'
]]
});然后对数据进行赋值
var data = res.data;
for(var item in data){
$(‘#testbox’ + data[item].LAY_TABLE_INDEX).attr(‘checked’, ‘checked’);
}
form.render();这主要是因为 table 中默认有一个数值，叫 LAY_TABLE_INDEX 是用来做为返回的组数据的行号，这里使用这个参数对每一行进行操作，就可以了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录