jstree外掛對樹操作增刪改查的使用
阿新 • • 發佈：2020-11-24
參考答案網址：（謝謝大家分享）
1.https://blog.csdn.net/qq_27717967/article/details/79167605 有例子；不僅增刪改；還有搜尋功能（下載的例子一定要放到專案裡面；不然資料出不來）
2.https://blog.csdn.net/sinat_25552937/article/details/89947604
3.https://www.cnblogs.com/telwanggs/p/7447483.html
4.https://blog.csdn.net/yiding123/article/details/84831263
1、外掛說明
jstree官方地址：https://www.jstree.com
bootstrap官方地址：https://v3.bootcss.com
一.Getting started
1.1 下載jstree
從官網下載最新的版本，目前最新的版本為3.3.3，下載完成後，開啟壓縮包，將dist/下所有檔案複製到你想到使用的地方
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定義
<divid="jstree_demo_div"></div>1.4 在頁面載入後好，可以初始化jstree
$(function () {$('#jstree_demo_div').jstree();});1.5一些相關的外掛，簡單說下幾個常用的：
Checkbox:複選框
Dnd：可拖拽功能
Contextmenu:選單功能
二、專案實踐
html程式碼
<input type="button" value="建立" onclick="create()" > <input type="button" value="重新命名" onclick="rename()" > <input type="button" value="刪除" onclick="del()" > <input type="button" value="上移" onclick="moveup()"> <input type="button" value="下移" onclick="movedown()" > <div id="jstree1" style="width:200px;background:#fff322" ></div>
javascript
1 <script> 2 $(function() { 3 //建立例項樹 4 $('#jstree1').jstree({ 5 "core":{ 6 "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":"技術"}], 7 "themes" : { 8 "variant" : "large",//加大 9 "ellipsis" : true //文字多時省略 10 }, 11 "check_callback" : true//設定為true,當用戶修改數時,允許所有的互動和更好的控制(例如增刪改) 12 }, 13 "plugins" : [ "wholerow","themes",'themes','json_data','contextmenu','dnd', 'state', 'types'] 14 ,"contextmenu":{ 15 select_node:false, 16 show_at_node:true, 17 items:{ 18 "新建選單":{ 19 "label":"新建選單", 20 "icon": "glyphicon glyphicon-plus", 21 "action":function(data){ 22 var inst = $.jstree.reference(data.reference), 23 obj = inst.get_node(data.reference); 24 inst.create_node(obj, {}, "last", function (new_node) { 25 try { 26 new_node.text="新建裝置"; 27 inst.edit(new_node); 28 } catch (ex) { 29 setTimeout(function () { inst.edit(new_node); },0); 30 } 31 }); 32 } 33 }, 34 "修改選單":{ 35 "separator_before" : false, 36 "separator_after" : false, 37 "_disabled" : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")), 38 "label" : "修改選單", 39 "shortcut_label" : 'F2', 40 "icon" : "glyphicon glyphicon-leaf", 41 "action" : function (data) { 42 var inst = $.jstree.reference(data.reference), 43 obj = inst.get_node(data.reference); 44 inst.edit(obj); 45 } 46 }, 47 "刪除選單":{ 48 "separator_before" : false, 49 "icon" : false, 50 "separator_after" : false, 51 "_disabled" : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")), 52 "label" : "刪除選單", 53 "icon" :"glyphicon glyphicon-remove", 54 "action" : function (data) { 55 var inst = $.jstree.reference(data.reference), 56 obj = inst.get_node(data.reference); 57 if(inst.is_selected(obj)) { 58 inst.delete_node(inst.get_selected()); 59 } 60 else { 61 inst.delete_node(obj); 62 } 63 } 64 } 65 } 66 }, 67 }).on('select_node.jstree', function(event, data) { 68 console.log(data.node); 69 }).on('changed.jstree', function(event,data) { 70 console.log("-----------changed.jstree"); 71 console.log("action:" + data.action); 72 console.log(data.node); 73 }); 74 }); 75 76 77 function create(){ 78 var ref = $('#jstree1').jstree(true); 79 var currNode = _getCurrNode(); 80 currNode = ref.create_node(currNode, {"type":"file"}); 81 if(currNode) { 82 ref.edit(currNode); 83 } 84 } 85 86 function rename(){ 87 var ref = $('#jstree1').jstree(true); 88 var currNode = _getCurrNode(); 89 ref.edit(currNode); 90 } 91 92 function del(){ 93 var ref = $('#jstree1').jstree(true); 94 var currNode = _getCurrNode(); 95 ref.delete_node(currNode); 96 } 97 98 function moveup(){ 99 var ref = $('#jstree1').jstree(true); 100 var currNode = _getCurrNode(); 101 var prevNode = ref.get_prev_dom(currNode,true); 102 ref.move_node(currNode,prevNode,'before'); 103 } 104 105 function movedown(){ 106 var ref = $('#jstree1').jstree(true); 107 var currNode = _getCurrNode(); 108 var nextNode = ref.get_next_dom(currNode,true);//返回兄弟節點的下一個節點 109 ref.move_node(currNode,nextNode,'after'); 110 } 111 112 /** 113 * 獲取當前所選中的結點 114 */ 115 function _getCurrNode(){ 116 var ref = $('#jstree1').jstree(true), 117 sel = ref.get_selected(); 118 console.log(sel); 119 if(!sel.length) { 120 console.log("----"); 121 return false; 122 } 123 sel = sel[0]; 124 return sel; 125 } 126 </script>