首先在你要想显示的地方加入以下代码:
<div class="layui-col-md3" style="width:21%;height:100vh">
<div id="treeDemo" class="ztree"></div>
</div>
然后引入（位置不一定一样请根据自己的情况做调整）;
<link href="~/layui-v2.7.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui-v2.7.6/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!-- 引入 ZTree 的相关文件 -->
<link href="~/lib/ztree_v3/css/ztreestyle/ztreestyle.css" rel="stylesheet" />
<script src="~/lib/ztree_v3/js/jquery-1.4.4.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.js"></script>
然后加入以下代码:
<script>
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var form = layui.form;
// 通过Ajax从后台获取树的数据
$.ajax({
url: '@Url.Action("GetInpatientWard")', // 替换为实际的后台接口地址
type: 'GET',
dataType: 'json',
success: function (res) {
if (res) {
console.log(res);
// 数据请求成功，调用初始化树的函数
initTree(res);
} else {
layer.msg('获取树的数据失败');
}
},
error: function () {
layer.msg('请求树的数据发生错误');
}
});
var zTreeObj; // 声明全局变量保存zTree对象
// 初始化树
function initTree(treeData) {
var setting = {
view: {
showIcon: true, // 不显示图标
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'inpatientWardId',
pIdKey: 'parentId',
rootPId: 0
},
key: {
name: 'inpatientWardName'
}
},
callback: {
onClick: function (event, treeId, treeNode) {
if (treeNode.isParent) {
// 如果点击的是父节点，则取消选中状态
zTreeObj.cancelSelectedNode(treeNode);
} else {
// 如果点击的是子节点，则将值赋给"InpatientWardId"
$("#selectedNode").val(treeNode.inpatientWardId);
var NId = $("#selectedNode").val();
console.log(NId);
// 获取 div 元素
var nursingUnitListDiv = $("#NursingUnitList");
$.ajax({
url: '@Url.Action("GetNursingUnitList")',
type: "get",
data: {
Id: NId
},
success: function (res) {
if (res) {
//nursingUnitListDiv.html(res);
location.href="/nursingunit/nursingunitlist?Id="+NId;
}
}
})
}
}
}
};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, treeData);
zTreeObj.expandAll(true); // 将树全部展开
}
});
</script>
效果图:
标签：function,显示,treeNode,res,layer,zTreeObj,Ztree,var,直接 From： https://www.cnblogs.com/buzhilichou/p/17587248.html