一、准备工作
1.引用layui.css和layui.js
2.声明table模块
layui.use('table', function(){
var table = layui.table;
)}
二、开始使用
table.render({
elem: '#demo' //此处填写容器ID
,height: 312 //高度,可选填
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{ type: 'checkbox', fixed: 'left' }
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
<table id="demo" lay-filter="test"></table>
特别提醒,在使用layui的数据表格的时候,如果没有开启勾选框( { type: ‘checkbox’, }),大部分时候会导致表头和数据不对齐,推荐使用的时候开启勾选框。如果不开启的话就需要给每个字段固定的宽度,否则会出现如下图的问题。
toolbar: 'default' //让工具栏左侧显示默认的内置模板
默认表头
自定义按钮表头
toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器
toolbar: '#toolbarDemo'
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-group">
<div class="layui-inline" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
</div>
<div class="layui-inline" lay-event="update">
<i class="layui-icon layui-icon-edit"></i>
</div>
<div class="layui-inline" lay-event="delete">
<i class="layui-icon layui-icon-delete"></i>
</div>
<div class="layui-inline" lay-event="buttoninfo">
<i class="layui-icon layui-icon-file"></i>
</div>
</div>
</script>
点击表头弹窗
table.on('toolbar(test)', function (obj) {//监听事件
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
layer.open({
type: 2,
title: '请进行操作',
area: ['100%', '100%'],
maxmin: true,
content: 'index.html',//弹出的页面
yes: function () {
$(".layui-laypage-btn")[0].click();
layer.closeAll();
},
});
break;
};
});
<div class="layui-inline" lay-event="add">//表头
<i class="layui-icon layui-icon-add-1"></i>
</div>
获取弹窗数据
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
body.find("input[name='ID']").val(data[0].ID);
body.find("input[name='Name']").val(data[0].Name);
},
2018年12月19日收笔,后续会继续更新