zTree异步加载(自定义图片)

原文链接：https://blog.csdn.net/qq_37936542/article/details/78429675

zTree官网：点击打开链接


一：文件下载

点击首页右下角的ztree download，选择Guihub下载


点击Clone or download下载





二：相关包介绍

jquery.ztree.core-3.x.js   核心包（必须）

jquery.ztree.excheck-3.x.js  扩展包--实现复选框的功能（可选）

jquery.ztree.exedit-3.x.js    扩展包--实现编辑功能，例如删除、重命名等（可选）

zTreeStyle.css  定义zTree样式（必须）


导入zTree文件夹的时候，最好将下载的整个文件夹放到js下面，因为zTree的css依赖img也在文件夹中



三：页面准备容器

[html] view plain copy
  1. <div>  
  2.    <ul id="ztree" class="ztree"></ul>  
  3. </div>  

这里需要注意class需要设置为ztree，否则可能会导致树的css样式不起作用



四：引入相关js、css文件

[html] view plain copy
  1. <!-- ztree的css -->  
  2. <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">  
  3. <!-- jquery和ztree相关js -->  
  4. <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>  
  5. <script src="js/ztree/js/jquery.ztree.core-3.5.min.js"></script>  
  6. <script src="js/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>  
  7. <script src="js/ztree/js/jquery.ztree.exedit-3.5.min.js"></script>  


五：js代码

   

[html] view plain copy
  1. $(function() {  
  2.         initTree();  
  3.         var zTreeObj;  
  4.         //初始化根节点    
  5.         function initTree() {  
  6.             $.get("/demo/ztree/initTree.do", function(data) {  
  7.                 zTreeObj = $.fn.zTree.init($("#ztree"), setting, data);  
  8.                 //zTreeObj.expandAll(true); //直接展开树结构  
  9.             });  
  10.         }  
  11.         var setting = {  
  12.   
  13.             check : {//定义是否显示单选和复选框  
  14.                 enable : true,  
  15.                 chkStyle : "checkbox",  
  16.                 chkboxType : {//勾选 checkbox 对于父子节点的关联关系  
  17.                     "Y" : "s",  
  18.                     "N" : "s"  
  19.                 }  
  20.             /*单选框的设置  
  21.             chkStyle : "radio",  
  22.             radioType : "all"  // radio 的分组范围  
  23.              */  
  24.             },  
  25.             view : {//显示相关的属性配置    
  26.                 selectedMulti : false  
  27.             },  
  28.             data : {//节点数据系列的属性配置    
  29.                 key : {  
  30.                     selectedMulti : false,//设置是否允许同时选中多个节点  
  31.                     showLine : false,//设置 zTree 是否显示节点之间的连线  
  32.                 },  
  33.                 simpleData : {  
  34.                     enable : true,  
  35.                     idKey : "id",//节点数据中保存唯一标识的属性名称  默认值："id"  
  36.                     pIdKey : "pId"//节点数据中保存其父节点唯一标识的属性名称  默认值："pId"  
  37.                 }  
  38.             },  
  39.             edit : {//编辑状态的属性配置    
  40.                 drag : {  
  41.                     isCopy : false  
  42.                 },  
  43.                 enable : true,  
  44.                 showRenameBtn : false,//设置是否显示编辑名称按钮  
  45.                 renameTitle: "编辑节点名称",//编辑名称按钮的 Title 辅助信息  
  46.                 showRemoveBtn : false,//设置是否显示删除按钮  
  47.                 removeTitle: "删除节点",//删除按钮的 Title 辅助信息  
  48.             },  
  49.             async : {//异步加载数据操作    
  50.                 enable : true,//设置 zTree 是否开启异步加载模式  
  51.                 url : "/demo/ztree/getTree.do",//Ajax 获取数据的 URL 地址  
  52.                 autoParam : [ "id" ],//异步加载时需要自动提交的参数  
  53.                 type : "get",//Ajax 的 http 请求模式  
  54.                 dataFilter : ajaxDataFilter,//用于对 Ajax 返回数据进行预处理的函数  
  55.                 dataType : "json"  
  56.             },  
  57.             //回调函数    
  58.             callback : {  
  59.                 beforeCheck : beforeCheck,//用于捕获 勾选 或 取消勾选 之前的事件回调函数  
  60.                 onCheck : onCheck,//用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数  
  61.                 onClick: onClick,//用于捕获节点被点击的事件回调函数  
  62.                 onAsyncSuccess: onAsyncSuccess,//用于捕获异步加载正常结束的事件回调函数  
  63.                 onRightClick : onRightClick,//用于捕获 zTree 上鼠标右键点击之后的事件回调函数  
  64.             }  
  65.         };  
  66.           
  67.         // 异步加载数据过滤器  
  68.         function ajaxDataFilter(treeId, parentNode, responseData) {  
  69.             return responseData;  
  70.         };  
  71.   
  72.         //check选中前触发  
  73.         function beforeCheck(treeId, treeNode) {  
  74.             if(treeNode.isParent){//如果选中的是父节点，不让选中  
  75.                 return false;  
  76.             }  
  77.         };  
  78.           
  79.         //check选中时触发  
  80.         function onCheck(event, treeId, treeNode) {  
  81.             nodes = zTreeObj.getCheckedNodes(true);//获取所有选中的节点  
  82.             if(nodes[0] != null){  
  83.                 console.log(nodes[0].id + ", " + nodes[0].name);//打印第一个选中节点的id  
  84.             }  
  85.         };  
  86.           
  87.         //点击触发  
  88.         function onClick(event, treeId, treeNode) {  
  89.             console.log(treeNode.id + ", " + treeNode.name);  
  90.         };  
  91.           
  92.         //异步加载完成触发  
  93.         function onAsyncSuccess(event, treeId, treeNode, msg) {  
  94.             console.log(msg);  
  95.         };  
  96.   
  97.         //右击触发  
  98.         function onRightClick(event, treeId, treeNode) {  
  99.             //treeNode:鼠标右键点击时所在节点的 JSON 数据对象,如果不在节点上，則返回null  
  100.             console.log(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");  
  101.         }  
  102.   
  103.     })  


六：css代码（自定义图片）

 

[html] view plain copy
  1. <style>  
  2. .ztree li span.button.icon1_ico_close {  
  3.     margin-right: 2px;  
  4.     background: url(img/school.png) no-repeat scroll 0 0  
  5.         transparent;  
  6.     vertical-align: top;  
  7.     *vertical-align: middle  
  8. }  
  9.   
  10. .ztree li span.button.icon1_ico_open {  
  11.     margin-right: 2px;  
  12.     background: url(img/school.png) no-repeat scroll 0 0  
  13.         transparent;  
  14.     vertical-align: top;  
  15.     *vertical-align: middle  
  16. }  
  17.   
  18. .ztree li span.button.icon2_ico_close {  
  19.     margin-right: 2px;  
  20.     background: url(img/close.png) no-repeat scroll 0 0  
  21.         transparent;  
  22.     vertical-align: top;  
  23.     *vertical-align: middle  
  24. }  
  25. .ztree li span.button.icon2_ico_open {  
  26.     margin-right: 2px;  
  27.     background: url(img/open.png) no-repeat scroll 0 0  
  28.         transparent;  
  29.     vertical-align: top;  
  30.     *vertical-align: middle  
  31. }  
  32.   
  33. .ztree li span.button.icon3_ico_docu {  
  34.     margin-right: 2px;  
  35.     background: url(img/man.png) no-repeat scroll 0 0  
  36.         transparent;  
  37.     vertical-align: top;  
  38.     *vertical-align: middle  
  39. }  
  40.   
  41. .ztree li span.button.icon4_ico_docu {  
  42.     margin-right: 2px;  
  43.     background: url(img/women.png) no-repeat scroll 0 0  
  44.         transparent;  
  45.     vertical-align: top;  
  46.     *vertical-align: middle  
  47. }  
  48.   
  49. </style>  


七：定义数节点对象


[html] view plain copy
  1. package com.debo.ztree;  
  2.   
  3. public class Node {  
  4.     // 节点id  
  5.     private Integer id;  
  6.     // 父节点id  
  7.     private Integer pId;  
  8.     // 节点名称  
  9.     private String name;  
  10.     // 需要自定义图片时，使用该属性  
  11.     private String iconSkin;  
  12.     // 设置是否是父节点  
  13.     private Boolean isParent;  
  14.     // 当需要设置某个节点被选中的时候，通过该属性定义  
  15.     private Boolean checked;  
  16.     public Integer getId() {  
  17.         return id;  
  18.     }  
  19.     public void setId(Integer id) {  
  20.         this.id = id;  
  21.     }  
  22.     public Integer getpId() {  
  23.         return pId;  
  24.     }  
  25.     public void setpId(Integer pId) {  
  26.         this.pId = pId;  
  27.     }  
  28.     public String getName() {  
  29.         return name;  
  30.     }  
  31.     public void setName(String name) {  
  32.         this.name = name;  
  33.     }  
  34.     public String getIconSkin() {  
  35.         return iconSkin;  
  36.     }  
  37.     public void setIconSkin(String iconSkin) {  
  38.         this.iconSkin = iconSkin;  
  39.     }  
  40.     public Boolean getIsParent() {  
  41.         return isParent;  
  42.     }  
  43.     public void setIsParent(Boolean isParent) {  
  44.         this.isParent = isParent;  
  45.     }  
  46.     public Boolean getChecked() {  
  47.         return checked;  
  48.     }  
  49.     public void setChecked(Boolean checked) {  
  50.         this.checked = checked;  
  51.     }  
  52.   
  53. }  



八：后台逻辑代码：模拟数据，以json格式的数据返回到jsp


[html] view plain copy
  1. package com.debo.ztree;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.stereotype.Controller;  
  7. import org.springframework.web.bind.annotation.RequestMapping;  
  8. import org.springframework.web.bind.annotation.RequestMethod;  
  9. import org.springframework.web.bind.annotation.RequestParam;  
  10. import org.springframework.web.bind.annotation.ResponseBody;  
  11.   
  12. @RequestMapping("/ztree")  
  13. @Controller  
  14. public class ZtreeController {  
  15.       
  16.       
  17.       
  18.     @ResponseBody  
  19.     @RequestMapping(value="/initTree",method=RequestMethod.GET)  
  20.     public Node initTree(){  
  21.           
  22.         Node node = new Node();  
  23.         node.setId(0);  
  24.         node.setName("皇家大学");  
  25.         node.setIconSkin("icon1");  
  26.         node.setIsParent(true);  
  27.         node.setChecked(false);  
  28.           
  29.         return node;  
  30.     }  
  31.       
  32.     @RequestMapping("getTree")  
  33.     @ResponseBody  
  34.     public List<Node> getTree(@RequestParam("id")int id){  
  35.         //根据id去后台查询子节点,我在这直接模仿子节点数据  
  36.         List<Node> list = new ArrayList<Node>();  
  37.         if(id == 0){  
  38.             Node node = new Node();  
  39.             node.setId(1);  
  40.             node.setpId(0);  
  41.             node.setName("数计学院");  
  42.             node.setIconSkin("icon2");  
  43.             node.setIsParent(true);  
  44.               
  45.             Node node1 = new Node();  
  46.             node1.setId(2);  
  47.             node1.setpId(0);  
  48.             node1.setName("体育学院");  
  49.             node1.setIconSkin("icon2");  
  50.             node1.setIsParent(true);  
  51.               
  52.             list.add(node1);  
  53.             list.add(node);  
  54.         }  
  55.         if(id == 1){  
  56.             Node node = new Node();  
  57.             node.setId(3);  
  58.             node.setpId(1);  
  59.             node.setName("迪丽热巴");  
  60.             node.setIconSkin("icon4");  
  61.             node.setIsParent(false);  
  62.               
  63.             Node node1 = new Node();  
  64.             node1.setId(4);  
  65.             node1.setpId(1);  
  66.             node1.setName("胡歌");  
  67.             node1.setIconSkin("icon3");  
  68.             node1.setIsParent(false);  
  69.               
  70.             list.add(node1);  
  71.             list.add(node);  
  72.         }  
  73.         if(id == 2){  
  74.             Node node = new Node();  
  75.             node.setId(5);  
  76.             node.setpId(2);  
  77.             node.setName("刘翔");  
  78.             node.setIconSkin("icon3");  
  79.             node.setIsParent(false);  
  80.               
  81.             Node node1 = new Node();  
  82.             node1.setId(6);  
  83.             node1.setpId(2);  
  84.             node1.setName("郭晶晶");  
  85.             node1.setIconSkin("icon4");  
  86.             node1.setIsParent(false);  
  87.               
  88.             list.add(node1);  
  89.             list.add(node);  
  90.         }  
  91.           
  92.         return list;  
  93.     }  
  94.       
  95.   
  96. }  


九：效果图


文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：jianshu.com/p/e8197d4d9

福利二：微信小程序入门与实战全套详细视频教程。


【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。


原文作者：祈澈姑娘
原文链接：jianshu.com/u/05f416aef
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。






posted @ 2018-04-02 15:30  前端视听  阅读(819)  评论(0)  编辑  收藏  举报