Treejs+EasyUI+Vuejs实操
Posted 昵称正在加载中。。。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Treejs+EasyUI+Vuejs实操相关的知识，希望对你有一定的参考价值。
// 创建节点
function create(el)
// 获取 treejs 的实例
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(
// url: './jsonp/datagrid_data.json',
// data: [
// "code": 1,
// "name": "a",
// "age": 12
// ,
// "code": 1,
// "name": "a",
// "age": 12
// ],
columns: [
[
field: 'code',
title: 'Code',
width: 100
,
field: 'name',
title: 'Name',
width: 100
,
field: 'age',
title: 'age',
width: 100,
align: 'right'
]
],
// pagePosition: "top"
);
$('#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, // 允许对 tree 的结构进行修改
"data": [
"id": "0",
"parent": "#",
"state":
"disabled": false, // 是否可以点击（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)
// console.log(data.node);
).on('changed.jstree', function(event, data)
// console.log("action:" + data.action);
)
);
</script>
</html>
以上是关于Treejs+EasyUI+Vuejs实操的主要内容，如果未能解决你的问题，请参考以下文章