LayUI 数据表格学习和应用
LayUI的数据表格有三种渲染方式,方法渲染、自动渲染、转换数据表格。我用的最多的第一种,方法渲染,直接在HTML网页写一行代码然后剩下的业务逻辑和实现都交给Js去处理。这种方式个人感觉比较容易实现和发现问题,通过id把两者关联起来。下面的篇幅就是介绍这种方式的使用,另外两种也要了解,见到代码能看懂,知道原理是啥就行。下面的方式必须掌握。
示例
var table = layui.table;
table.render({
elem: '#userTable'
,height: 'full-210'
,url: APP.restfulPrefix('/account/um_user/get_all_by_is_manage') //数据接口
,where:{is_manager: 1, loginKey:sessionStorage.getItem("account_login_key")}
,page: {limit:50} //开启分页
,cols: [[ //表头
{type:'checkbox',width:50, fixed: 'left'}
,{field: 'tenantId', title: '机构编码', width:120}
,{field: 'tenantName', title: '机构名称', width:120,}
,{field: 'id', title: '账号', width:120, sort: true,toolbar: '#id'}
,{field: 'realname', title: '姓名', width:100}
,{field: 'nickname', title: '昵称', width:100}
,{field: 'mobile', title: '手机', width:120}
,{field: 'email', title: '邮箱', width:150}
,{fixed: 'right', title: '管理',width:80, align:'center', toolbar: '#baruserTable'}
]]
,done: function(res) {
dataTablePage.currentPage = res.currentPage;
dataTablePage.hasPrevious = res.hasPrevious;
dataTablePage.hasNext = res.hasNext;
}
});
- 上面的是JS中的代码,表格进行渲染操作;当然了在HTML网页中还有一个layui表格的标签啦,
<table id="userTable" lay-filter="test"></table>
- 示例中的第一句话你也可以不写,在你的函数中直接把要用的组件全部一起声明。
- 例如:
var $ = layui.jquery;
var form = layui.form;
var table = layui.table;
var layer = layui.layer;
var laydate = layui.laydate;
var element = layui.element;
var dataTablePage = {
currentPage: 1, // 当前页
hasPrevious: false, // 存在上一页
hasNext: true // 存在下一页
};
- 对于上面渲染中出现的参数,每个都是有特定意义的。
- elem:我的理解是代表表格的唯一标识,也就是id;
- height:是表格的高度;可以直接设置、也可以设置比如:‘full-210’这种形式
- url:是数据接口,也就是你从后端拿数据是走的哪个controller,哪个mapping,让浏览器可以通过映射找到对应的那个具体的方法。
- where:是数据接口之外带的另外字段或者额外条件,有时候可以作为查询条件;
- page:是否开启分页,你还可以通过设置一系列参数来表名怎么分页、是否显示首尾页、是否开启哈希等
- cols:是表的具体内容,也是你要显示的数据放的地方、里面有超多的参数:field是字段名、width是宽度、title是名称、sort是否开启排序、在cols你也可以开启是否是可编辑的状态、可以设置该列是复选框还是单选框还是数字栏目、可以绑定模板让你的单元格多样化、可以绑定工具条完成一些炫酷的操作、可以设置样式等等;学习表格,把cols里面的参数过一遍就能把握很多了,它是表格中核心中的核心,让你的表格天马行空,随心所欲的表达你的想法。当然每一个搞懂记住是不现实的,但是能记住大概就够了,很多东西的熟练使用需要积累经验。
- done:是表格渲染成功之后进行的操作,也就是拿到数据并显示成功之后的回调函数。
表格常见的八个基础方法:
- table.set(options); //设定全局默认参数。options即各项基础参数
- table.on(‘event(filter)’, callback); //事件监听。event为内置事件名,filter为容器lay-filter设定的值
- table.init(filter, options); //filter为容器lay-filter设定的值,options即各项基础参数。
- table.checkStatus(id); //获取表格选中行
- table.render(options); //用于表格方法级渲染,核心方法。
- table.reload(id, options); //表格重载
- table.resize(id); //重置表格尺寸
- table.exportFile(id, data, type); //导出数据
实用技巧:
- 获取选中行,比如说用在删除的时候判断你有没有选中数据、也可以用这种方式拿到你选中的数据,比之前用Jquery的方法去找方便的多,这是直接拿,拿到之后再去做相应的处理。
var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量,可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
- 导出任意数据
table.exportFile(['名字','性别','年龄'], [
['张三','男','20'],
['李四','女','18'],
['王五','女','19']
], 'csv'); //默认导出 csv,也可以为:xls
- 事件监听:事件所监听的默认是table模块容器,当然你也可以使用filter选择你要具体监听某一个容器,使用事件过滤器即可。一般比较常见的比如,点击编辑选项弹出一个弹出层,然后进行信息的修改,然后再监听表单的提交。
//以复选框事件为例
table.on('checkbox(test)', function(obj){
console.log(obj)
});
监听单元格事件
layui.use('table', function(){
var table = layui.table;
//监听单元格事件
table.on('tool(demoEvent)', function(obj){
var data = obj.data;
if(obj.event === 'setSign'){
layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
,value: data.sign
}, function(value, index){
layer.close(index);
//这里一般是发送修改的Ajax请求
//同步更新表格和缓存对应的值
obj.update({
sign: value
});
});
}
});
});
- 监听头部工具栏事件
原始的容器
<table id="demo" lay-filter="test"></table>
工具栏模板(就是操作选项中的三个按钮,都对应一个相应的事件)
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
监听事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
layer.msg('添加');break;
case 'delete':
layer.msg('删除');break;
case 'update':
layer.msg('编辑');break;};
});
</script>
- 这里列出的是比较常见的事件,当然也可以监听复选框选择、单元格的编辑、行单双击事件等。