对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组件工具栏的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。