jsTree树插件

前言

关于树的数据展示，前后用过两个插件，一是zTree，二是jsTree，无论是提供的例子（可下载），还是提供的API在查找时的便捷程度，zTree比jsTree强多了，也很容易上手，所以这里只讲下jsTree的使用

官网：https://www.jstree.com

中文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 取消选择所有节点时触发