zimoyin
60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>医院科室树形结构</title>
|
|
<!-- 引入你提供的资源 -->
|
|
<link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
|
|
<link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
|
|
</head>
|
|
<body>
|
|
<!-- 树形结构容器 -->
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div id="hospitalDeptTree" style="padding: 10px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
|
|
<script src="/app/admin/component/pear/pear.js"></script>
|
|
<script src="/app/admin/admin/js/permission.js"></script>
|
|
<script src="/app/admin/admin/js/common.js"></script>
|
|
|
|
<script>
|
|
layui.use(['tree', 'layer', 'jquery'], function(){
|
|
var tree = layui.tree;
|
|
var layer = layui.layer;
|
|
var $ = layui.jquery;
|
|
|
|
// 渲染医院科室树形结构
|
|
function renderHospitalTree() {
|
|
// 请求后端接口获取树数据
|
|
$.get("/app/admin/test/tree", function(res){
|
|
if(res.code === 0){
|
|
tree.render({
|
|
elem: '#hospitalDeptTree', // 容器ID
|
|
data: res.data, // 树数据
|
|
showCheckbox: false, // 不显示复选框
|
|
onlyIconControl: true, // 仅允许图标展开/折叠
|
|
click: function(obj){
|
|
// 点击节点事件
|
|
layer.msg("你选择了：" + obj.data.title);
|
|
console.log("节点数据：", obj.data);
|
|
}
|
|
});
|
|
} else {
|
|
layer.msg(res.msg || "加载树形结构失败");
|
|
}
|
|
}).fail(function(){
|
|
layer.msg("接口请求失败，请检查后端服务");
|
|
});
|
|
}
|
|
|
|
// 页面加载完成渲染树
|
|
$(function(){
|
|
renderHospitalTree();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |