JSTree使用
孙玮
JSTree使用
1、jstree.js 下载地址:https://www.jstree.com/
2、当然，jstree.js的使用肯定是离不开jquery.js的。不过下载好的包里是包含了jquery.js的。
3、一些相关的插件，简单说下几个常用的：
Checkbox:复选框
Dnd：可拖拽功能
Contextmenu:菜单功能
4、由于要求做一个支持菜单功能、可拖拽、增删改节点功能的属性菜单，所以本次值用到了Checkbox、Dnd、Contextmenu这三个，当然由于期间还用到弹出框功能，就使用jqueryUI的dialog所以还需要引入jquery-ui.js。
5、下面就是代码了:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./resources/css/style.min.css" />
<link rel="stylesheet" href="./resources/css/jquery-ui.css" />
<script type="text/javascript" src="./resources/js/jQuery-1.12.4.js"></script>
<script type="text/javascript" src="./resources/js/jquery-ui.js"></script>
<script type="text/javascript" src="./resources/js/jstree.js"></script>
<script type="text/javascript"
src="./resources/js/jstree.contextmenu.js"></script>
<script type="text/javascript" src="./resources/js/jstree.checkbox.js"></script>
<script type="text/javascript" src="./resources/js/jstree.dnd.js"></script>
<script type="text/javascript" src="./resources/js/jstree.state.js"></script>
<script type="text/javascript" src="./resources/js/jstree.types.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="demoTree"></div>
<div id="addNode" style="display: none;" title="Add/Update Node">
<table>
<tr>
<td><input type="hidden" name="parent" id="parent" /> <input
type="hidden" name="nodeId" id="nodeId" /> Name:<input type="text"
name="nodeName" id="nodeName" /></td>
</tr>
</table>
</div>
<div id="message" style="display: none;" title="Delete Node">
<h1>Sure to Delete ?</h1>
</div>
<div id="move" style="display: none;" title="Move Node">
<h1>Sure to Move ?</h1>
</div>
</body>
</html>
这里主要就是页面html块，主要的树的节点所在呢，就是ID为demoTree的DIV了；然后后面的ID为addNode、message、move的三个DIV主要是用来弹出框的，分别是增加和修改节点功能、确定删除、确定移动。
6、以下是JavaScript块：
$("#demoTree").on('move_node.jstree', function(e,data){
console.info(data);
moveNode(data);
}).jstree({
'core':{
'check_callback' : true,
'data': {
"url" : "./getNodeListJson.htm",
"dataType" : "json"
}
},
'plugins' : ['themes','json_data','checkbox','ui','contextmenu','dnd', 'state', 'types'],
'contextmenu' : {
'select_node' : false,
'show_at_node' : true,
'items':{
"create":{
'separator_before' : false,
'separator_after' : true,
'_disabled' : false,
'label':'Add',
'action':function(data){
$("#nodeId").val("");
$("#parent").val("");
$("#nodeName").val("");
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
$("#parent").val(obj.id);
$("#addNode").dialog("open");
}
},
'remove':{
'separator_before' : false,
'separator_after' : true,
'_disabled' : false,
'label' : 'Delete',
'action':function(data){
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
deleteNode(obj.id);
}
},
'rename':{
'separator_before' : false,
'separator_after' : true,
'_disabled' : false,
'label':'Update',
'action':function(data){
$("#nodeId").val("");
$("#parent").val("");
$("#nodeName").val("");
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);//获得当前节点,可以拿到当前节点所有属性
$("#nodeId").val(obj.id);
$("#nodeName").val(obj.text);
$("#addNode").dialog("open");
}
}
}
}
});
这里主要就是给DIV加载树了；首先给树绑定了一个’move_node.jstree’，这个是用于给树加上拖拽功能，里面的moveNode(data)主要是一个确定移动的弹框以及ajax请求。当然拖拽功能还需要在jstree内的core加上这一属性，否则会拖拽不了。
'core':{
'check_callback' : true,
'data': {
"url" : "./getNodeListJson.htm",
"dataType" : "json"
}
},
首先，树的数据就是通过图中data的url请求服务端获取的json数据，当然这个json数据是要遵循一定的格式的，我的是根据下载好的包中的demo的root.json的格式拼接的。
再看plugins，这里主要就是声明你要用的哪些插件
下面主要说一下contextmenu：
Select_node：是指是否选中当前节点
Show_at_node:是指是否在当前节点展示菜单
Items：是指菜单元素
Items自带的几个节点就是create、remove、rename。
separator_before、separator_after:是指是否在菜单元素前或后加上分割线
Label：这个就是菜单元素的名称了
Action：是指这个菜单元素下的一系列操作了
7、弹出框:
$(function(){
$("#addNode").dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
var nodeId = $("#nodeId").val();
var parent = $("#parent").val();
var nodeName = $("#nodeName").val();
if(null == nodeName || "" == nodeName){
alert("Name is null");
return;
}
$.ajax({
url : './saveNode.htm',
data : {
'nodeId' : nodeId,
'parent': parent,
'name' : nodeName
},
type : 'POST',
dataType : 'json',
success : function(data){
if(data.result == 'success'){
alert("Done success");
window.location.reload();
}else if(data.result == 'fail'){
alert("Done failed");
}else{
alert(data.result);
}
}
});
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
这个就是给div绑定弹出框功能。
8、整体效果图，由于历史比较久远，后续补上
类似资料：