zoukankan      html  css  js  c++  java
  • 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去请求服务器?

  • 相关阅读:
    三者最大实例分析
    Python eval函数
    Linux查看某个进程的线程
    将列表传递给函数
    二十四、二进制日志截取与恢复
    二十三、二进制日志事件
    二十二、二进制日志记录方式
    二十一、二进制日志介绍
    二十、错误日志
    十九、InnoDB核心参数
  • 原文地址:https://www.cnblogs.com/redangel/p/2811817.html
Copyright © 2011-2022 走看看