function create(el) {
var ref = $(el).jstree(true);
var currNode = _getCurrNode(el);
currNode = ref.create_node(currNode, {
"type": "file"
});
if (currNode) {
ref.edit(currNode);
}
}
function rename(el) {
var ref = $(el).jstree(true);
var currNode = _getCurrNode(el);
ref.rename_node(currNode, "rename");
}
function del(el) {
var ref = $(el).jstree(true);
var currNode = _getCurrNode(el);
ref.delete_node(currNode);
}
function moveup(el) {
var ref = $(el).jstree(true);
var currNode = _getCurrNode(el);
var prevNode = ref.get_prev_dom(currNode, true);
ref.move_node(currNode, prevNode, 'before');
}
function movedown(el) {
var ref = $(el).jstree(true);
var currNode = _getCurrNode(el);
var nextNode = ref.get_next_dom(currNode, true);
ref.move_node(currNode, nextNode, 'after');
}
function _getCurrNode(el) {
var ref = $(el).jstree(true),
sel = ref.get_selected();
if (!sel.length) {
console.log("未点击父节点");
return false;
}
return sel[0];
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./easyui-lib/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui-lib/themes/icon.css">
<link rel="stylesheet" href="./tree-lib/themes/default/style.min.css">
<script type="text/javascript" src="./easyui-lib/jquery.min.js"></script>
<script type="text/javascript" src="./easyui-lib/jquery.easyui.min.js"></script>
<script src="./tree-lib/jstree.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="win" class="easyui-window" title="My Window" data-options="iconCls:'icon-save',modal:true">
<div class="easyui-layout" data-options="fit:true" style="display: flex;">
<div data-options="region:'west',split:true" style="width:300px;">
<div id="jstree1"></div>
</div>
<div data-options="region:'center'">
<table id="dg"></table>
</div>
</div>
</div>
<div id="mm" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
<div data-options="name:'new'">新建</div>
<div data-options="name:'del'">删除</div>
<div data-options="name:'rename'">重命名</div>
<div data-options="name:'up'">上移</div>
<div data-options="name:'down'">下移</div>
</div>
</body>
<script src="./js/tree-util.js"></script>
<script>
var el = "#jstree1"
function menuHandler(item) {
switch (item.name) {
case "new":
create(el);
break;
case "del":
del(el);
break;
case "rename":
rename(el);
break;
case "up":
moveup(el);
break;
case "down":
movedown(el);
break;
default:
break;
}
}
$('#dg').datagrid({
columns: [
[{
field: 'code',
title: 'Code',
width: 100
}, {
field: 'name',
title: 'Name',
width: 100
}, {
field: 'age',
title: 'age',
width: 100,
align: 'right'
}]
],
});
$('#win').window({
width: 600,
height: 400,
modal: true,
maximized: true,
});
$(function() {
$(document).bind("contextmenu", function(e) {
$('#mm').menu('show', {
left: e.clientX,
top: e.clientY
});
return false;
});
$("#jstree1").jstree({
"core": {
"check_callback": true,
"data": [{
"id": "0",
"parent": "#",
"state": {
"disabled": false,
"opened": true,
"selected": false,
},
"text": "组成"
}, {
"id": "1",
"parent": "0",
"text": "财务部"
}, {
"id": "2",
"parent": "0",
"text": "销售部"
}, {
"id": "3",
"parent": "0",
"text": "市场部"
}, {
"id": "4",
"parent": "0",
"text": "人事行政部"
}, {
"id": "5",
"parent": "0",
"text": "售前服务部"
}, {
"id": "6",
"parent": "0",
"text": "开发部"
}],
"themes": {
"variant": "large",
"ellipsis": true
},
"check_callback": true
},
"plugins": ["wholerow", "themes", "contextmenu", "dnd"]
}).on('select_node.jstree', function(event, data) {
}).on('changed.jstree', function(event, data) {
})
});
</script>
</html>