zTree 页面不能显示树形

java菜鸟111 发布于 2015/12/03 16:56
阅读 1K+
收藏 0

我的前端代码是这样的:

<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">  
<!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->  
<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}]
结果页面是这样的:

各位大神,求解啊


加载中
0
vvtf
vvtf

数据问题啊. 返回回来的就是一个1维数组, 所有就只有1级.

node有一个children的属性的.

ztree.me

j
java菜鸟111
我是刚接触这个,从网上看的一个demo其返回的数据格式就是那样的 ,那具体返回的数据格式是什么样的呢?
返回顶部
顶部