zTree 页面不能显示树形

发布于 2021-11-28 05:46:08 字数 5464 浏览 792 评论 2

我的前端代码是这样的：

<html>
<head>
<TITLE>zTree Demo</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<link rel="stylesheet" href="css/demo.css" type="text/css">

<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<body>
<div>
<ul id="treeDemo" class="ztree" style="height:410px;overflow:auto"></ul>
</div>
</body>
<script language="JavaScript">
var setting = {
async : {
enable : true, // 设置 zTree是否开启异步加载模式
url : "http://localhost:8088/Springmvc_maven/ztree/ztreedemo.do", // Ajax 获取数据的 URL 地址
autoParam : [ "id" ] // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
},
data:{ // 必须使用data
simpleData : {
enable : true,
idKey : "id", // id编号命名默认
pIdKey : "pId", // 父id编号命名默认
rootPId : 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
}
},
// 回调函数
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
// 判断是否父节点
if(!treeNode.isParent){
alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
}
},
//捕获异步加载出现异常错误的事件回调函数和成功的回调函数
onAsyncError : zTreeOnAsyncError,
onAsyncSuccess : function(event, treeId, treeNode, msg){

}
}
};

// 加载错误提示
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("加载错误：" + XMLHttpRequest);
};

// 过滤函数
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
for ( var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/.n/g, '.');
}
return childNodes;
}

// 渲染
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
</html>
后台返回的json数据是这样的：

[{"id":100,"pid":0,"isParent":1,"name":"父节点","open":1},{"id":101,"pid":100,"isParent":1,"name":"叶子节点-1","open":0},{"id":102,"pid":100,"isParent":1,"name":"叶子节点-2","open":0},{"id":103,"pid":100,"isParent":1,"name":"叶子节点-3","open":0},{"id":104,"pid":100,"isParent":1,"name":"叶子节点-4","open":0},{"id":105,"pid":0,"isParent":1,"name":"NB父节点","open":1},{"id":106,"pid":105,"isParent":1,"name":"NB叶子节点-1","open":0},{"id":107,"pid":105,"isParent":1,"name":"NB叶子节点-2","open":0},{"id":108,"pid":105,"isParent":0,"name":"NB叶子节点-3","open":0},{"id":109,"pid":106,"isParent":0,"name":"NB叶子节点-1-1","open":0},{"id":110,"pid":107,"isParent":0,"name":"NB叶子节点-2-1","open":0},{"id":111,"pid":101,"isParent":0,"name":"叶子节点-1-1","open":0},{"id":112,"pid":101,"isParent":0,"name":"销售","open":0},{"id":113,"pid":103,"isParent":0,"name":"行政","open":0},{"id":114,"pid":102,"isParent":0,"name":"助理","open":0},{"id":115,"pid":106,"isParent":0,"name":"保安","open":0},{"id":116,"pid":105,"isParent":0,"name":"人事","open":0},{"id":117,"pid":105,"isParent":0,"name":"环卫","open":0},{"id":118,"pid":102,"isParent":0,"name":"前台","open":0}]

结果页面是这样的：

分享到QQ

分享到微博