Ztree使用教程

時間  2021-01-02
標籤 javascript php css html 前端 java node jquery web ajax 欄目 JavaScript 简体版
原文   原文鏈接

這兩天項目須要寫一個樹形幫助，學習了咱們項目組的老師的Ztree的樹的寫法，實現了這個幫助，下面來總結一下Ztree的用法。javascript

（也是參考的一篇csdn上的博客了）php

zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。被普遍應用在系統的權限管理中，本文講解zTree的通常應用css

zTree 官網 http://www.treejs.cn/v3/main.php#_zTreeInfohtml

一、zTree 官網下載 ztree

 

下載好後放到項目相關目錄下前端

二、編寫相關代碼

引入相關js 、 css 文件，代碼以下:java

<!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>
		
	</body>
</html>

上述代碼中的 css 還能夠引入以下兩種、它們分別具備不一樣的樣式node

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

　或jquery

<link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />

　快速實現一個簡單的樹，請看以下代碼，相關配置說明已寫在代碼中web

<!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" />
     <!--
     其餘兩種css風格樣式
     <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.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>

　　運行效果以下圖ajax

三、使用ajax獲取數據

實際項目開發中，數據每每是從後臺服務器獲取的，而不是在前端寫死的。如何實現ajax獲取數據，請看以下代碼

數據庫表結構及數據以下

後臺接口代碼以下

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" />
      <!--
      其餘兩種css風格樣式
      <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.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>

　運行效果以下

四、設置默認選中節點

在開發中，有時咱們須要默認選中一些節點。好比修改用戶角色或權限時，就會有這樣的需求，如何對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" />
      <!--
      其餘兩種css風格樣式
      <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.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>

　　運行效果

 

 

 其餘內容可參考官網API

在這裏聲明一下版權

————————————————
版權聲明：本文爲CSDN博主「悟世君子」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/wsjzzcbq/article/details/83029532

 

以上都是學習人家寫的內容了，我介紹一下我在項目中對Ztree的一些理解。

首先，我須要寫一個js讓我跳到我想選擇的樹的頁面裏面去，而且從樹的頁面裏面獲取到我所須要的返回值。

// 選擇員工
function selectDeviceType() {
    var msg = "選擇人員";
    $.dialog({
        type: 'iframe',
        url: context + "/jsp/genersoft/public/health/HealthRyDepartment.jsp",
        title: msg,
        width: 580,
        height: 400,
        onclose: function () {
            var nodes = this.returnValue;
            $("#healthUserId").val(nodes[0].ORGAN_ID);
            $("#username").val(nodes[0].ORGAN_NAME);
            $("#healthOrgId").val(nodes[0].GRANDPA_ID);
            $("#departmentname").val(nodes[0].GRANDPA_NAME);
            $("#username").change();
        }
    });
 }

　　接下來，就是咱們選擇幫助的頁面，在這個頁面裏，須要初始化一下Ztree，構造一下Ztree的數據屬性，寫個ajax，給他一個後臺的url，讓他查數據，返回到前臺來，再構造這個樹。

事先須要引一些js

<script type="text/javascript" src="<l:asset path='jquery.js'/>"></script>
<script type="text/javascript" src="<l:asset path='bootstrap.js'/>"></script>
<script type="text/javascript" src="<l:asset path='form.js'/>"></script>
<script type="text/javascript" src="<l:asset path='ui.js'/>"></script>
<script type="text/javascript" src="<l:asset path='loushang-framework.js'/>"></script>
<script type="text/javascript" src="<l:asset path='i18n.js'/>"></script>
<script type="text/javascript" src="<l:asset path='ztree.js'/>"></script>

　而後，初始化Ztree，構造這個樹。

<SCRIPT LANGUAGE="JavaScript">
        var context = "<l:assetcontext/>";
        var dialog = parent.dialog.get(window);
        var zTreeObj;
        var setting = {

            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all",
                chkboxType: {"Y": "s", "N": "s"}
            }
        };

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }

        // zTree 的數據屬性，深刻使用請參考 API 文檔（zTreeNode 節點數據詳解）
        var zNodes = [
            {
                name: "test1",
                open: true,
                children: [
                    {
                    	name:"test1_1",
                    	open:true,
                    	children: [
                            {name: "test1_1_1"},
                            {name: "test1_1_2"}
                        ]
                    },
                    {
                    	name:"test1_2",
                    	open:true,
                    	children: [
                            {name: "test1_2_1"},
                            {name: "test1_2_2"}
                        ]
                    },
                    
                ]
            },
            {
                name: "test2",
                open: true,
                children: [
                    {
                    	name:"test2_1",
                    	open:true,
                    	children: [
                            {name: "test2_1_1"},
                            {name: "test2_1_2"}
                        ]
                    },
                    {
                    	name:"test2_2",
                    	open:true,
                    	children: [
                            {name: "test2_2_1"},
                            {name: "test2_2_2"}
                        ]
                    },
                    
                ]
            },
        ];

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: context + "/service/health/treeData2",
                data: {},
                dataType: "json",
                aysn: false,
                success: function (respMsg) {
                    zNodes = respMsg;
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    var node = zTreeObj.getNodeByParam("name", '${param.name}', null);
                    if (node){//判斷有查詢到節點
                        //方法一：
                        // $("#"+node.tId+"_a").click();//點擊查詢到的節點
                        //方法二：
                        zTreeObj.selectNode(node,true);//選
                        // node.checked = true;
                        // zTreeObj.updateNode(node);
                }}
            });
            // var zTreeMenu = $.fn.zTree.getZTreeObj("treeDemo");//根據treeID（zTree的DOM容器的id）獲取
            //zTree對象的方法,必須初始化zTree纔可使用此方法
            // var treeObj = $.fn.zTree.getZTreeObj("tree");
            // var node = zTreeObj.getNodeByParam("id", 1, null);
            // var node=zTreeObj.getNodeByParam('name',,null);

            // 肯定按鈕
            $("#confirm").click(function () {
                confirm();
            });

            // 取消按鈕
            $("#clear").click(function () {
                clear();
            });
        });

        // 肯定按鈕
        function confirm() {
            var msg = L.getLocaleMessage("bsp.organ.053", "請選擇單個節點！");
            var selectedNodes = zTreeObj.getCheckedNodes();
            if (selectedNodes.length != 1) {
                $.sticky(msg, {
                    autoclose: 1000,
                    position: "center",
                    style: "warning"
                });
                return false;
            }
            if(selectedNodes["0"].STRU_LEVEL!="4"){
            	 $.sticky("請選擇職工", {
                     autoclose: 1000,
                     position: "center",
                     style: "warning"
                 });
                 return false;
            }

            dialog.close(selectedNodes);
            dialog.remove();
        }

        // 取消
        function clear() {
            var dialog = parent.dialog.get(window);
            dialog.close("clear");
            dialog.remove();
            return false;
        }
    </SCRIPT>
</HEAD>
<BODY>
<div>
    <ul id="treeDemo" class="ztree"></ul>
    <div class="foot">
        <div class="btnGroup">
            <button id="confirm" type="button" class="btn ue-btn"><spring:message code="bsp.organ.046"
                                                                                          text="肯定"/></button>
            <button id="clear" type="button" class="btn ue-btn"><spring:message code="bsp.organ.048"
                                                                                text="清除"/></button>
        </div>
    </div>
</div>
</BODY>
</HTML>

跳後臺url，並對數據作一下拼接。

Contrller層

@Controller
@RequestMapping(value = "/health")
public class HealthController {
	@Autowired
	private IHealthService healthService;
	/**
     * 列表跳轉頁面
     * 
     * @return 列表頁面
     */
	@RequestMapping
    public String queryHealth() {
        return "genersoft/public/health/healthQuery";
    }
	
    @RequestMapping({"/treeData2"})
    @ResponseBody
    public List treeData2(HttpServletRequest req) {
        return healthService.getTypeTreeData2("");
    }

}

Service層

@Service("healthService")
public class HealthServiceImpl implements IHealthService{

	@Autowired
	private HealthMapper healthMapper;
	@Override
	@Override
	public List getTypeTreeData2(String struId) {
		// TODO Auto-generated method stub
		List<Map<String,Object>> list = healthMapper.getTreeData2();
		List<Map> resList = new ArrayList<>();
		//單位list
		List<Map<String,Object>> UnitList=new ArrayList<Map<String,Object>>();
		//部門list
		List<Map<String,Object>> DepartmentList=new ArrayList<Map<String,Object>>();
		//崗位list
		List<Map<String,Object>> PostList=new ArrayList<Map<String,Object>>();
		//人員list
		List<Map<String,Object>> PersonList=new ArrayList<Map<String,Object>>();
		for(Map<String,Object> unit:list) {
			if(Integer.parseInt(String.valueOf(unit.get("STRU_LEVEL")))==1) {
				UnitList.add(unit);
			}
		}
		for(Map<String,Object> department:list) {
			if(Integer.parseInt(String.valueOf(department.get("STRU_LEVEL")))==2) {
				DepartmentList.add(department);
			}
		}
		for(Map<String,Object> post:list) {
			if(Integer.parseInt(String.valueOf(post.get("STRU_LEVEL")))==3) {
				PostList.add(post);
			}
		}
		for(Map<String,Object> person:list) {
			if(Integer.parseInt(String.valueOf(person.get("STRU_LEVEL")))==4) {
				PersonList.add(person);
			}
		}
		List<Map<String, Object>> temp1List=new  ArrayList<Map<String, Object>>();
		List<Map<String, Object>> temp3List=new  ArrayList<Map<String, Object>>();
		List<Map<String, Object>> temp5List=new  ArrayList<Map<String, Object>>();
		for(Map<String,Object> temp6:DepartmentList) {
		for(Map<String, Object> temp1:PostList) {	
			List<Map<String,Object>> greatgrandsonList=new ArrayList<Map<String,Object>>();
			greatgrandsonList.clear();
			for(Map<String,Object> temp2:PersonList) {
				if(temp2.get("PARENT_ID").equals(temp1.get("ORGAN_ID"))) {
					temp2.put("name",temp2.get("ORGAN_NAME"));
					temp2.put("PARENT_NAME", temp1.get("ORGAN_NAME"));
					if(temp1.get("PARENT_ID").equals(temp6.get("ORGAN_ID"))) {
					temp2.put("GRANDPA_ID", temp6.get("ORGAN_ID"));
					temp2.put("GRANDPA_NAME", temp6.get("ORGAN_NAME"));
					}
					greatgrandsonList.add(temp2);
				}
			}
			temp1.put("children", greatgrandsonList);
			temp1List.add(temp1);
		}
	}
		System.out.println(temp1List);
		System.out.println(1);
		for(Map<String,Object> temp3:DepartmentList) {
			List<Map<String,Object>> grandsonList=new ArrayList<Map<String,Object>>();
			grandsonList.clear();
			for(Map<String,Object> temp4:PostList) {
				if(temp4.get("PARENT_ID").equals(temp3.get("ORGAN_ID"))) {
					temp4.put("name",temp4.get("ORGAN_NAME"));
					temp4.put("PARENT_NAME", temp3.get("ORGAN_NAME"));
					grandsonList.add(temp4);
				}
			}
			temp3.put("children", grandsonList);
			//System.out.println(temp3);
			temp3List.add(temp3);
		}
		System.out.println(temp3List);
		System.out.println(1);
		for(Map<String,Object> temp5:UnitList) {
			List<Map<String,Object>> sonList=new ArrayList<Map<String,Object>>();
			temp5.put("name",temp5.get("ORGAN_NAME"));
			sonList.clear();
			for(Map<String,Object> temp6:DepartmentList) {
				if(temp6.get("PARENT_ID").equals(temp5.get("ORGAN_ID"))) {
					temp6.put("name",temp6.get("ORGAN_NAME"));
					temp6.put("PARENT_NAME", temp5.get("ORGAN_NAME"));
					sonList.add(temp6);
				}
			}
			temp5.put("children", sonList);
			//System.out.println(temp5);
			temp5List.add(temp5);
		}
		System.out.println(temp5List);
		resList.addAll(temp5List);
		return resList;
	}
}

這個地方有幾個點須要注意一下：

１.讓他返回成一個父親節點帶着一個子節點的數據格式，要對數據進行一個拼接，返回數據的格式是以下的形式

[{STRU_ID=1, ORGAN_ID=1, 
children=[{STRU_ID=２, ORGAN_ID=２, 
children=[{STRU_ID=３, ORGAN_ID=３, 
children=[{STRU_ID=４, GRANDPA_ID=２, ORGAN_ID=４, PARENT_NAME=崗位, name=ａ, STRU_LEVEL=4, ORGAN_NAME=ａ, 
PARENT_ID=３, GRANDPA_NAME=２}]
}]
}]
}]

　他的下一層規定寫爲children，這個是Ztree的數據屬性，最好寫死寫成children。

２.在後臺拼接的時候，須要給每一個節點的name屬性附上值

temp5.put("name",temp5.get("ORGAN_NAME"));

　　若是不給name賦值，則在前臺顯示的時候會出現undefined的狀況。

３.而後是獲取選擇節點的屬性值的方法，以下：

var selectedNodes = zTreeObj.getCheckedNodes();

　　其餘的就沒什麼了，that's all，暫時寫到這，想起來再補充。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程