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交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...
随机推荐
- ROS串口通信
身处机器人行业,不想一直只做低端的单片机控制,老是待在舒适区,所以一直都想学一下ROS系统,但看了几个月资料后,感觉还是云里雾里,似懂非懂,感念似乎都很清楚,但要实际去做,却又感觉无从下手. 于是想先 ...
- js 转java后台传过来的list
var intIndex=0; arrList = new Array(); arrList = "${orderNumList}".replace('[','').replace ...
- MongoDB操作集
官网 https://www.mongodb.com/download-center#community 基本资料: http://www.runoob.com/mongodb/mongodb-int ...
- 数据库设计入门及ERMaster的安装和使用
数据库的设计步骤 1.标识表 (根据需求创建表) 2.标识表的字段 3.标识表与表之间的关系 注意事项: 三大范式: 1.确保标识的字段的原子性,字段的概念分的不能再分 2.确保字段与表有依赖的关系 ...
- 【tomcat启动失败问题】Unable to start embedded Tomcat
启动spring boot 项目后抛出如下异常: org.springframework.context.ApplicationContextException: Unable to start em ...
- 设置js的ctx
<script type="text/javascript" src="${ctx}/js/dynamic.jsp"></script> ...
- 一篇文章彻底弄懂Base64编码原理
在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博文带领大家了解一下Base64的底层实现. Base64的由来 目前Base64已经成为网 ...
- encodeURIComponent 和 decodeURIComponent 对字符串url编码 用于url拼字符传值
- Shell脚本创建的文件夹末尾有两个问号怎么回事？
原因:Linux系统的换行符是"\r\n",Windows上的换行符是"\n",Windows上编写shell脚本上传Linux,Linux无法正确识别&quo ...
- Oracle安装和配置Oracle数据库快速指南
Oracle安装12C要求参考文档 汇总 中文版:在 Unix AIX,HP-UX,Linux,Solaris 和 MS Windows 操作系统上安装和配置 Oracle 数据库(RDBMS)的要求 ...