ztree 使用教程

朱雀 2022-05-06 02:30 188阅读 0赞

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用

[zTree][] 官网 [http://www.treejs.cn/v3/main.php\#\_zTreeInfo][zTree]

### 1、zTree 官网下载 ztree ###

![70][]

![70 1][]

下载好后放到项目相关目录下

![70 2][]

### 2、编写相关代码 ###

引入相关js 、 css 文件，代码如下:

上述代码中的 css 还可以引入如下两种、它们分别具有不同的样式

或

本文，根据博主个人习惯引入metroStyle.css

快速实现一个简单的树，请看如下代码，相关配置说明已写在代码中

<!DOCTYPE html>
    <html>
       <head>
         <meta charset="utf-8" />
         <title></title>
         <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
         <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
         
          <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script> 
        </head>
        <body>
            <div>
               <ul id="treeDemo" class="ztree"></ul>
            </div>
            <script>
               var settingss = {
                                data: {
                                  simpleData: {
                                    enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                                    idKey: "id",  //节点数据中保存唯一标识的属性名称
                                    pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称  
                                    rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                              },
                                  key: {
                                    name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                                       }
                                      },
                                check:{
                                    enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                                    nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                                      }
                                };
    					
                //数据
                var zNodes = [
                   //注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
                   {menuName:"父节点1", open:true, children:[
                       {menuName:"子节点1"}, {menuName:"子节点2"}]},
                   {menuName:"父节点2", open:true, children:[
                       {menuName:"子节点3"}, {menuName:"子节点4"}]}
                   ];
    					
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树
                zTreeObj.expandAll(true);    //true 节点全部展开、false节点收缩
           </script>
       </body>
    </html>

运行效果如下图

![70 3][]

### 3、使用ajax获取数据 ###

实际项目开发中，数据往往是从后台服务器获取的，而不是在前端写死的。如何实现ajax获取数据，请看如下代码

数据库表结构及数据如下

![70 4][]

后台接口代码如下

mapper层

import java.util.List;
    import org.apache.ibatis.annotations.Select;
    import com.che.pri.bean.MenuTest;
    
    public interface MenuTestMapper {
    	
    	@Select("select id as id, parent_id as parentId, menu_name as menuName from menu_test")
    	List<MenuTest> getMenuTestList();
    
    }

controller层

import java.util.HashMap;
    import java.util.Map;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.che.pri.mapper.MenuTestMapper;
    @Controller
    public class MenuTestController {
    	
    	@Autowired
    	private MenuTestMapper menuTestMapper;
    
    	@ResponseBody
    	@RequestMapping("/getMenuTestList")
    	public Object getMenuTestList() {
    		Map<String, Object> map = new HashMap<String, Object>();
    		map.put("menulists", menuTestMapper.getMenuTestList());
    		return map;
    	}
    	
    }

html代码如下

<!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title></title> 
          <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
          <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
          
          <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
      </head>
          <body>
            <div>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <script>
                var settingss = {
                    data: {
                        simpleData: {
                            enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 
                            idKey: "id",   //节点数据中保存唯一标识的属性名称
                            pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 
                            rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                    },
                        key: {
                            name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                             }
                           },
                    check:{
                           enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                           nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                          }
                                };
    							
                $(document).ready(function(){
                   $.ajax({
                        type:"get",
                        url:"http://localhost:8089/getMenuTestList",
                        async:true,
                        success:function(res){
    			    		
                         zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树
                         zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
                                             }
                        });
                });			        
           </script>
       </body>
    </html>

运行效果如下

![70 5][]

### 4、设置默认选中节点 ###

在开发中，有时我们需要默认选中一些节点。比如修改用户角色或权限时，就会有这样的需求，如何对ztree的节点进行默认选中，请看如下代码

var node = zTreeObj.getNodeByParam("id", 7);
     zTreeObj.checkNode(node, true, false);

通过每一条节点数据的 id 进行设置

具体看如下代码

<!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title></title> 
          <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
          <link rel="stylesheet" href="ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
          
          <script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js" ></script>
      </head>
          <body>
            <div>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <script>
                var settingss = {
                    data: {
                        simpleData: {
                            enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式 
                            idKey: "id",   //节点数据中保存唯一标识的属性名称
                            pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称 
                            rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                                    },
                        key: {
                            name: "menuName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                             }
                           },
                    check:{
                           enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
                           nocheckInherit:true   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
                          }
                                };
    							
                $(document).ready(function(){
                   $.ajax({
                        type:"get",
                        url:"http://localhost:8089/getMenuTestList",
                        async:true,
                        success:function(res){
    			    		
                         zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, res.menulists); //初始化树
                         zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
    
                         //设置选中节点
                         var node = zTreeObj.getNodeByParam("id", 7);
                         zTreeObj.checkNode(node, true, false); 
                             
                         var node = zTreeObj.getNodeByParam("id", 1);
                         zTreeObj.checkNode(node, true, false); 
                             
                         var node = zTreeObj.getNodeByParam("id", 4);
                         zTreeObj.checkNode(node, true, false); 
                                             }
                        });
                });			        
           </script>
       </body>
    </html>

运行效果

![70 6][]

其他内容可参考官网API

[zTree]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[70]: /images/20220506/6b0f5432ceaf46f2b7873044c490dc55.png
[70 1]: /images/20220506/410756a3f48f44b2a4d239f79d16baca.png
[70 2]: /images/20220506/4ea19b3db1b34f6b9b6a00e9108b3296.png
[70 3]: /images/20220506/b1c834fce9bc4f348989c0edc75c6fb8.png
[70 4]: /images/20220506/6bbfa3262d1549949bbd800af39a53ca.png
[70 5]: /images/20220506/cf0a0617cb3941888b7f99d6c54e8375.png
[70 6]: /images/20220506/fe088d91e8794c3085450c64e7eac811.png