Layui Table组件工具栏配置与事件监听详解
作者:流萤时间:2026-10-24 01:51:55浏览:270
本文详细介绍Layui Table组件工具栏的配置方法。通过定义模板实现动态按钮显示,利用lay-event属性绑定操作,并编写table.on监听代码处理查看、删除等交互逻辑,帮助开发者快速掌握表格工具栏的完整使用流程。
Layui Table工具栏配置与事件监听详解
Layui工具栏功能介绍
首先,在HTML结构中引入Layui的table模块,并在table配置项中添加toolbar属性以指定工具栏模板。
fixed:'right',title:'操作',width:"28%",align:'center',toolbar:"#barlist"
接着,在HTML页面中编写具体的JavaScript代码,用于配置表格参数及绑定工具栏事件。
<script type="text/html" id="barlist">
<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
{{# if(d.forbidden=="0"){ }}
<a class="layui-btn layui-btn-xs" lay-event="jinyong">禁用</a>
{{# } else if(d.forbidden=="1"){}}
<a class="layui-btn layui-btn-xs" lay-event="jiechu">解除</a>
{{# } }}
<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>
最后,通过table.on方法监听工具栏的点击事件,根据lay-event的值执行相应的业务逻辑,如删除或编辑操作。
table.on('tool(listfilter)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('ID:' + data.id + ' 的查看操作');
} else if (layEvent === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行(tr)的DOM结构
console.log(data.id)
$.ajax({
url: "",
type: "DELETE",
data: {"id": data.id},
dataType: "json",
beforeSend: function (request) {
request.setRequestHeader("Authorization", window.sessionStorage.token);
},
success: function (data) {
if (data.code == 200) {
obj.del();
layer.close(index);
layer.msg(data.msg, {icon: 6});
parent.table.reload('list', {});
} else if (data.code == 401) {
obj.del();
layer.close(index);
layer.msg("登陆已过期,请重登", {icon: 6});
location.href = "./login.html";
}
else {
layer.msg(data.msg, {icon: 5});
}
}
});
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') {
console.log(data)
x_admin_show('编辑', 'admin-edit.html?id=' + data.id, '900', '500');
// layer.msg('编辑操作');
} else if (layEvent === 'jinyong') {
var x = this;
layer.confirm('确定要禁用此用戶麽', function (index) {
$(x).text("解除");
$.ajax({
url: "",
type: "PUT",
data: {
"id": data.id,
"forbidden": "1"
},
dataType: "json",
beforeSend: function (request) {
request.setRequestHeader("Authorization", window.sessionStorage.token);
},
success: function (data) {
if (data.code == 200) {
layer.close(index);
layer.msg(data.msg, {icon: 6});
} else if (data.code == 401) {
layer.close(index);
layer.msg("登陆已过期,请重登", {icon: 6});
location.href = "./login.html";
}
else {
layer.msg(data.msg, {icon: 5});
}
}
});
});
// layer.msg('编辑操作');
} else if (layEvent === 'jiechu') {
var x = this;
layer.confirm('确定要解除禁用麽', function (index) {
$(x).text("解除");
$.ajax({
url: "http://134.175.36.40/api/admin/usual",
type: "PUT",
data: {
"id": data.id,
"forbidden": "0"
},
dataType: "json",
beforeSend: function (request) {
request.setRequestHeader("Authorization", window.sessionStorage.token);
},
success: function (data) {
if (data.code == 200) {
layer.close(index);
layer.msg(data.msg, {icon: 6});
} else if (data.code == 401) {
layer.close(index);
layer.msg("登陆已过期,请重登", {icon: 6});
location.href = "./login.html";
}
else {
layer.msg(data.msg, {icon: 5});
}
}
});
});
}
});
以上即为Layui Table组件工具栏的核心使用步骤,希望能为开发者提供有效的参考与帮助。
作者最新文章
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
