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
jstree官方地址：https://www.jstree.com
bootstrap官方地址：https://v3.bootcss.com
从官网下载最新的版本，目前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下所有文件复制到你想到使用的地方
<script src=" jquery.min.js "></script>
<script src=" dist/jstree.min.js "></script>
<link rel="stylesheet" href=" dist/themes/default/style.min.css " />
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>
（0）