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/p/2811817.html