JsTree是一個jquery的插件，它提交一個非常友好並且強大的交互性的樹，並且是完全免費或開源的（MIT 許可）。Jstree技持Html 或 json格式的的數據， 或者是ajax方式的動態請求加載數據。
1、支持基於HTML定義、Json、XML方式加載樹節點
2、支持拖放，動態增加、刪除、重命名樹節點
3、支持復選框
4、支持復制、剪切、粘貼樹節點，動態刷新樹
5、提供足夠的回調方法：
6、此外，jsTree有極強的擴展性，可以自定義插件支持更廣泛的應用
一.Getting started
1.1 下載jstree
從官網下載最新的版本，目前最新的版本為3.3.3，下載完成后，打開壓縮包，將dist/下所有文件復制到你想到使用的地方
https://github.com/vakata/jstree/zipball/3.3.3
1.2 引用jstree及jquery
jstree是jquery的一個插件，所以首先要引用jquery
<script src="jquery.min.js"></script>
<script src="dist/jstree.min.js"></script>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
1.3 在頁面中定義jstree的容器，可以使用div定義
<div id="jstree_demo_div"></div>
1.4 在頁面加載后好，可以初始化jstree
Once the DOM is ready you can start creating jstree instances.
$(function () { $('#jstree_demo_div').jstree(); });
二、JsTree常用的配置及操作
jstree可以在初始化時接收一些配置，以達到我們業務上想用的效果，例如如下配置：
2.1 使用json格式構建jstree
使用json構建jstree里，一種可以使用ajax請求的方式構建, 一種可以使用有父子嵌套關系的json格式的數據構建， 另外一種可以使用非嵌套關系的json格式數據構建(我認為這種最方便)
如果你不想使用嵌套父子關系的json ,你可以使用這種非嵌套方式的， 每個node只有兩個屬性是必需的: id 和parent, 其他都是可選的，不需要 children屬性，jstree會自動構建層級關系。 可以將node的parent屬性設置為"#",表示為一個root節點。
這種方式非常適用於從數據庫中加載出來的數據，可以非常方便的構建整個樹。
示例代碼：
$('#using_json_2').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } });
2.2 綁定事件
可以使用jquery方式綁定 jstree支持的事件，這里抱怨下，jstree的api文檔寫的並不好，有時得需要翻源代碼才可以知道用法。
比如上圖這個changed.jstree事件， 這個是官網提供的api,從這個api上看，我還以為是這個event會有4個回調參數，其實並不是，翻看了原代碼后才知道，只有2個參數event和data。可以通過data.action、data.selected、data.node 取相應的參數。
以下是jstree源碼中的觸發這個changed事件的方法。
綁定事件的方式：
$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected); });
常用事件：
事件 作用 應用場景
select_node.jstree 當一個node被選用時觸發 當點擊某個節點時執行一個動作。
在網上搜索，很多資料寫的是綁定click.jstree,其實在官網的api里，click.jstree並沒有支持，
這里應該使用select_node.jstree
changed.jstree 當selection changes時，或者刪除節點、 可以監聽jstree的改變，例如jstree改變時可以同步
更新數據庫中的節點情況
create_node.jstree 當節點被創建時觸發
delete_node.jstree 當節點被刪除時觸發
rename_node.jstree 當一個node被重命名時觸發
更多api請參考https://www.jstree.com/api/
2.3jstree插件
jstree非常靈活，允許用戶自己自定義插件的方式擴展想要的功能，當然本身已提供了很多插件，基本覆蓋了業務中常用的功能。更多插件請參考https://www.jstree.com/plugins/
插件的啟用方式：
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
完整代碼如：
$('#jstree1').jstree({
"plugins" : [ "wholerow","themes"]
});
2.4擴展contextmenu插件
自定義右鍵菜單需求：在鼠標經過節點時，在右側顯示一個下拉的箭頭，當點擊下拉箭頭時可以彈出右鍵菜單，當然直接在節點上右鍵也是可以彈出菜單的。這個效果類似於微信企業號中通訊錄的功能。
這個需求需要擴展jstree中自帶的contextmenu插件才可以實現，最簡單的方式就是直接把jstree里的contextmenu復制一份，在這個基礎上改，另外也需要改右鍵菜單的樣式。
完整代碼請下載附件
2.5常用的jstree操作
常用的操作有創建節點、刪除、重命名、上移、下移等。
<html> <head> <link rel="stylesheet" href="jstree/themes/default/style.min.css" /> <script type="application/javascript" src="jquery-2.1.1.min.js"></script> <script type="application/javascript" src="jstree/jstree.js"></script> <script> $(function() { $('#jstree1').jstree({ "core":{ "data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"夏宇信息"},{"id":"69","parent":"0","text":"工程"},{"id":"5","parent":"0","text":"行政"},{"id":"71","parent":"0","text":"迷"},{"id":"1","parent":"0","text":"技術"}], "themes" : { "variant" : "large",//加大 "ellipsis" : true //文字多時省略 }, "check_callback" : true }, "plugins" : [ "wholerow","themes"] }).on('select_node.jstree', function(event, data) { console.log(data.node); }).on('changed.jstree', function(event,data) { console.log("-----------changed.jstree"); console.log("action:" + data.action); console.log(data.node); }); }); function create(){ var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); currNode = ref.create_node(currNode, {"type":"file"}); if(currNode) { ref.edit(currNode); } } function rename(){ var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); ref.rename_node(currNode,"rename node222"); } function del(){ var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); ref.delete_node(currNode); } function moveup(){ var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); var prevNode = ref.get_prev_dom(currNode,true); ref.move_node(currNode,prevNode,'before'); } function movedown(){ var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); var nextNode = ref.get_next_dom(currNode,true);//返回兄弟節點的下一個節點 ref.move_node(currNode,nextNode,'after'); } /** * 獲取當前所選中的結點 */ function _getCurrNode(){ var ref = $('#jstree1').jstree(true), sel = ref.get_selected(); console.log(sel); if(!sel.length) { console.log("----"); return false; } sel = sel[0]; return sel; } </script> </head> <body> <input type="button" value="create node" onclick="create();"> <input type="button" value="rename node" onclick="rename();"> <input type="button" value="del node" onclick="del();"> <input type="button" value="上移" onclick="moveup();"> <input type="button" value="下移" onclick="movedown();"> <div id="jstree1" style="width:200px;background:#fff322"></div> </body> </html>
---------------------
作者：yiding123
原文：https://blog.csdn.net/yiding123/article/details/84831263
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！