渲染的layui树组件无法选则
下面是代码，那位看看
<%--
Created by IntelliJ IDEA.
User: Anonymous
Date: 2024/6/14
Time: 1:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>角色权限</title>
<link href="//cdn.staticfile.net/layui/2.9.11/css/layui.css" rel="stylesheet">
<script src="//cdn.staticfile.net/layui/2.9.11/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<jsp:include page="head.jsp" flush="true" />
<jsp:include page="left.jsp" flush="true" />
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div class="layui-card layui-panel">
<div class="layui-card-body">
<%--表格区域--%>
<div style="padding: 16px;">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
</div>
<br><br>
</div>
</div>
</div>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm" id="showTree">显示树形结构</button>
</div>
<div id="treePopup" style="display: none;">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
<button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
<button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
</div>
<div id="ID-tree-demo"></div>
</div>
<script type="text/html" id="barDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="edit">设置权限</a>
</div>
</script>
<script>
layui.use(['table', 'layer', 'tree'], function () {
var table = layui.table;
var layer = layui.layer;
var tree = layui.tree;
var token = localStorage.getItem("token");
// 模拟的权限树数据
var treeData = [
{
title: '操作用户', id: 1, field: 'user',spread: true,
children: [
{title: '新增', id: 3, field: 'userins'},
{title: '删除', id: 4, fixed: 'userdel'},
{title: '编辑', id: 20, field: 'useredi'}]
},
{
title: '操作角色', id: 2, field: 'role',spread: true,
children: [
{title: '新增', id: 5, field: 'roleins',},
{title: '删除', id: 6, field: 'roledel'},
{title: '编辑', id: 7, field: 'roleedi'}]
},
{
title: '操作运营', id: 3, field: 'yunyin',spread: true,
children: [
{title: '修改计费规则', id: 16, field: 'charging'},
{title: '修改月包卡', id: 27, field: 'month'}]
}];
// 渲染表格
table.render({
elem: '#test',
url: 'http://localhost:8080/role/list', // 服务器地址
headers: {
'Authorization': token
},
height: 'full-150',
cols: [[
{field: 'id', title: 'ID', width: 80, fixed: 'left'},
{field: 'type', title: '角色类型', width: 120},
{field: 'createUser', title: '创建者', width: 120},
{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}
]],
done: function () {
// 这里不需要额外的操作
},
error: function (res, msg) {
console.log(res, msg);
}
});
// 触发单元格工具事件
table.on('tool(test)', function (obj) {
if (obj.event === 'edit') {
// 获取当前行的角色ID
var roleId = obj.data.id;
// 弹出层显示权限树，并传递角色ID
layer.open({
type: 1,
title: '权限树',
content: $('#treePopup').html(), // 使用已存在的HTML内容
area: ['500px', '400px'],
success: function (layero, index) {
// 根据角色ID更新或初始化权限树（这里假设权限树数据已经是完整的，不需要根据ID过滤）
tree.render({
elem: '#ID-tree-demo', // 指定元素
data: treeData, // 数据，这里已经是完整的树形结构数据
showCheckbox: true, // 是否显示复选框
// 其他配置...
// 如果需要根据角色ID过滤数据，可以在这里处理
});
// 假设您需要在权限树中做某些基于角色ID的操作，可以在这里添加代码
console.log('当前编辑的角色ID:', roleId);
}
});
}
});
});
</script>
</body>
</html>
