ztree学习小计

       今天要做一个组织架构的展示，就想去看一下，现在的一些做树的插件，因为之前用过extjs,当时项目出现过一些标签的打开和半展开的问题，有些功能不好实现，项目组决定使用jquery的zTree，所以我第一个想到的就是去用ztree来展示组织架构，然后先去官网上看了看，貌似这个在网站也没大维护，所有的问题都转到OSchina的一个博客，就去网上翻阅了一些资料（http://blessht.iteye.com/blog/1029769），看到网上还是有些详细的小栗子，我就照着栗子上写，第一个栗子就是最简单的那个，静态的展现一个树列表，然后这个数列表是不会出现配置setting的问题，所以，一切都会正常的执行，当我运行第二个小栗子的时候，却是怎么也出不来，浪费了三个小时的调试以后发现有两个问题：

1.版本问题：

对，就是版本问题，尼玛嗨啊，那个栗子是longlongago的，仔细看api的时候你会发现，setting的配置会变成这样，和这样：   

data :{
          simpleData:{
        enable:true,
        idKey:"id",
        pIdKey:"pId",
        rootPid:null
       }
       }

我也是醉了，难怪怎么也不显示树形结构，这告诉一个道理：研究一个未知的东西的时候，请首先学习API，API，API重要的事情要说三遍。修改完以后就好了。

2.ajax后台传值得问题：

当你使用ajax传递json字符串的时候通过观看api，你会发现前台所需要的参数是一个json数组，也就是说，你不能传递一个json类型的字符串，最主要的区别就是：当你alert的时候你会发现，json数组弹出的都是object类型，你看不到里面的数据，而String类型的则可以看到数据，请自行检查这两点。

另，贴一下代码：

empty

  
  
 rel="stylesheet"
href="<%=request.getContextPath()%>/css/zTreeStyle.css" type="text/css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
var setting = {
        data :{
          simpleData:{
        enable:true,
        idKey:"id",
        pIdKey:"pId",
        rootPid:null
       }
       }
 
};


/*   var zNodes = [ {
name : "父节点1 - 展开",
open : true,
children : [ {
name : "父节点11 - 折叠",
children : [ {
name : "叶子节点111"
}, {
name : "叶子节点112"
}, {
name : "叶子节点113"
}, {
name : "叶子节点114"
} ]
}, {
name : "父节点12 - 折叠",
children : [ {
name : "叶子节点121"
}, {
name : "叶子节点122"
}, {
name : "叶子节点123"
}, {
name : "叶子节点124"
} ]
}, {
name : "父节点13 - 没有子节点",
isParent : true
} ]
}, {
name : "父节点2 - 折叠",
children : [ {
name : "父节点21 - 展开",
open : true,
children : [ {
name : "叶子节点211"
}, {
name : "叶子节点212"
}, {
name : "叶子节点213"
}, {
name : "叶子节点214"
} ]
}, {
name : "父节点22 - 折叠",
children : [ {
name : "叶子节点221"
}, {
name : "叶子节点222"
}, {
name : "叶子节点223"
}, {
name : "叶子节点224"
} ]
}, {
name : "父节点23 - 折叠",
children : [ {
name : "叶子节点231"
}, {
name : "叶子节点232"
}, {
name : "叶子节点233"
}, {
name : "叶子节点234"
} ]
} ]
}, {
name : "父节点3 - 没有子节点",
isParent : true
}


]; */ 
    var treeNodes; 
$(function(){  
   $.ajax({  
       async : false,  
       cache:false,  
       type: 'POST',  
       dataType : "json",  
       url:"<%=basePath%>zTreeDemo",//请求的action路径  
error : function() {//请求失败处理函数  
alert('请求失败');
},
success : function(data) { //请求成功后处理函数。  
alert(data);
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes  
}
});
});


$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
});
</script>




  
  


   
   


  
  

后台用的阿里的fastjson：

@RequestMapping("zTreeDemo") 
@ResponseBody
public String zTreeDemo(HttpServletResponse response) throws IOException{
   String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";  
       String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";  
       String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";  
       String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";  
       List<String> lstTree = new ArrayList<String>();  
       lstTree.add(s1);  
       lstTree.add(s2);  
       lstTree.add(s3);  
       lstTree.add(s4); 
       
       return JSONArray.toJSONString(lstTree);
}