樹狀圖插件

1. jsTree

介紹
jsTree是一個 基於jQuery的Tree控件。支持XML,JSON,Html三種數據源。提供創建,重命名,移動,刪除,拖"放節點操作。可以自己自定義創建,刪 除,嵌套,重命名,選擇節點的規則。在這些操作上可以添加多種監聽事件。

使用方式

引入jq以及jstree js文件和css文件

<link rel="stylesheet" href="jstree/themes/default/style.min.css">
<script src="js/jquery.min.js"></script>
<script src="jstree/js/jstree.js"></script>

事件

 // 展開節點
$("#jstree").on("loaded.jstree", function (event, data) {
    // 展開所有節點
    //$('#jstree').jstree('open_all');
    // 展開指定節點
    //data.instance.open_node(1);     // 單個節點 (1 是頂層的id)
    data.instance.open_node([1, 10]); // 多個節點 (展開多個幾點只有在一次性裝載後所有節點後纔可行)1:從第一個節點開始 10:展開節點數,最大爲總的節點數
});

// 所有節點都加載完後
$("#jstree").on("ready.jstree", function (event, data) {
  
});
//注:loaded和ready的區別:
//loaded:首次加載根節點後觸發
//ready:所有節點加載完成後觸發

// 獲得點擊節點的id  id爲數據結構中的id
$('#jstree').on("changed.jstree", function (e, data) {
    console.log("The selected nodes are:");
    console.log(data.selected);
    alert('node.id is:' + data.node.id);
    alert('node.text is:'+data.node.text);
    console.log(data);
});

//綁定點擊事件2
 $("#jstree").jstree({
     "core":{
         "data":treeData
     }
 }).bind('select_node.jstree', function (event, data) {  //綁定的點擊事件
     console.log(data,"=>data")
 });

API

  • $("#jstree").jstree().get_theme():取得當前激活即使用的主題
  • $("#jstree").jstree().set_theme(name, url):設置主題
  • $("#jstree").jstree().show_dots(),,:顯示樹邊框的點
  • $("#jstree").jstree().hide_dots():隱藏樹邊框的點
  • $("#jstree").jstree().toggle_dots()激活樹邊框的點
  • $("#jstree").jstree().show_icons(),,:顯示樹的圖標
  • $("#jstree").jstree().hide_icons():隱藏樹的圖標
  • $("#jstree").jstree().toggle_icons():激活樹的圖標

示例

  1. 將html轉換成樹狀圖
<div id="jstree">
        <ul>
            <li>root
                <ul>
                    <li>root1
                        <ul>
                            <li>child1-1</li>
                            <li>child1-2</li>
                        </ul>
                    </li>
                    <li>root2
                        <ul>
                            <li>child2-1</li>
                            <li>child2-2</li>
                            <li>child2-3</li>
                        </ul>
                    </li>
                    <li>root3</li>
                </ul>
            </li>
        </ul>
    </div>
 $("#jstree").jstree()

效果圖:
在這裏插入圖片描述
2. 動態數據轉換成樹狀圖

    <div id="jstree"></div>
    <script>
        var treeData = [
            {
                id:0,
                text:"root",
                children:[
                    {
                        id:1,
                        text:"root1",
                        children:[
                            {id:"1-1",text:"child1-1"},
                            {id:"1-2",text:"child1-2"},
                        ]
                    },
                    {
                        id:2,
                        text:"root2",
                        children:[
                            {id:"2-1",text:"child2-1"},
                            {id:"2-2",text:"child2-2"},
                            {id:"2-3",text:"child2-3"},
                        ]
                    }
                ]
            }
        ];

        $("#jstree").data("jstree",false).empty();
        $("#jstree").jstree({
            "core":{
                "data":treeData
            }
        })
    </script>

效果圖:
在這裏插入圖片描述

  1. 帶有圖標以及禁用的樹狀圖
 <div id="jstree">
        <ul>
            <li>root
                <ul>
                    <li data-jstree='{"icon":"//jstree.com/tree.png"}'>root1
                        <ul>
                            <li data-jstree='{"disabled":true}'>child1-1</li>
                            <li>child1-2</li>
                        </ul>
                    </li>
                    <li>root2
                        <ul>
                            <li>child2-1</li>
                            <li>child2-2</li>
                            <li>child2-3</li>
                        </ul>
                    </li>
                    <li>root3</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
         $("#jstree").jstree();
    </script>

效果圖:
在這裏插入圖片描述

官網地址:https://www.jstree.com/
Github地址:https://github.com/vakata/jstree

2. zTree

介紹
一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。專門適合項目開發,尤其是 樹狀菜單、樹狀數據的Web顯示、權限管理等等。

特點

  1. zTree v3.0 將核心代碼按照功能進行了分割,不需要的代碼可以不用加載
  2. 採用了延遲加載技術,上萬節點輕鬆加載,即使在 IE6 下也能基本做到秒殺
  3. 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
  4. 支持 JSON 數據
  5. 支持靜態和 Ajax 異步加載節點數據
  6. 支持任意更換皮膚 / 自定義圖標(依靠css)
  7. 支持極其靈活的 checkbox 或 radio 選擇功能
  8. 提供多種事件響應回調
  9. 靈活的編輯(增/刪/改/查)功能,可隨意拖拽節點,還可以多節點拖拽喲
  10. 在一個頁面內可同時生成多個 Tree 實例
  11. 簡單的參數配置實現 靈活多變的功能

使用
引入js以及css文件

<link rel="stylesheet" href="ztree/css/zTreeStyle.css">
<script src="js/jquery.min.js"></script>
<script src="ztree/jquery.ztree.core.js"></script>

參數設置

一. zTree的 setting 配置詳解

var setting = {
	 treeId : "", //zTree 的唯一標識,初始化後,等於 用戶定義的 zTree 容器的 id 屬性值。
	 //請勿進行初始化 或 修改,屬於內部參數。 
	 treeObj : null, //zTree 容器的 jQuery 對象,主要功能:便於操作。
	 //請勿進行初始化 或 修改,屬於內部參數。
 	 async : { // 是否異步加載 相當於ajax
		autoParam : [], //可以設置提交時的參數名稱,例如 server 只接受 zId : ["id=zId"] ; 默認值空
		contentType : "application...",
		dataFilter : null,
		dataType : "text",
		enable : false,//設置 zTree 是否開啓異步加載模式  默認值:false
		otherParam : [],//其他參數 ;直接用 JSON 格式製作鍵值對,例如:{ key1:value1, key2:value2 }
		type : "post",  //請求方式
		url : ""  //路徑
	 },
 	 callback : { //返回函數; 根據需求選擇合適的監聽事件  //以下事件默認權威null 事件例子參見第83行
		beforeAsync : null,//異步加載之前的事件回調函數,zTree 根據返回值確定是否允許進行異步加載
		beforeCheck : null,//勾選 或 取消勾選 之前的事件回調函數,並且根據返回值確定是否允許 勾選 或 取消勾選
		beforeClick : null,//單擊節點之前的事件回調函數,並且根據返回值確定是否允許單擊操作
		beforeCollapse : null,//父節點摺疊之前的事件回調函數,並且根據返回值確定是否允許摺疊操作
		beforeDblClick : null,// zTree 上鼠標雙擊之前的事件回調函數,並且根據返回值確定觸發 onDblClick 事件回調函數
		beforeDrag : null,//節點被拖拽之前的事件回調函數,並且根據返回值確定是否允許開啓拖拽操作
		beforeDragOpen : null,//拖拽節點移動到摺疊狀態的父節點後,即將自動展開該父節點之前的事件回調函數,並且根據返回值確定是否允許自動展開操作
		beforeDrop : null,//節點拖拽操作結束之前的事件回調函數,並且根據返回值確定是否允許此拖拽操作
		beforeEditName : null,//節點編輯按鈕的 click 事件,並且根據返回值確定是否允許進入名稱編輯狀態
		beforeExpand : null,//父節點展開之前的事件回調函數,並且根據返回值確定是否允許展開操作
		beforeMouseDown : null,// zTree 上鼠標按鍵按下之前的事件回調函數,並且根據返回值確定觸發 onMouseDown 事件回調函數
		beforeMouseUp : null,//zTree 上鼠標按鍵鬆開之前的事件回調函數,並且根據返回值確定觸發 onMouseUp 事件回調函數
		beforeRemove : null,//節點被刪除之前的事件回調函數,並且根據返回值確定是否允許刪除操作
		beforeRename : null,//節點編輯名稱結束(Input 失去焦點 或 按下 Enter 鍵)之後,更新節點名稱數據之前的事件回調函數,並且根據返回值確定是否允許更改名稱的操作
		beforeRightClick : null,// zTree 上鼠標右鍵點擊之前的事件回調函數,並且根據返回值確定觸發 onRightClick 事件回調函數
		onAsyncError : null,//異步加載出現異常錯誤的事件回調函數
		onAsyncSuccess : null,//異步加載正常結束的事件回調函數
		onCheck : null,// checkbox / radio 被勾選 或 取消勾選的事件回調函數
		onClick : null,//節點被點擊的事件回調函數
		onCollapse : null,//節點被摺疊的事件回調函數
		onDblClick : null,// zTree 上鼠標雙擊之後的事件回調函數
		onDrag : null,//節點被拖拽的事件回調函數
		onDragMove : null,//節點被拖拽過程中移動的事件回調函數
		onDrop : null,//節點拖拽操作結束的事件回調函數
		onExpand : null,//節點被展開的事件回調函數
		onMouseDown : null,// zTree 上鼠標按鍵按下後的事件回調函數
		onMouseUp : null,// zTree 上鼠標按鍵鬆開後的事件回調函數
		onNodeCreated : null,//節點生成 DOM 後的事件回調函數
		onRemove : null,//刪除節點之後的事件回調函數。
		onRename : null,//節點編輯名稱結束之後的事件回調函數。
		onRightClick : null// zTree 上鼠標右鍵點擊之後的事件回調函數
	 }, 
    /*例. 節點勾選或取消事件 
		function zTreeOnCheck(event, treeId, treeNode) {
			alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
			//event js event 對象標準的 js event 對象
	       //treeId  String 對應 zTree 的 treeId,便於用戶操控
	       //treeNode  JSON 被勾選 或 取消勾選的節點 JSON 數據對象
		};
		var setting = {
			callback: {
				onCheck: zTreeOnCheck
			}
		};
	 */
 	 check : { //設置zTree是否可以被勾選,及勾選的參數配置
		 autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。		[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
		chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 對於父子節點的關聯關係。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效]
		chkStyle : "checkbox",//勾選框類型(checkbox 或 radio)[setting.check.enable = true 時生效]
		enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio  默認值: false
		nocheckInherit : false//當父節點設置 nocheck = true 時,設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效]
		chkDisabledInherit : false//當父節點設置 chkDisabled = true 時,設置子節點是否自動繼承 chkDisabled = true 。[setting.check.enable = true 時生效]
		radioType : "level"//radio 的分組範圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效]
	 },
 	  data : { //非常重要
		keep : {  //子節點和父節點屬性設置 默認值都爲false
  			 leaf : false,//zTree 的節點葉子節點屬性鎖,是否始終保持 isParent = false
 			 parent : false//zTree 的節點父節點屬性鎖,是否始終保持 isParent = true
		},
		key : {  //節點數據
  			 checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱。
 			 children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。
  			 name : "name",//zTree 節點數據保存節點名稱的屬性名稱。
 			 title : ""  //zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效]
 			 url : "url"  //設置 zTree 顯示節點時,將 treeNode 的 xUrl 屬性當做節點鏈接的目標 URL
		},
		simpleData : {
  			 enable : false,//確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)
  			 idKey : "id",//節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
 			 pIdKey : "pId",//節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]
 			 rootPId : null//用於修正根節點父節點數據,即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]
		}
	 },
	  edit : { //可以編輯節點 : 增 刪 改
		drag : {
			autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效]
			isCopy : true,//拖拽時, 設置是否允許複製節點。[setting.edit.enable = true 時生效]
			isMove : true,//拖拽時, 設置是否允許移動節點。[setting.edit.enable = true 時生效]
			prev : true,  //拖拽到目標節點時,設置是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效]
			next : true,  //拖拽到目標節點時,設置是否允許移動到目標節點後面的操作。[setting.edit.enable = true 時生效]
			inner : true,  //拖拽到目標節點時,設置是否允許成爲目標節點的子節點。[setting.edit.enable = true 時生效]
			borderMax : 10,//拖拽節點成爲根節點時的 Tree 內邊界範圍 (單位:px)。[setting.edit.enable = true 時生效]
			borderMin : -5,//拖拽節點成爲根節點時的 Tree 外邊界範圍 (單位:px)。[setting.edit.enable = true 時生效]
			minMoveSize : 5,//判定是否拖拽操作的最小位移值 (單位:px)。[setting.edit.enable = true 時生效]
			maxShowNodeNum : 5,//拖拽多個兄弟節點時,浮動圖層中顯示的最大節點數。 多餘的節點用...代替。[setting.edit.enable = true 時生效]
			autoOpenTime : 500//拖拽時父節點自動展開的延時間隔。 (單位:ms)[setting.edit.enable = true 時生效]

		},
		editNameSelectAll : false,
		enable : false,//設置 zTree 是否處於編輯狀態,true / false 分別表示 可以 / 不可以 編輯
		removeTitle : "remove",//刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效]
		renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效]
		showRemoveBtn : true,//設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效]
		showRenameBtn : true//設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效]
	},
 	 view : {
		addDiyDom : null,//用於在節點上固定顯示用戶自定義控件
		addHoverDom : null,//用於當鼠標移動到節點上時,顯示用戶自定義控件,顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
		autoCancelSelected : true,//點擊節點時,按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。
		dblClickExpand : true,//雙擊節點時,是否自動展開父節點的標識
		expandSpeed : "fast",//zTree 節點展開、摺疊時的動畫速度,設置方法同 JQuery 動畫效果中 speed 參數。
		fontCss : {},  //個性化文字樣式,只針對 zTree 在節點上顯示的<A>對象。
		nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本
		removeHoverDom : null,//用於當鼠標移出節點時,隱藏用戶自定義控件,顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
		selectedMulti : true,//設置是否允許同時選中多個節點。
		showIcon : true,//設置 zTree 是否顯示節點的圖標。
		showLine : true,//設置 zTree 是否顯示節點之間的連線。
		showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。
		txtSelectedEnable : false//設置 zTree 是否允許可以選擇 zTree DOM 內的文本。
	 }
}

示例

<ul id="tree"  class="ztree"></ul>//必須得加上類名:ztree
<script>
        var setting = {};
        var zNodes =[
            { name:"父節點1 - 展開", open:true,
                children: [
                    { name:"父節點11 - 摺疊",
                        children: [
                            { name:"葉子節點111"},
                            { name:"葉子節點112"},
                            { name:"葉子節點113"},
                            { name:"葉子節點114"}
                        ]},
                    { name:"父節點12 - 摺疊",
                        children: [
                            { name:"葉子節點121"},
                            { name:"葉子節點122"},
                            { name:"葉子節點123"},
                            { name:"葉子節點124"}
                        ]},
                    { name:"父節點13 - 沒有子節點", isParent:true}
                ]},
            { name:"父節點2 - 摺疊",
                children: [
                    { name:"父節點21 - 展開", open:true,
                        children: [
                            { name:"葉子節點211"},
                            { name:"葉子節點212"},
                            { name:"葉子節點213"},
                            { name:"葉子節點214"}
                        ]},
                    { name:"父節點22 - 摺疊",
                        children: [
                            { name:"葉子節點221"},
                            { name:"葉子節點222"},
                            { name:"葉子節點223"},
                            { name:"葉子節點224"}
                        ]},
                    { name:"父節點23 - 摺疊",
                        children: [
                            { name:"葉子節點231"},
                            { name:"葉子節點232"},
                            { name:"葉子節點233"},
                            { name:"葉子節點234"}
                        ]}
                ]},
            { name:"父節點3 - 沒有子節點", isParent:true}

        ];
        $(document).ready(function(){
            $.fn.zTree.init($("#tree"), setting, zNodes);
        });
        </script>

效果圖:
在這裏插入圖片描述
完整示例:
百度網盤
鏈接:https://pan.baidu.com/s/1C6MNyfqAGBz6p_oaKDN3og
提取碼:yyfc

官網地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
Github地址:https://github.com/zTree/zTree_v3

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章