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 取消選擇所有節點時觸發