JsTree是一个jquery的插件，它提交一个非常友好并且强大的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax方式的动态请求加载数据。
1、支持基于HTML定义、Json、XML方式加载树节点
    2、支持拖放，动态增加、删除、重命名树节点
    3、支持复选框
    4、支持复制、剪切、粘贴树节点，动态刷新树
    5、提供足够的回调方法：
    6、此外，jsTree有极强的扩展性，可以自定义插件支持更广泛的应用
一.Getting started
1.1 下载jstree
从官网下载最新的版本，目前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下所有文件复制到你想到使用的地方
https://github.com/vakata/jstree/zipball/3.3.3
1.2 引用jstree及jquery
jstree是jquery的一个插件，所以首先要引用jquery
<script src="jquery.min.js"></script>
<script src="dist/jstree.min.js"></script>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
1.3 在页面中定义jstree的容器，可以使用div定义
<div id="jstree_demo_div"></div>
1.4 在页面加载后好，可以初始化jstree
Once the DOM is ready you can start creating jstree instances.
$(function () { $('#jstree_demo_div').jstree(); });
二、JsTree常用的配置及操作
jstree可以在初始化时接收一些配置，以达到我们业务上想用的效果，例如如下配置：

2.1 使用json格式构建jstree
使用json构建jstree里，一种可以使用ajax请求的方式构建, 一种可以使用有父子嵌套关系的json格式的数据构建， 另外一种可以使用非嵌套关系的json格式数据构建(我认为这种最方便)
如果你不想使用嵌套父子关系的json ,你可以使用这种非嵌套方式的， 每个node只有两个属性是必需的: id 和parent, 其他都是可选的，不需要 children属性，jstree会自动构建层级关系。 可以将node的parent属性设置为"#",表示为一个root节点。
这种方式非常适用于从数据库中加载出来的数据，可以非常方便的构建整个树。

示例代码：
$('#using_json_2').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } });
 
2.2 绑定事件
可以使用jquery方式绑定 jstree支持的事件，这里抱怨下，jstree的api文档写的并不好，有时得需要翻源代码才可以知道用法。
比如上图这个changed.jstree事件， 这个是官网提供的api,从这个api上看，我还以为是这个event会有4个回调参数，其实并不是，翻看了原代码后才知道，只有2个参数event和data。可以通过data.action、data.selected、data.node 取相应的参数。
以下是jstree源码中的触发这个changed事件的方法。

绑定事件的方式：
$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected); });
常用事件：
事件 作用 应用场景
select_node.jstree 当一个node被选用时触发 当点击某个节点时执行一个动作。
在网上搜索，很多资料写的是绑定click.jstree,其实在官网的api里，click.jstree并没有支持，
 这里应该使用select_node.jstree
changed.jstree 当selection changes时，或者删除节点、 可以监听jstree的改变，例如jstree改变时可以同步
更新数据库中的节点情况
create_node.jstree 当节点被创建时触发
delete_node.jstree 当节点被删除时触发
rename_node.jstree 当一个node被重命名时触发
更多api请参考https://www.jstree.com/api/
 
2.3jstree插件
jstree非常灵活，允许用户自己自定义插件的方式扩展想要的功能，当然本身已提供了很多插件，基本覆盖了业务中常用的功能。更多插件请参考https://www.jstree.com/plugins/
插件的启用方式：
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]
完整代码如：
$('#jstree1').jstree({
"plugins" : [ "wholerow","themes"]
});
2.4扩展contextmenu插件
自定义右键菜单需求：在鼠标经过节点时，在右侧显示一个下拉的箭头，当点击下拉箭头时可以弹出右键菜单，当然直接在节点上右键也是可以弹出菜单的。这个效果类似于微信企业号中通讯录的功能。
这个需求需要扩展jstree中自带的contextmenu插件才可以实现，最简单的方式就是直接把jstree里的contextmenu复制一份，在这个基础上改，另外也需要改右键菜单的样式。

完整代码请下载附件
 
2.5常用的jstree操作
常用的操作有创建节点、删除、重命名、上移、下移等。

<html>

<head>

<link rel="stylesheet" href="jstree/themes/default/style.min.css" />

<script type="application/javascript" src="jquery-2.1.1.min.js"></script>

<script type="application/javascript" src="jstree/jstree.js"></script>

<script>

$(function() {

$('#jstree1').jstree({

"core":{

"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":"技术"}],

"themes" : {

"variant" : "large",//加大

"ellipsis" : true //文字多时省略

},

"check_callback" : true

},

"plugins" : [ "wholerow","themes"]

}).on('select_node.jstree', function(event, data) {

console.log(data.node);

}).on('changed.jstree', function(event,data) {

console.log("-----------changed.jstree");

console.log("action:" + data.action);

console.log(data.node);

});

});

function create(){

var ref = $('#jstree1').jstree(true);

var currNode = _getCurrNode();

currNode = ref.create_node(currNode, {"type":"file"});

if(currNode) {

ref.edit(currNode);

}

}

function rename(){

var ref = $('#jstree1').jstree(true);

var currNode = _getCurrNode();

ref.rename_node(currNode,"rename node222");

}

function del(){

var ref = $('#jstree1').jstree(true);

var currNode = _getCurrNode();

ref.delete_node(currNode);

}

function moveup(){

var ref = $('#jstree1').jstree(true);

var currNode = _getCurrNode();

var prevNode = ref.get_prev_dom(currNode,true);

ref.move_node(currNode,prevNode,'before');

}

function movedown(){

var ref = $('#jstree1').jstree(true);

var currNode = _getCurrNode();

var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点

ref.move_node(currNode,nextNode,'after');

}

/**

*    获取当前所选中的结点

*/

function _getCurrNode(){

var ref = $('#jstree1').jstree(true),

sel = ref.get_selected();

console.log(sel);

if(!sel.length) {

console.log("----");

return false;

}

sel = sel[0];

return sel;

}

</script>

</head>

<body>

<input type="button" value="create node" onclick="create();">

<input type="button" value="rename node" onclick="rename();">

<input type="button" value="del node" onclick="del();">

<input type="button" value="上移" onclick="moveup();">

<input type="button" value="下移" onclick="movedown();">

<div id="jstree1" style="width:200px;background:#fff322"></div>

</body>

</html>

---------------------
作者：yiding123
原文：https://blog.csdn.net/yiding123/article/details/84831263
版权声明：本文为博主原创文章，转载请附上博文链接！

JsTree 最详细教程及完整实例的更多相关文章

  1. WebSocket使用教程 - 带完整实例

    http://my.oschina.net/u/1266171/blog/357488 什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的 ...

  2. WebSocket使用教程 - 带完整实例--网址：https://my.oschina.net/u/1266171/blog/357488

    什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).HTML5定义了We ...

  3. mysql存储过程详细讲解及完整实例下载

    一.存储过程概念 1.存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集.经编译后存储在数据库 中. 2.存储过程是数据库中的一个重要对象,用户通过指定存储过程的名字并给 ...

  4. Mysql事务处理详细讲解及完整实例下载

    一.Mysql事务概念 MySQL 事务主要用于处理操作量大,复杂度高的数据.由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行.在 MySQL 中只有使用了 Inn ...

  5. 超详细的php用户注册页面填写信息完整实例（附源码）

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  6. iptables详细教程：基础、架构、清空规则、追加规则、应用实例(转)

    iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置iptables将会帮助你更有效地管理Linux防火墙.如果你是第一次 ...

  7. 使用Express连接mysql详细教程（附项目的完整代码我放在结尾了）

    使用Express连接mysql详细教程(附项目的完整代码我放在结尾了) 要使用Express连接本地数据库 我们首先需要安装好Express的依赖 我们使用这个框架呢首先要有一点ajax的基础 如果 ...

  8. (转)iptables详细教程：基础、架构、清空规则、追加规则、应用实例

    转自:http://lesca.me/archives/iptables-tutorial-structures-configuratios-examples.html iptables防火墙可以用于 ...

  9. Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）

    Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...

随机推荐

  1. nginx上通过ssl证书将http转发为https

    环境:阿里云linux,ngnix 1.16.0 ,ssl证书,XXXX.jar 0.自行在阿里云上下载免费的ssl证书.里面有2个文件.key和pem后面要用到. 1.首先将项目在linux上跑起来 ...

  2. Python_tkinter（3）_grid布局

    Grid(网格)布局管理器,是Tkinter里面最灵活的几何管理布局器.注意:不要试图在一个主窗口中混合使用pack和grid. 1.简单的布局 from tkinter import * root ...

  3. vue 基础的一些字眼及路由

    每个框架都有一些自己的写法和一些字眼 摘自 vue 官网 v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">...& ...

  4. 百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移

    参考网址:https://blog.csdn.net/skywqnan/article/details/79036262 改变车的方向:http://www.cnblogs.com/peixuanzh ...

  5. linux cp 拷贝文件或目录

    cp 拷贝文件或目录 默认不能拷贝目录 常用来备份: [root@MongoDB ~]# cp a.txt /tmp/ [root@MongoDB ~]# cp /root/a.txt /tmp/ c ...

  6. 一次 Spark SQL 性能提升10倍的经历（转载）

    1. 遇到了啥问题 是酱紫的,简单来说:并发执行 spark job 的时候,并发的提速很不明显. 嗯,且听我慢慢道来,啰嗦点说,类似于我们内部有一个系统给分析师用,他们写一些 sql,在我们的 sp ...

  7. Linux系统常用升级的基础包

    Linux系统常用升级的基础包 yum -y install lrzsz gcc gcc-c++ make flex autoconf automake vixie-cron libjpeg libj ...

  8. 谷歌将一些弱小的库从安卓代码移除Google Removes Vulnerable Library from Android

    Google this week released the November 2018 set of security patches for its Android platform, which ...

  9. java中xxe漏洞修复方法

    java中禁止外部实体引用的设置方法不止一种,这样就导致有些开发者修复的时候采用的错误的方法 之所以写这篇文章是有原因的!最早是有朋友在群里发了如下一个pdf, 而当时已经是2019年1月末了,应该不 ...

  10. Android Glide 加载图片

    0.借鉴文章地址:http://blog.csdn.net/zivensonice/article/details/51835802 和 http://www.cnblogs.com/zhaoyanj ...