jQuery插件TreeView异步加载树

最新推荐文章于 2018-07-27 17:22:07 发布

weisljl

最新推荐文章于 2018-07-27 17:22:07 发布

阅读量4.3k

点赞数

分类专栏： JavaScript 文章标签： jquery插件 branch function java url json

本文链接：https://blog.csdn.net/weisljl/article/details/7668067

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

给出两个官网，可以去看看教程。

http://docs.jquery.com/Plugins/Treeview
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

jsp页面：

    Java代码   
    
  
   <link rel="stylesheet" href="jquery.treeview.css" type="text/css"></link>  
   <link rel="stylesheet" href="screen.css" type="text/css"></link>  
   <script type="text/javascript" src="jquery.js"></script>  
   <script type="text/javascript" src="jquery.cookie.js"></script>  
   <script type="text/javascript" src="jquery.treeview.js"></script>  
   <script type="text/javascript" src="jquery.treeview.async.js"></script>  
   <style type="text/css">  
   a{  
     text-decoration:none;  
     color:#000000;  
   }  
   a:active{  
     color:#ff0000;  
   }  
   </style>  
   <script type="text/javascript">  
     $(document).ready(function(){  
         $("#treeview").treeview({  
             url:"/treeviewtest/user/servlet/treeajax"  
         });  
     });  
   </script>  
 </head>  
   
 <body>  
   <ul id="treeview" class="filetree"></ul>  
 </body>  

后台代码：

    Java代码   
    
  
 String id = request.getParameter("root"); //treeview自动提交root参数为当前节点的id，如果是根节点，则为source  
   
 //生成json格式数据  
 private String toJSONString(Category category){  
         StringBuilder sb = new StringBuilder();  
         sb.append("{");  
         sb.append("\"id\":\""+category.getCatId()+"\"");  
         sb.append(",\"text\":\""+generateLinkString(category)+"\"");  
         sb.append(",\"classes\":\""+category.getCssClass()+"\"");  
         sb.append(",\"expanded\":false");  
         sb.append(",\"hasChildren\":"+category.hasChild());  
         if(!"".equals(category.getImageName())){  
             sb.append(",\"imagepath\":\"url("+category.getImageName()+")\"");  
 //imagepath是自己加的，用于显示不同的图标，jquery.treeview.async.js文件需要修改  
         }  
         sb.append("}");  
         return sb.toString();  
     }  

修改jquery.treeview.async.js显示个性化图标：

    Js代码   
    
  
 function load(settings, root, child, container) {  
     $.getJSON(settings.url, {root: root}, function(response) {  
         function createNode(parent) {  
             var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);  
             if (this.classes) {  
                 current.children("span").addClass(this.classes);  
             }  
             if(this.imagepath) {//这里是加的，后台代码是如果显示默认图标，没有imagepath这项，如果显示子定义图标，imagepath是图标的路径。  
                 current.children("span").css("background-image", this.imagepath);  
             }  
             if (this.expanded) {  
                 current.addClass("open");  
             }  
             if (this.hasChildren || this.children && this.children.length) {  
                 var branch = $("<ul/>").appendTo(current);  
                 if (this.hasChildren) {  
                     current.addClass("hasChildren");  
                     createNode.call({  
                         text:"placeholder",  
                         id:"placeholder",  
                         children:[]  
                     }, branch);  
                 }  
                 if (this.children && this.children.length) {  
                     $.each(this.children, createNode, [branch])  
                 }  
             }  
         }  
         $.each(response, createNode, [child]);  
         $(container).treeview({add: child});  
     });  
 }  

weisljl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件TreeView异步加载树

给出两个官网，可以去看看教程。http://docs.jquery.com/Plugins/Treeviewhttp://bassistance.de/jquery-plugins/jquery-plugin-treeview/jsp页面：Java代码 "stylesheet" href="jquery.treeview.css
复制链接

扫一扫