书接上文,话说这 layui 建好数据表格之后,后面往往还要加上几个按钮,上面可能还有个批量删除什么的,今天主要来说说这些功能是怎么实现的。
首先是html页面,还是就一个空 table ,代码如下:
<table id="layTable" lay-filter="tableTest"></table>
生成数据表格的 js 代码如下:
function table(){
layui.use('table', function(){
var table = layui.table;
table.render({
//对象表格的id
elem: '#layTable'
//头部工具栏
,toolbar: '#toolbarDemo'
//请求路径
,url:'http://127.0.0.1:8087/api/table'
//数据
,cols: [[
//复选框,fixed为固定位置,即该复选框永远在表格最左侧,同理下面的行内工具栏永远在最右侧
{type: 'checkbox', fixed: 'left'}
//layui 2.40之后的新特性,可以增加一个 hide:true 属性,隐藏该列
,{field:'id', width:80, title: 'ID', sort: true}
,{field:'name', width:80, title: '用户名'}
//行内工具栏
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:'center'}
]]
//开启分页
,page: true
});
});
}
复选框是为了增加批量删除功能而添加的,增加的头部工具栏和行内工具栏内有一个toolbar属性,该属性的值对应下列 js 的 id 属性。
<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="delAll">删除选中行数据</button>
</div>
</script>
<!--行内工具栏-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
注意此处有一 lay-event 属性,将在下文用到。此时页面会变成这样:
接下来就剩给工具栏的按钮添加事件了,代码如下:
layui.use('table', function(){
table = layui.table;
//监听行工具事件
table.on('tool(tableTest)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
//关闭该 confirm 窗口
layer.close(index);
layer.alert("已删除id为"+data.id+"的行");
});
} else if(obj.event === 'edit'){
layer.open({
type:2,
title:"修改名称",
content:"jump.html?id="+data.id,
})
}
});
//头工具栏事件
table.on('toolbar(tableTest)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'delAll':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
};
});
})
首先说 table.on 绑定表格时,tool() 方法即是监听行内工具栏,toolbar() 方法是监听头部工具栏。
方法的参数对应 html 页面中 table 标签的 lay-filter 属性。
然后是 obj.event ,对应上一段代码中的 lay-event 属性。
可以看到,删除方法中可以直接用 data.id 获取表格中的 id 字段。
如图中所示,已经取到了行内的 id,就可以用ajax请求相应的删除方法了。
头部的批量删除方法跟删除一样,用 checkStatus.data 来获取被选中的复选框,即可得到需要的行内数据(该数据为对象数组),再用ajax向后台请求就好了。
最后再说比较麻烦的打开新页面,可以直接用 lay.open 打开新的页面,在 content 属性中输入要打开的页面的相对路径,在后面把参数传过去就可以了。在新打开的页面可以用如下代码接收传过来的参数:
<body>
<h1 id="test"></h1>
<script>
$(()=>{
$("#test").html(GetQueryString("id"))
})
function GetQueryString(id){
var reg = new RegExp("(^|&)"+ id +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
</script>
</body>
运行结果如下:
可以看到 id 已经成功传到了新的页面,该页面取到 id 之后即可调用 ajax 请求查询新的数据。