对layui中table组件工具栏的使用详解
layui工具栏
第一步:在table中引入table,在table控件下加入:
fixed:'right',title:'操作',width:"28%",align:'center',toolbar:"#barlist"
第二步:在table标签中加入以下js代码:
{{#if(d.forbidden=="0"){}} 禁用 {{#}elseif(d.forbidden=="1"){}} 解除 {{#}}} 编辑 删除
第三步:监听工具栏
table.on('tool(listfilter)',function(obj){//注:tool是工具条事件名,test是table原始容器的属性lay-filter="对应的值"
vardata=obj.data//获得当前行数据
,layEvent=obj.event;//获得lay-event对应的值
if(layEvent==='detail'){
layer.msg('ID:'+data.id+'的查看操作');
}elseif(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',{});
}elseif(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);
//向服务端发送删除指令
});
}elseif(layEvent==='edit'){
console.log(data)
x_admin_show('编辑','admin-edit.html?id='+data.id,'900','500');
//layer.msg('编辑操作');
}elseif(layEvent==='jinyong'){
varx=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});
}elseif(data.code==401){
layer.close(index);
layer.msg("登陆已过期,请重登",{icon:6});
location.href="./login.html";
}
else{
layer.msg(data.msg,{icon:5});
}
}
});
});
//layer.msg('编辑操作');
}elseif(layEvent==='jiechu'){
varx=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});
}elseif(data.code==401){
layer.close(index);
layer.msg("登陆已过期,请重登",{icon:6});
location.href="./login.html";
}
else{
layer.msg(data.msg,{icon:5});
}
}
});
});
}
});
以上这篇对layui中table组件工具栏的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。