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

1.3 在页面中定义jstree的容器，可以使用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" οnclick="create();">
<input type="button" value="rename node" οnclick="rename();">
<input type="button" value="del node" οnclick="del();">
<input type="button" value="上移" οnclick="moveup();">
<input type="button" value="下移" οnclick="movedown();">
<div id="jstree1" style="width:200px;background:#fff322"></div>
</body>
</html>

JsTree 最详细教程及完整实例相关推荐

【web可视化】canvas画图学习详细教程笔记完整代码
canvas是什么 <canvas> 是HTML5中的标签一个容器,可以使用JS在其中绘制图形或文字. <canvas>是一个可以使用脚本 (通常为JavaScript) 来绘 ...
传奇假人自动上线_Gom引擎假人配置详细教程(附带脚本实例)
假人配置功能:假人配置格式:无说明:假人是和人物一样的,所有人物的命令假人都可以使用,比如可以使用加入行会的命令,把假人加入某个行会例: ;========================== ...
【嵌入式系统开发】Keil 实现LED灯闪烁详细教程及完整代码
Vue实现角色权限动态路由详细教程，在vue-admin-template基础上修改，附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
Yii2搭建后台并实现rbac权限控制完整实例教程
分享到一键分享 QQ空间新浪微博百度云收藏人人网腾讯微博百度相册开心网腾讯朋友百度贴吧豆瓣网搜狐微博百度新首页 QQ好友和讯微博更多... 百度分享 photoshop教程 ...
超详细、超完整的C++教程（算是吧）
C++是一种高级编程语言,它被广泛应用于软件开发.游戏制作.嵌入式系统等领域.本文将为读者提供一份超详细.超完整的C++教程,帮助初学者掌握C++的基础知识,同时给出十个实例,并一一解释分析.最后,我 ...
基于python的图书管理系统测试步骤_Django admin实现图书管理系统菜鸟级教程完整实例...
Django 有着强大而又及其易用的admin后台,在这里,你可以轻松实现复杂代码实现的功能,如搜索,筛选,分页,题目可编辑,多选框. 简单到,一行代码就可以实现一个功能,而且模块之间耦合得相当完美. ...
全网最全面工作流引擎Flowable完整教程之多实例会签
Flowable完整教程之多实例会签前言 1.BladeX流程设计器 1.1.BladeX工作流设计 1.2.parallel多实例流程设计 1.3. BladeX多实例任务节点参数设置 2.部署测 ...
大疆 DJI mobile SDK系列详细教程——运行实例代码（跑通大疆官方提供Mobile SDK里的sample code）
大疆 DJI mobile SDK系列详细教程--运行实例代码(跑通大疆官方提供Mobile SDK里的sample code) 文章目录一.官方文献与资源地址二.操作步骤提示:昨天在尝试跑通大 ...

JsTree 最详细教程及完整实例

JsTree 最详细教程及完整实例相关推荐

最新文章

热门文章