jsTree使用記錄實(shí)例

更新時(shí)間：2016年12月01日 10:18:38 作者：hejinwei_1987

本文通過實(shí)例給大家詳細(xì)介紹了jstree的使用技巧，需要的朋友可以參考下本文

1. ajax請求生成jsTree

[javascript] view plain copy
<span style="font-size:14px;"><script> 
 var r = []; // 權(quán)限樹中被選中的葉子節(jié)點(diǎn) 
 var currentGroupId; 
 function showPermitTree(id) { 
 currentGroupId = id; 
 $.ajax({ 
 data : "currentGroupId=" + id, 
 type : "POST", 
 //dataType : 'json', 
 url : "/test/permittree", 
 error : function(data) { 
  alert("出錯(cuò)了！！:" + data); 
 }, 
 success : function(data) { 
  //alert("success:" + data); 
  createPermitTree(data); 
 } 
 }); 
 ${'buttonDiv'}.style.display=""; 
 } 
 function createPermitTree(datastr) { 
 datastr = eval("" + datastr + ""); 
 $('#permitTree').jstree({ 
 'plugins' : [ "wholerow", "checkbox", "types" ], 
 'core' : { 
  "themes" : { 
  "responsive" : false 
  }, 
  'data' : datastr 
 }, 
 "types" : { 
  "default" : { 
  "icon" : "fa fa-folder icon-state-warning icon-lg" 
  }, 
  "file" : { 
  "icon" : "fa fa-file icon-state-warning icon-lg" 
  } 
 } 
 }); 
 } 
 // listen for event 
 $('#permitTree').on('changed.jstree', function(e, data) { 
 r = []; 
 var i, j; 
 for (i = 0, j = data.selected.length; i < j; i++) { 
 var node = data.instance.get_node(data.selected[i]); 
 if (data.instance.is_leaf(node)) { 
  r.push(node.id); 
 } 
 } 
 //alert('Selected: ' + r.join('@@')); 
 }) 
 function saveTree() { 
 $.ajax({ 
 data : {'currentGroupId' : currentGroupId, 
  'selectedNodes' : r.join('@@')}, 
 type : "POST", 
 //dataType : 'json', 
 url : "/test/savetree", 
 error : function(data) { 
  alert("出錯(cuò)了！！:" + data); 
 }, 
 success : function(data) { 
  alert("保存成功!"); 
 } 
 }); 
 } 
 </script></span><span style="font-size:24px;"> 
</span>

直接把測試項(xiàng)目中一段代碼copy過來了，這是一棵帶復(fù)選框的樹。頁面有地方點(diǎn)擊之后觸發(fā)showPermitTree(id)函數(shù)，發(fā)送ajax請求給后臺，項(xiàng)目使用的是springmvc框架，后臺返回JSONArray.toString。

2. jsTree change事件

上面代碼中含change事件。把所有選中的節(jié)點(diǎn)的id放到一個(gè)數(shù)組中。

頁面上有個(gè)按鈕，點(diǎn)擊后觸發(fā)saveTree函數(shù)，發(fā)請求給后臺，把選中的節(jié)點(diǎn)的id發(fā)給后臺。

3.jsTree自定義contextmenu

[javascript] view plain copy
<script> 
$('#jstree').jstree({ 
 core : { 
 check_callback : true, 
 data : [ 
 { "id" : "1", "parent" : "#", "text" : "root" }, 
 { "id" : "2", "parent" : "1", "text" : "child 1" }, 
 { "id" : "3", "parent" : "1", "text" : "child 2" } 
 ], 
 }, 
 plugins : ["wholerow","contextmenu"], 
 "contextmenu": { 
 "items": { 
 "create": null, 
 "rename": null, 
 "remove": null, 
 "ccp": null, 
 "add": { 
  "label": "add", 
  "action": function (obj) { 
  var inst = jQuery.jstree.reference(obj.reference); 
  var clickedNode = inst.get_node(obj.reference); 
  alert("add operation--clickedNode's id is:" + clickedNode.id); 
  } 
 }, 
 "delete": { 
  "label": "delete", 
  "action": function (obj) { 
  var inst = jQuery.jstree.reference(obj.reference); 
  var clickedNode = inst.get_node(obj.reference); 
  alert("delete operation--clickedNode's id is:" + clickedNode.id); 
  } 
 } 
 } 
 } 
}).on("ready.jstree", function (e, data) { 
 data.instance.open_all(); 
}); 
</script>

這段代碼使用jsTree的contextmenu plugin，去掉jsTree自帶的菜單，并自定義菜單