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/下所有文件复制到你想到使用的地方
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>
相关推荐
Echarts实例教程之树形图表的实现方法 树图主要用来可视化树形数据结构,是一种特殊的层次类型。 实现方法,将series->type设置为tree。 Echarts的树形图表,可以是正交的,也可以是径向的。 正交树: 径向树...
00-本地时间及网络时间验证改版.js 00-正则匹配关闭应用-适用大部分手机(1).js 00-正则匹配关闭应用-适用大部分手机.js 00-简化点击控件.js 00-结束事件与结束应用(1).js 00-结束事件与结束应用.js 00-读&删...
Ext 入门学习文档,其中包含实例...............................................................
里面已经包含了教程、示例代码、要用到的js脚本库和jar包,你随便改改就可以用在自己的项目里
9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...
对网上的树形表格treeTable进行了二次开发扩展,带演示demo例子
ExtJS2.1教程Tree_树控件_。ExtJS_配置和表格控件使用。Extjs入门培训教程。Extjs最经典的学习教程。ext布局。ext几个实例。EXT开发指南。EXT树简介。JavaScript使用手册。很多的extjs教程,你6分下载这个压缩包很值...
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类,并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
|产品特点拖放移动友好每个动作的事件灵活的配置每页任意数量的实例多选键盘导航过滤分类与Vuex集成安装Npm: $ npm install liquor-tree 纱: $ yarn add liquor-tree现场游乐场要在自己的计算机上运行该演示,请...
JavaScript对象及继承教程(上) javascript正则表达式(一) javascript正则表达式(二) JavaScript的10种跨域共享方法 JavaScript类型总览 JavaScript获取文本框光标的像素位置 js函数match、exec、test、search、...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
最详细的SQL注入相关的命令整理 Oracle Oracle中PL/SQL单行函数和组函数详解 mssql+oracle Oracle编程的编码规范及命名规则 Oracle数据库字典介绍 0RACLE的字段类型 事务 CMT DEMO(容器管理事务演示) 事务隔离性的...
类似ext js .ext js 比较臃肿.而且还收费.EasyUi 是一款免费开源的前台轻量级便于开发的工具. 经过一段时间的学习和应用感觉非常不错,是个值得学习研究的插件 使用起来非常方便界面美观大方,遗憾的是不开源代码...
XML越来越热,关于XML的基础教程网络上也随处可见。可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章。...