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()
:激活樹的圖標
示例
- 將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>
效果圖:
- 帶有圖標以及禁用的樹狀圖
<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顯示、權限管理等等。
特點
- zTree v3.0 將核心代碼按照功能進行了分割,不需要的代碼可以不用加載
- 採用了延遲加載技術,上萬節點輕鬆加載,即使在 IE6 下也能基本做到秒殺
- 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
- 支持 JSON 數據
- 支持靜態和 Ajax 異步加載節點數據
- 支持任意更換皮膚 / 自定義圖標(依靠css)
- 支持極其靈活的 checkbox 或 radio 選擇功能
- 提供多種事件響應回調
- 靈活的編輯(增/刪/改/查)功能,可隨意拖拽節點,還可以多節點拖拽喲
- 在一個頁面內可同時生成多個 Tree 實例
- 簡單的參數配置實現 靈活多變的功能
使用
引入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