本篇文章给大家分享的是有关怎么在layui中使用table组件工具栏，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、网站制作、爱民网络推广、微信平台小程序开发、爱民网络营销、爱民企业策划、爱民品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供爱民建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
layui工具栏
第一步：在table中引入table，在table控件下加入:
fixed：'right',title:'操作',width:"28%",align:'center',toolbar:"#barlist"
第二步：在table标签中加入以下js代码：
{{# if(d.forbidden=="0"){ }}
禁用
{{# } else if(d.forbidden=="1"){}}
解除
{{# } }}
编辑
删除
第三步：监听工具栏
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组件工具栏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享名称：怎么在layui中使用table组件工具栏
网页URL：
http://bjjierui.cn/article/pgoppo.html
