JsTree是一個jquery的插件，它提交一個很是友好而且強大的交互性的樹，而且是徹底免費或開源的（MIT 許可）。Jstree技持Html 或 json格式的的數據， 或者是ajax方式的動態請求加載數據。
一、支持基於HTML定義、Json、XML方式加載樹節點
二、支持拖放，動態增長、刪除、重命名樹節點
三、支持複選框
四、支持複製、剪切、粘貼樹節點，動態刷新樹
五、提供足夠的回調方法：
六、此外，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(); });
2、JsTree經常使用的配置及操做
jstree能夠在初始化時接收一些配置，以達到咱們業務上想用的效果，例如以下配置：javascript
2.1 使用json格式構建jstree
使用json構建jstree裏，一種可使用ajax請求的方式構建, 一種可使用有父子嵌套關係的json格式的數據構建， 另一種可使用非嵌套關係的json格式數據構建(我認爲這種最方便)
若是你不想使用嵌套父子關係的json ,你可使用這種非嵌套方式的， 每一個node只有兩個屬性是必需的: id 和parent, 其餘都是可選的，不須要 children屬性，jstree會自動構建層級關係。 能夠將node的parent屬性設置爲"#",表示爲一個root節點。
這種方式很是適用於從數據庫中加載出來的數據，能夠很是方便的構建整個樹。css
示例代碼：
$('#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事件的方法。html
綁定事件的方式：
$('#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複製一份，在這個基礎上改，另外也須要改右鍵菜單的樣式。java
完整代碼請下載附件
2.5經常使用的jstree操做
經常使用的操做有建立節點、刪除、重命名、上移、下移等。node
<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
版權聲明：本文爲博主原創文章，轉載請附上博文連接！jquery