jsTree樹插件

来源:https://www.cnblogs.com/zhangdongya/archive/2019/08/14/11242720.html
-Advertisement-
Play Games

前言 關於樹的數據展示，前後用過兩個插件，一是zTree，二是jsTree，無論是提供的例子（可下載），還是提供的API在查找時的便捷程度，zTree比jsTree強多了，也很容易上手，所以這裡只講下jsTree的使用 官網：https://www.jstree.com 中文API文檔：https: ...


前言

關於樹的數據展示，前後用過兩個插件，一是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 取消選擇所有節點時觸發

 

本文原創，轉載請註明出處：https://www.cnblogs.com/zhangdongya/p/11242720.html 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於vue里的$refs屬性
    vuejs的極大程度的幫助減少了對dom的操作，他主要通過添加ref屬性，但是當獲取this.$refs屬性時，稍有不註意就會輸出undefined導致我們對dom節點的操作報錯。 this.$refs.xxx為undefined的幾種情況記錄： 1、在created里鉤子函數中調用 原因：crea ...
  • 前端優化
    避免內聯和嵌入代碼，儘量引入外部文件 樣式在上，腳本在下，樣式在head內 上線前通過自動化工具壓縮樣式表，或適應預處理器，如less,sass,stylus 儘量合併多個CSS文件，因為瀏覽器的並行下載速度有限 使用async非同步載入頁面內容，如使用多個屬性，並無固定順序 第三方插件應該非同步載入 ... ...
  • 重讀《學習JavaScript數據結構與演算法-第三版》- 第3章 數組（一）
    定場詩 此處應該有掌聲... 前言 讀《學習JavaScript數據結構與演算法》 第3章 數組，本節將為各位小伙伴分享數組的相關知識：概念、創建方式、常見方法以及ES6數組的新功能。 數組 數組是最簡單的記憶體數據結構，用於存儲一系列同一種數據類型的值。 註：雖然數組支持存儲不同類型的值，但建議遵守最 ...
  • 重讀《學習JavaScript數據結構與演算法-第三版》-第2章 ECMAScript與TypeScript概述
    讀《學習JavaScript數據結構與演算法》- 第3章 數組，本節將為各位小伙伴分享數組的相關知識：概念、創建方式、常見方法以及ES6數組的新功能。 ...
  • 背景線條實現
    背景線條實現 原文：goodallocator ...
  • 純手寫實現ajax分頁功能
    前言 最近用到了這個功能，百度大半天，網上的不是有各種問題就是需要引入其他的插件，無奈，只能自己寫，大致功能已經完成。前端頁面用bootstrap做樣式，分頁功能用ajax實現，沒用其他插件哦，只引入引這些： 簡介 相關概念： ajax：非同步的javascript和xml 指的是在不刷新網頁的情況下 ...
  • JavaScript之基本包裝類型
    為了能更好的操作基本類型值，JavaScript提供了3個特殊的引用類型：Boolean，Number和String。這些引用類型和傳統對象相似，有自己的屬性和方法，但也具備各自的特殊行為。 一 基本包裝類型簡介 我們知道，基本類型的值是沒有屬性和方法的，不能被改變的。但是上面3個特殊的引用類型賦予 ...
  • js中的數組去掉空值
    //result 是有空值的數組//r是處理好的數組var r = result.filter(function (s) { return s && s.trim();}); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類