JsTree 最详细教程及完整实例
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 最详细教程及完整实例的更多相关文章
- WebSocket使用教程 - 带完整实例
http://my.oschina.net/u/1266171/blog/357488 什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的 ...
- WebSocket使用教程 - 带完整实例--网址：https://my.oschina.net/u/1266171/blog/357488
什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).HTML5定义了We ...
- mysql存储过程详细讲解及完整实例下载
一.存储过程概念 1.存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集.经编译后存储在数据库 中. 2.存储过程是数据库中的一个重要对象,用户通过指定存储过程的名字并给 ...
- Mysql事务处理详细讲解及完整实例下载
一.Mysql事务概念 MySQL 事务主要用于处理操作量大,复杂度高的数据.由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行.在 MySQL 中只有使用了 Inn ...
- 超详细的php用户注册页面填写信息完整实例（附源码）
这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...
- iptables详细教程：基础、架构、清空规则、追加规则、应用实例(转)
iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置iptables将会帮助你更有效地管理Linux防火墙.如果你是第一次 ...
- 使用Express连接mysql详细教程（附项目的完整代码我放在结尾了）
使用Express连接mysql详细教程(附项目的完整代码我放在结尾了) 要使用Express连接本地数据库 我们首先需要安装好Express的依赖 我们使用这个框架呢首先要有一点ajax的基础 如果 ...
- (转)iptables详细教程：基础、架构、清空规则、追加规则、应用实例
转自:http://lesca.me/archives/iptables-tutorial-structures-configuratios-examples.html iptables防火墙可以用于 ...
- Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境（详细教程）
Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...
随机推荐
- p12文件和mobileprovision文件
http://www.cnblogs.com/YouXianMing/p/3848188.html https://www.jianshu.com/p/73c430f468e8 https://blo ...
- linux系统运维命令
1.动态查看网卡流量 sar -n DEV 1 2.查看当前网卡的buffer size情况 ethtool -g eth0 3.修改当前网卡的buffer size ethtool -G eth0 ...
- .net开发COM组件之组件签名&注册
基于.net的COM组件开发时,若采用vs强命名方式,则完成后试图将组件注册到XP系统(确切的说是.net4.0以下版本的系统) REGASM c:\libcom\dotnet\myCom.dll / ...
- 增长中的时间序列存储(Scaling Time Series Data Storage) - Part I
本文摘译自 Netflix TechBlog : Scaling Time Series Data Storage - Part I 重点:扩容.缓存.冷热分区.分块. 时序数据 - 会员观看历史 N ...
- MATLAB绘制函数图
序言 Matlab可以根据用户给出的数据绘制相应的函数图.对于单个2D函数图,需要给出一个行向量x作为函数图上离散点集的横坐标,以及一个与x列数一样的横坐标y作为函数图上点集的纵坐标. 向量x和y的取 ...
- 2018-2019-1 20189203《Linux内核原理与分析》第九周作业
第一部分 课本学习 进程的切换和系统的一般执行过程 进程调度的时机 Linux内核系统通过schedule函数实现进程调度,进程调度的时机就是内核调用schedule函数的时机.当内核即将返回用户空间 ...
- .htaccess实现php网站伪静态
伪静态是啥?很简单,就是假的静态网页...例如有个网页是:www.xxx.com/index.php?id=1这是动态网页,php后缀的如果改成:www.xxx.com/index-1.html那么这 ...
- 微信小程序封装年月日时分组件
第一步,在page下新建component文件,放你封装的小组件,和vue里的component差不多 第二步,在需要使用的组件的.json文件中添加usingComponents 第三步,在页面中引 ...
- 网页静态化解决方案-Freemarker demo+语法
1.网页静态化技术Freemarker 1.1为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道. 对于电商网站的商品详细页来说 ...
- Seq2Seq ---学习笔记
应用场景:机器翻译 与language model 不同 MT model 的a<0> 是由encoder 生成的. language model 的 a<0> 是 初始化的. ...