ztree异步逐级加载数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js"></script>
	</head>
	<body>
		<div id="content">
			<ul id="testTree" class="ztree"></ul>
		</div>
	</body>
	<script>
		$(function() {
			var setting = {
				view: {
					showIcon: false,
					fontCss: setFontCss_ztree //进行样式设置的方法
				},
				data: {
					simpleData: {
						enable: true, //是否之用简单数据
						idKey: 'id', //对应json数据中的ID
						pIdKey: 'parentId' //对应json数据中的父ID
					}
				},
				// 				async: {
				// 					enable: true, //是否为异步加载
				// 					type: "get",
				// 					contentType: "application/json",
				// 					url: './lx.json', //相关的请求网址
				// 					otherParam: ["id", "name"]
				// 				},
				callback: { //请求成功后回调
					onClick: onclickTree, //点击相关节点触发的事件
					onAsyncSuccess: ztreeOnAsyncSuccess, //异步加载成功后执行的方法
				},
			};
			//点击树触发的事件
			function onclickTree(event, treeId, treeNode) {
				var treeObj = $.fn.zTree.getZTreeObj(treeId);
				var node = treeObj.getNodeByTId(treeNode.tId);
				// console.log(node2,treeNode)
				if (!node.children) {//判断是否有二级树
					$.ajax({
						url: './lx.json',
						dataType: "json",
						aysnc: true,
						success: function(data) {
							console.log(data.data)
							newNode = treeObj.addNodes(node, data.data);
						}
					});
					alert(treeNode.id + treeId + treeNode.name);
				}

			}
			//获取树成功后进行的回调操作
			function ztreeOnAsyncSuccess(event, treeId, treeNode) {
				console.log(treeId, treeNode)
				//展开树
				expand_ztree(treeId)
			}
			/**
			 * 展开树
			 * @param treeId  
			 */
			function expand_ztree(treeId) {
				var treeObj = $.fn.zTree.getZTreeObj(treeId);
				treeObj.expandAll(true);
			}
			/**
			 * 设置树节点字体样式
			 */
			function setFontCss_ztree(treeId, treeNode) {
				if (treeNode.id == 0) {
					//根节点
					return {
						color: "#333",
						"font-weight": "bold"
					};
				} else if (treeNode.isParent == false) {
					//叶子节点
					return {
						color: "#660099",
						"font-weight": "normal"
					};
				} else {
					//父节点
					return {
						color: "#333",
						"font-weight": "normal"
					};
				}
			}
			var data = [

				{
					"id": "123",
					"isHidden": false,
					"open": true,
					"parentId": "",
					"ext1": "",
					"name": "1 xxx",
					"uuid": "xxxxx",
					"checked": false
				}, {
					"id": "456",
					"isHidden": false,
					"open": true,
					"ext1": "",
					"name": "2.1 xxxx",
					"uuid": "xxxxx",
					"checked": false
				}, {
					"id": "456",
					"isHidden": false,
					"open": true,
					"ext1": "",
					"name": "3.1 xxxx",
					"uuid": "xxxxx",
					"checked": false
				}, {
					"id": "456",
					"isHidden": false,
					"open": true,
					"ext1": "",
					"name": "4.1 xxxx",
					"uuid": "xxxxx",
					"checked": false
				}, {
					"id": "456",
					"isHidden": false,
					"open": true,
					"ext1": "",
					"name": "5.1 xxxx",
					"uuid": "xxxxx",
					"checked": false
				}

			]
			$.fn.zTree.init($("#testTree"), setting, data); //对应ul要显示的ID，对应相关的setting，如果异步加载，最后一个参数为空，否则为响应的数据
		})
	</script>
</html>

以上是主体代码

lx.json文件代码如下

{
	"data":[
	{
		"id": "4567",
		"isHidden": false,
		"open": true,
		"ext1": "",
		"name": "1.1 xxxx",
		"uuid": "xxxxx",
		"checked": false
	},
	{
		"id": "4568",
		"isHidden": false,
		"open": true,
		"ext1": "",
		"name": "1.2 xxxx",
		"uuid": "xxxxx",
		"checked": false
	},
	{
		"id": "4569",
		"isHidden": false,
		"open": true,
		"ext1": "",
		"name": "1.3 xxxx",
		"uuid": "xxxxx",
		"checked": false
	},{
		"id": "45610",
		"isHidden": false,
		"open": true,
		"ext1": "",
		"name": "1.4 xxxx",
		"uuid": "xxxxx",
		"checked": false
	}	
	]
}

1.引入jq以及ztree的代码

<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js"></script>

2.html的代码

<div id="content">
	<ul id="testTree" class="ztree"></ul>
</div>

3.设置setting

var setting = {
				view: {
					showIcon: false,
					fontCss: setFontCss_ztree //进行样式设置的方法
				},
				data: {
					simpleData: {
						enable: true, //是否之用简单数据
						idKey: 'id', //对应json数据中的ID
						pIdKey: 'parentId' //对应json数据中的父ID
					}
				},
				// 				async: {
				// 					enable: true, //是否为异步加载
				// 					type: "get",
				// 					contentType: "application/json",
				// 					url: './lx.json', //相关的请求网址
				// 					otherParam: ["id", "name"]
				// 				},
				callback: { //请求成功后回调
					onClick: onclickTree, //点击相关节点触发的事件
					onAsyncSuccess: ztreeOnAsyncSuccess, //异步加载成功后执行的方法
				},
			};

ztree异步逐级加载数据

猜你喜欢