日志
layui数据表格如何加工具栏？
2019-07-01 09:40
1， 将此行代码加在红线所在的位置
,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'} 2，在合适的HTML位置加入 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button> </div> </script> 全部代码： {include file="common/header"} <div class="x-nav"> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a> <a> <cite>导航元素</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> <i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <table class="layui-hide" id="test" lay-size="sm" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button> </div> </script> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:"{:url('admin/user/page')}" ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 ,limit:10 //一页显示多少条 ,limits:[5,10,15]//每页条数的选择项 ,groups: 2 //只显示 2 个连续页码 ,first: "首页" //不显示首页 ,last: "尾页" //不显示尾页 } ,cols: [[ {field:'id', width:80, title: '代理ID', sort: true} ,{field:'username', width:100, title: '代理名称'} ,{field:'level', width:100, title: '代理级别'} ,{field:'email', width:80, title: '电子邮箱'} ,{field:'phone', width:280, title: '手机号'} ,{field:'agent_id', width:280, title: '上级代理ID'} ,{field:'status', width:280, title: '是否启用'} ,{field:'isAuth', width:280, title: '是否已经认证'} ,{field:'money', width:280, title: '金额'} ,{field:'created_time', width:280, title: '访问时间',sort: true} ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'} ]] }); //监听工具条 table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" console.log(obj); var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的DOM对象 if(layEvent === 'detail'){ //查看 //do somehing } else if(layEvent === 'del'){ //删除 layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } }); }); </script> </body> </html> 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。 阅读全文 |