<!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>