ztree实现树的异步加载

因为工作，需两棵树，然后可以对除了根的所有节点进行比较，而且这棵树要求是异步加载的，要实现选择比较节点，我想在除了根的每个节点之前加一个单选框。我在网上查了很多资料实现异步加载树结构的框架，通过比较，感觉ztree特别强大，至少能实现我要的功能，而且操作方便。

         首先到ztree的官网上去下了一个最新的版本，好像是3.5的吧，减压后看到里面不仅有demo,还有API,我是先看的demo，看到不懂的然后查API，好像API不支持chrome浏览器，我用的是firefox,可能是我太孤陋寡闻了，这个API文档是我用过的所有API中最方便的一个，而且界面效果也不错。看demo的时候觉得挺简单的，但是具体做起来就不那么简单了。

         我自己写了一些树节点的静态数据，数据是JSON格式，因为树以这种格式加载树节点，但是页面上树的效果怎么也做不出来，但我把数据换成是demo里面的数据就可以显示出来了，后来反复查看，原来是在json中，name的value没有加双引号，悲剧。一个小细节的问题，举个例子。

         <script type="text/javascript">       

           $(document).ready(function(){

              //树需要做的设置，API里面都有   

                  var setting = {

                     async:{//异步加载需要做的设置

                         enable:true,

//异步请求服务器地址

                         url:"/firefly/project/branch_report",

                         autoParam:["id"],

                         otherParam: ["pid",pid,"isFirstLoad""false"],

                     },

                     check:{//有单选框的设置

                         enable:true,

                         chkStyle:"radio",

                         radioType:"all"

                     }

                  };

//页面 打开时我就能获得根节点的json数据，{id:1,name:”aaa”}形式，

//这是后台传给我的，${script}是用模板形式获得数据，直接在页面输出//是json格式数据

                  var firstData = ${script};                   

                  var zNodes = firstData;               

                  };

                 //初始化树，这里初始化了两棵树，”#sourceTree”是页面ul标//签的id，页面必须写一个<ul id=” sourceTree”></ul> 才行，必须是ul标签                          

                  $.fn.zTree.init($("#sourceTree"), setting, zNodes);

                  $.fn.zTree.init($("#targetTree"), setting, zNodes);

                  //初始化树对象，可用该对象条用它的方法，实现对树的操作，//"sourceTree"同上是<ul>标签的id

                  var sourceTreeObj = $.fn.zTree.getZTreeObj("sourceTree");

                  var targetTreeObj = $.fn.zTree.getZTreeObj("targetTree");

                               

                  $("#confirm").click(function(){

              //获取单选框选中的所有节点，具体看API

                      var sourceNodes = sourceTreeObj.getCheckedNodes(true);

                     var targetNodes = targetTreeObj.getCheckedNodes(true);

                     var temSourceTree = sourceNodes[0];

                     var temTargetTree = targetNodes[0];

                     //可以获得节点的ID,NAME等，然后存到页面上的一个隐藏域里

                     $("#sourceId").val(temSourceTree.id);

                     $("#sourceName").val(temSourceTree.name);

                     $("#targetId").val(temTargetTree.id);

                     $("#targetName").val(temTargetTree.name);

                     //获得所有表单数据

                     var b = $("#allForm").serialize();

                     //通过ajax把数据传到后台

                      $.ajax({

                         url:"/firefly/project/show_branch_report",

                         type:"post",

                         data:b,

                         success:function(data){

                         alert("sucess");

                         }

                     });

                  });

       </script>

 

说明：我后台是java语言写的servelet程序，直接print.write出来的是json数据，就可以实现点击树节点左边的“+“，去异步请求文件，然后把请求的JSON数据显示到树上。在这过程中遇到一个特别头疼的问题，json数据中有中文显示的是乱码，后来查明原因是因为后台java代码用的是gbk编码，而前端页面用的是UTF-8，如果能报持前后端编码一致乱码就没问题了，最后的解决办法是，servelet在响应response的时候，用response.setContentType("text/html; charset=utf-8")把响应的编码设成UTF-8就可以了

 

问题：我不知道如果开始页面上没有根节点，ztree是否能自动根据异步加载配置的URL去请求服务器？

转载于:https://www.cnblogs.com/redangel/archive/2012/12/10/2811817.html