监听行工具栏事件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数据表格-监听行工具栏事件</title> <!--layui模块化使用--> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script src="layui/layui.js" text="text/javascript" charset="utf-8"></script> </head> <body> <!--方法渲染--> <table id="tab_three" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData"> 获取选中行数据 </button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength"> 获取选中数目 </button> <button class="layui-btn layui-btn-sm" lay-event="isAll"> 验证是否全选 </button> </div> </script> <script text="text/javascript"> //加载table模块 layui.use("table",function(){ var table = layui.table; //方法渲染 table.render({ elem: "#tab_three", url: "js/user.json", //数据接口,通过服务器请求 height:315, cols: [[ //设置序列号 {field:"aa",type:"numbers"}, //设置复选框 {field:"bb",type:"checkbox"}, {field:"id",title:'用户编号',sort:true,width:120,hide:true}, {field:"username",title:'用户名',width:100}, {field:"sex",title:'性别',width:100,sort:true}, {field:"city",title:'城市',width:100,sort:true}, {field:"age",title:'年龄'}, //设置表头工具栏 {field:"操作",toolbar:"#barDemo"} ]], //开启分页 page:true, //设置表格工具栏 toolbar:"#toolbarDemo" }); /* 头监听事件 table.on('toolbar(test)',function(obj){ }); 注意：test表示的是容器上设置的lay-filter属性值 */ table.on('toolbar(test)',function(obj){ //console.log(obj); //obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是 //tab_three,获取当前表格被选中记录对象返回的数据 var checkStatus = table.checkStatus(obj.config.id); console.log(checkStatus); //获取事件名称 var eventName = obj.event; //判断事件名称，处理对应的代码 switch (eventName){ case "getCheckData": //获取选中记录的数组 var arr = checkStatus.data; //将数组解析为字符串 layer.alert(JSON.stringify(arr)); break; case "getCheckLength": //获取选中记录的数组 var arr = checkStatus.data; layer.msg("选中了"+ arr.length+"条数据"); break; case "isAll": //通过isAll判断是否全选 var flag = checkStatus.isAll; var str = flag?'全选':'未全选'; layer.msg(str); break; default: break; } }); /* 监听行工具栏事件 */ table.on('tool(test)',function(obj){ //得到当前操作行的相关信息 var tr = obj.data; console.log(tr); //得到事件名 var eventName = obj.event; //判断事件名，执行对应的方法 if(eventName == 'del'){ //删除 layer.confirm("您确定要删除吗？",function(index){ //删除指定当前的tr obj.del(); //关闭弹窗 layer.close(index); }); } else if(eventName == 'edit'){ //修改 layer.prompt({ //表单元素的类型0-文本框,1-密码框,2-文本域 formType:0, value:tr.username },function(value,index){ //修改指定单元格的值 //value表示输入的值 obj.update({ username : value }); layer.close(index); }); } }); }); </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> </body></html>版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除