jsTree树插件
前言
关于树的数据展示,前后用过两个插件,一是zTree,二是jsTree,无论是提供的例子(可下载),还是提供的API在查找时的便捷程度,zTree比jsTree强多了,也很容易上手,所以这里只讲下jsTree的使用
中文API文档:https://blog.csdn.net/j1137573560/article/details/82821839
在npm下载页面也有详细的实例教程:https://www.npmjs.com/package/jstree#getting-started
本文的例是在vue中
正文
首先npm引入:
npm i jstree -S
在main中引入时需要注意,需要单独获取css文件并引入:
import 'jstree'
import './lib/jstree/themes/default/style.min.css'
先放出实例:
if ($('#leftTree').jstree()) {//判断是否已有实例
$('#leftTree').jstree().destroy();//销毁实例
};
$('#leftTree').on('ready.jstree',function (e,data) {//所有节点完成加载后触发的事件
$('#leftTree').jstree().check_all();//选中所有节点
$('#leftTree').jstree().open_all();//打开所有节点
}).jstree({//一个元素是可以点(.)事件后再点创建实例的
core: {
data: data,//数据
check_callback: true//在对树进行改变时(如创建,重命名,删除,移动或复制),check_callback是必须设置为true
},
checkbox: {// 去除checkbox插件的默认效果
tie_selection: false,
keep_selected_style: false,
whole_node: false
},
types: {
default: {
// icon: false // 删除默认图标
},
parent: {
valid_children: ["parent", "file"]
},
file: {
icon: "./../../assets/images/tree_file.gif",
valid_children: ["parent", "file"]
}
},
dnd: {//拖放插件配置
drag_selection: false
},
plugins: ["types", "checkbox", "dnd"]//插件名,各种jstree的插件引入
});
插件的使用,如拖动:
首先需要配置插件
1.在jstree({})配置
dnd: {
drag_selection: false
}
2.在plugins中写入插件字符串名,这里是'dnd'
3.设置core.check_callback为true或函数(必需)
4.使用move_node.jstree事件传给后台数据修改数据结构
如果后台传过来的数据与插件要求的数据不匹配,就需要修改数据:
treeDataWithParentChildType(e) {
let _this = this;
e.text = e.name;
if (!e.hasOwnProperty('children') || e.children.length === 0) {
e.icon = "jstree-file";
return e;
} else {
var children = e.children;
var cArr = [];
children.forEach(function (c) {
var cTmE = _this.treeDataWithParentChildType(c);
cArr.push(cTmE);
});
e.children = cArr;
}
return e;
}
//在修改数据的时候调用
var newTreeData = [];
data.data.children.forEach(function (e) {
e = _this.treeDataWithParentChildType(e);
newTreeData.push(e);
});
jsTree识别的节点的数据字段(core.data中的字段)是固定的,下面介绍一些主要字段:
text 节点名
icon 节点图标,默认为文件夹图标
jstree-file 文件图标
state 一个对象,对节点的状态设置
checked 是否选中(复选框)
selected 是否选中(点击选中)
opened 打开节点(给第一个子节点添加后父节点就会打开)
disabled 禁用节点
children 子树
这里是一些主要配置:
core.data 树的数据配置
core.check_callback 当用户尝试修改树的结构时会发生什么情况,参数为false,则会阻止所有操作,如创建,重命名,删除,移动或复制。当参数为函数时,函数的第一个参数可能值有以下几种:'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' , 'edit'
core.multiple 一个布尔值,指示是否可以选择多个节点
core.themes.dots 一个布尔值,表示是否显示连接点
core.themes.icons 一个布尔值,指示是否显示节点图标
checkbox.keep_selected_style 是应保留还是删除节点的选定样式。默认为true。
plugins 配置实例中使用的插件。是一个字符串数组,每个字符串是一个插件名
这里是一些主要方法:
方法使用方式:如get_selected方法的使用如下,$('#leftTree').jstree().get_selected()或$("#jstree_left").jstree('get_selected')
is_selected(obj) 检查是否选择了节点
obj 要检查的节点id
get_selected() 获取所有选定节点的数组
若参数为true则返回节点对象全部数据,否则只返回节点 ID 列表
select_all(supress_event) 选择树中的所有节点
supress_event 如果设置true为该changed.jstree事件将不会被触发
触发事件:select_all.jstree和changed.jstree
deselect_all() 取消选择所有选定的节点
触发事件:deselect_all.jstree和changed.jstree
select_node(obj,supress_event,prevent_open) 选择一个节点
obj 数组可用于选择多个节点
supress_event 如果设置true为该changed.jstree事件将不会被触发
prevent_open 如果设置为true所选节点的父节点将不会打开
触发事件:select_node.jstree和changed.jstree
deselect_node(obj,supress_event) 取消选择一个节点
obj 数组可用于取消选择多个节点
supress_event 如果设置true为该changed.jstree事件将不会被触发
触发事件:deselect_node.jstree和changed.jstree
delete_node() 删除节点
触发事件:delete_node.jstree和changed.jstree
destroy() 从 DOM 中删除 jstree 的所有痕迹,并销毁所有的实例。
get_node() 根据输入(子 DOM 元素、ID字符串、选择器等)获取节点的 JSON 形式数据,获取选中的节点。
open_all() 打开节点(或树)中的所有节点,揭示他们的孩子。如果节点未加载,则会在准备好后加载并打开。
rename_node() 重命名节点。
触发事件:rename_node.jstree
redraw() 重绘所有需要重绘的节点或可选的 - 整个树
若参数为true,重绘所有节点。
checkbox插件方法:
check_all() 选中所有节点,如果传参true,则获取所有节点的全部数据,否则只获取id
触发事件:check_all.jstree和changed.jstree
仅当复选框设置中的tie_selection为false时使用,否则将在内部调用select_all
uncheck_all() 取消所有选中节点
触发事件:uncheck_all.jstree
仅当复选框设置中的tie_selection为false时使用,否则将在内部调用deselect_all
is_checked() 检查节点是否被选中
如果设置中的tie_selection已打开,则此函数将返回与is_selected相同的值
get_checked() 获取所有选中节点
如果在设置中打开了tie_selection,则此函数将返回与get_selected相同的值
禁用启用有关节点:
is_disabled(obj) 检查节点是否被禁用(不可选)
obj 节点id
enable_node(obj) 启用节点 - 以便可以选择它
disable_node(obj) 禁用节点 - 因此无法选择它
这里是一些主要事件:
事件使用方式:如activate_node.jstree事件的使用如下,$('#leftTree').on('activate_node.jstree',function (e, data) {}))
activate_node.jstree 当一个节点被用户点击或交互时触发
loaded.jstree 在第一次加载根节点后触发
ready.jstree 在所有节点完成加载后触发
changed.jstree 当已选中的节点发生变化(选择发生变化)时触发。
move_node.jstree 移动节点时触发
select_node.jstree 选择节点时触发
deselect_node.jstree 取消选择节点时触发
select_all.jstree 选择所有节点时触发
deselect_all.jstree 取消选择所有节点时触发
jsTree树插件的更多相关文章
- 顶级jQuery树插件
顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...
- ASP.NET MVC jQuery 树插件在项目中使用方法(一)
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- Unity3D行为树插件Behave学习笔记
Behave1.4行为树插件 下载地址:http://pan.baidu.com/s/1i4uuX0L 安装插件和使用 我们先来看看插件的安装和基本使用方法,新建一个Unity3D项目,这里我使用的是 ...
- easyui&8Jquery ztree树插件
7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
- 基于bootstrap的jQuery多级列表树插件
简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
随机推荐
- css伪类实现行号自动填充
css伪类实现行号自动填充 大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充, 对于上面的方式,都不太灵活,而且 ...
- [b0042] python 归纳 (二七)_gui_tkinter_基本使用
# -*- coding: utf-8 -*- """ 学习 Tkinter画图基本控件使用 逻辑: 放几个 输入控件.点击按钮,将输入控件内容打印出来 使用: 1. 创 ...
- Linux—文件上传和下载
一.通过SecureCRT的rz.sz实现文件的上传和下载 1.检查是否安装sz rz,命令如下 [root@localhost ~]# rpm -qa | grep rz # 上传 [root@l ...
- emacs 帮助相关命令
emacs 帮助相关命令 如下表: No. 键盘操作 键盘操作对应的函数 回答的问题 01 ctrl-h c describe-key-briefly 这个按键组合将运行哪个函数 02 ctrl-h ...
- [PHP] PDO对象与mysql的连接超时
在php中每一个new的PDO对象,都会去连接mysql,都会创建一条tcp连接.当pdo对象赋予的变量是一个的时候,那么他只会保持一个tcp连接,没有被引用的对象连接会直接断掉.如果不对这个对象进行 ...
- (办公)vue下载excel,后台用post方法
后台方法的参数必须是@RequestBody修饰的. 前台关键代码: axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 dat ...
- if选择结构
if的语法规则: if(布尔表达式){java语句} //只有一个java语句的时候可以省略大括号不建议这么写但是别人写的代码能看懂 if的写法有4种: if(){} if(){}else{} if( ...
- 《深度学习》圣经"花书"经验法则中文版!
作者:Jeff Macaluso https://jeffmacaluso.github.io/post/DeepLearningRulesOfThumb/ 转自CVer,仅用作个人学习 当我在研究生 ...
- eclipse创建git本地仓库,并将本地仓库更新到远端git服务器
目的:将本地代码更新到远端服务器 1.点击eclipsewindows->preference->team->git->Configuration配置git的基础环境 2.点击 ...
- Python进阶-XV 类和对象的命名空间 组合
一.类和对象命名空间 1.类中可以定义两种属性 静态属性和动态属性 class Course: language = 'Chinese' # 静态属性 def __init__(self, name, ...