表格操作laytpl
作者:互联网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <table id="demoTreeTb" class="layui-hide" lay-filter="demoTableFilter"> </table> <div class="demoDetailDiv" style="display:none;padding:10px;"> <div id="detailDiv"></div> </div> <div class="wenjian"></div> <script src="./jquery/dist/jquery.js"></script> <script src="./layui/layui.js"></script> <script src="./treetable-lay/dist/treeTable.js"></script> <script> layui.use(['table', 'laytpl'], function () { var table = layui.table; var layer = layui.layer; var laytpl = layui.laytpl; // 渲染树形表格 var insTb = table.render({ elem: '#demoTreeTb', url: './main.json', tree: { iconIndex: 2, // 折叠图标显示在第几列 isPidData: true, // 是否是id、pid形式数据 idName: 'authorityId', // id字段名称 pidName: 'parentId' // pid字段名称 }, cols: [[ { type: 'numbers' }, { type: 'checkbox' }, { field: 'authorityName', title: '菜单名称' }, { field: 'menuUrl', title: '菜单地址' }, { field: 'authority', title: '权限标识' }, { title: '操作', toolbar: '#barDemo' } ]] }); table.on('tool(demoTableFilter)', function (obj) { var data = obj.data; console.log(data) if (obj.event === 'detail') { index = layer.open({ title: '查看详情', type: 1, move: false, content: $('.demoDetailDiv'), area: ['750px', '300px'], resize: false, scrollbar: false }); var demoDetailTpl = demoDetail.innerHTML //获取模板, , detailDiv = document.getElementById('detailDiv'); //视图 laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图 detailDiv.innerHTML = html; }); } }); }); </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <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> <script type="text/html" id="demoDetail"> <div> <div class="disF"> <div class="flex1"> <div class="disF"> <label>姓名:</label> <p class="flex1">{{d.username}}</p> </div> </div> <div class="flex1"> <div class="disF"> <label>邮箱:</label> <p class="flex1">{{d.email}}</p> </div> </div> <div class="flex1"> <div class="disF"> <label>签名:</label> <p class="flex1">{{d.sign}}</p> </div> </div> </div> <div class="disF"> <div class="flex1"> <div class="disF"> <label>性别:</label> <p class="flex1">{{d.sex}}</p> </div> </div> <div class="flex1"> <div class="disF"> <label>城市:</label> <p class="flex1">{{d.city}}</p> </div> </div> <div class="flex1"> <div class="disF"> <label>积分:</label> <p class="flex1">{{d.experience}}</p> </div> </div> </div> </div> </script> </body> </html>
标签:obj,表格,title,layui,table,var,操作,laytpl 来源: https://www.cnblogs.com/wsm777/p/14182340.html