JQuery Ztree 樹插件配置與應用小結

来源:https://www.cnblogs.com/shouke/archive/2019/08/21/11388103.html
-Advertisement-
Play Games

JQuery Ztree 樹插件配置與應用小結 by:授客 QQ：1033553122 測試環境 Win7 jquery-3.2.1.min.js 下載地址： https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.mi ...


JQuery Ztree 樹插件配置與應用小結

by:授客 QQ：1033553122

 

測試環境

Win7

jquery-3.2.1.min.js

下載地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

 

zTree_v3-master.zip

下載地址：

https://github.com/zTree/zTree_v3

 

插件配置與應用

應用效果展示

 

 

HTML代碼片段

 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

 

    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    {% load staticfiles %}

   

    ……略

 

    <!-- zTree -->

    <link rel="stylesheet" href="{% static 'website/zTree-3.5/css/demo.css' %}" type="text/css" />

    <link rel="stylesheet" href="{% static 'website/zTree-3.5/css/metroStyle/metroStyle.css' %}" type="text/css" />

    <script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.core.js' %}" defer></script>

    <script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.excheck.js' %}" defer></script>

    <script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.exedit.js' %}" defer></script>

 

 

    ……略

 

<script type="text/javascript" src="{% static 'website/js/resource-setting.js' %}" defer></script>

……略

 

 

</head>

<body>

 

<div class="container-fluid">

    <div class="row">

        <div>

            <button class="btn btn-primary" data-toggle="modal" data-target="#resourceDialog">點擊創建一級根目錄</button>

        </div>

 

        <div class="zTreeDemoBackground left">

            {#    <ul id="treeDemo" class="ztree" style="height:800px"></ul>#}

            <ul id="ztree" class="ztree"></ul>

        </div>

    </div>

</div>

 

    ……略

 

 

 

</body>

</html>

 

 

JS代碼片段

resource-setting.js

 

/**

 * ztree 設置

 *

 */

var setting = {

    view: {

        addHoverDom: addHoverDom,

        removeHoverDom: removeHoverDom,

        selectedMulti: false

    },

    check: {

        enable: false  

    },

    data: {

        simpleData: { // true / false 分別表示使用 / 不使用簡單數據模式如果設置為 true，請務必設置 setting.data.simpleData 內的其他參數: idKey / pIdKey / rootPId，並且讓數據滿足父子關係。

            enable: true,

            idKey: "id",   // 節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

            pIdKey: "pId", // 節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

            rootPId: 0     // 用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]

        }

    },

    edit: {

        enable: true

    },

    callback: {

        beforeRemove: zTreeBeforeRemove,

        beforeEditName: zTreeBeforeEditName,

        beforeDrag:function(){return false;} // 禁止拖拽

    }

};

 

/**

 * 用於當滑鼠移動到節點上時，顯示用戶自定義控制項，同時給控制項(例中為“新增”按鈕)綁定點擊事件：打開新增資源樹節點信息模態對話框

 */

function addHoverDom(treeId, treeNode) {

    var sObj = $("#" + treeNode.tId + "_span"); // 獲取對應節點

 

    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId

        + "' title='add node' onfocus='this.blur();'></span>";

    sObj.after(addStr);

 

    var btn = $("#addBtn_"+treeNode.tId); //“新增”圖標按鈕

 

    if (btn) btn.bind("click", function(){ // 給“新增”圖標按鈕綁定點擊事件

        currentZtreeNode = treeNode; // 保存點擊的節點，作為新增資源節點的父節點，在提交表單時使用

        opType = 'add';              // 設置操作類型為新增

        $('#'+ resourceDialogID).modal('show'); // 打開對話框

        return false;

    });

};

 

 

/**

 * 於當滑鼠移出節點時，隱藏用戶自定義控制項

 * @param treeId

 * @param treeNode

 */

function removeHoverDom(treeId, treeNode) {

    $("#addBtn_" + treeNode.tId).unbind().remove();

 

};

 

 

 
/**
 * 用於捕獲節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作
 * @param treeId
 * @param treeNode
 * @returns {boolean}
 */
function zTreeBeforeRemove(treeId, treeNode) {
    var index = treeNode.name.indexOf(' [')
    var nodeName = ''
    if (index != -1) {
        nodeName = treeNode.name.substr(0, index);
    } else {
        nodeName = treeNode.name;
    }
 
    var mark = true; // 標記是否刪除成功
    if (confirm('是否刪除資源"' + nodeName + '"?')) {
        var nodeID = treeNode.id;
 
        $.ajax({
            type: "POST",
            url: deleteResourceZtreeNodeURL,
            async: false,
            data: {'nodeID': nodeID},
 
            success: function (result) {
                if (result.success == 'true') {
                    alert(result.msg);
                    mark = true;
                } else {
                    alert(result.msg + "，" + result.reason);
                    mark = false;
                }
            },
            error: function(XmlHttpRequest, textStatus, errorThrown) {
                alert('刪除資源樹節點請求失敗' + XmlHttpRequest.responseText);
                mark = false;
            }
        });
        return mark;
    } else {
        return false;
    }
}
 
 
/**
 * 用於捕獲節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態，同時打開資源樹修改節點信息模態對話框
 * @param treeId
 * @param treeNode
 * @returns {boolean}
 */
function zTreeBeforeEditName(treeId, treeNode) {
    currentZtreeNode = treeNode;  // 記錄操作的節點
    opType = 'update';      // 設置操作類型為修改
 
    var nodeID = treeNode.id;
    // 獲取節點信息，並填充表單
    $.ajax({
        type: "get",
        url: queryResourceZtreeNodeURL,
        async: false,
        data: {'nodeID': nodeID },
        success: function (result) {
            if (result.success == 'true') {
                //alert(result.msg);
                var resourceFormSelector = '#' +  resourceFormID;
 
                // 序列化表單，獲取表單組件 name屬性，表單設計 name屬性值和id屬性值是一樣的，所以也就獲取表單組件id
                var dataArray = $(resourceFormSelector).serializeArray();
 
                $.each(dataArray, function () {
                    $('#' + this.name).val(result.data[this.name]);
                });
 
                $('#' + resourceDialogID).modal('show'); // 打開修改模態對話框
            } else {
                // 重置變數
                currentZtreeNode = null;
                opType = 'add';
                alert(result.msg + "，" + result.reason);
            }
        },
        error: function(XmlHttpRequest, textStatus, errorThrown) {
            // 重置變數
            opType = 'add';
            currentZtreeNode = null;
            alert('查詢資源樹節點信息請求失敗' + XmlHttpRequest.responseText);
        }
    });
 
    return false; // 不進入編輯狀態
 
}

 

getResourcesTreeNodes().then(function(result) {

    if (result.success == 'true') {

        $.fn.zTree.init($('#' + resouceZtreeID), setting,  result.data);

    } else {

        alert(result.msg + "，" + result.reason);

    }

});

 

代碼分析

setting.view.addHoverDom

用於當滑鼠移動到節點上時，顯示用戶自定義控制項，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

請務必與 setting.view.removeHoverDom 同時使用；屬於高級應用，使用時請確保對 zTree 比較瞭解。

預設值：null

 

參數說明

treeIdString  對應 zTree 的 treeId，便於用戶操控

 

treeNodeJSON   需要顯示自定義控制項的節點 JSON 數據對象

 

setting.view.removeHoverDom

用於當滑鼠移出節點時，隱藏用戶自定義控制項，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

請務必與 addHoverDom 同時使用；屬於高級應用，使用時請確保對 zTree 比較瞭解。

預設值：null

 

參數說明

treeIdString  對應 zTree 的 treeId，便於用戶操控

treeNodeJSON  需要隱藏自定義控制項的節點 JSON 數據對象

 

setting.check.enable

設置 zTree 的節點上是否顯示 checkbox / radio

預設值: false

參數值：true / false  分別表示 顯示 / 不顯示 覆選框或單選框

 

setting 舉例：需要顯示 checkbox

var setting = {

    check: {

        enable: true

    }

};

......

 

setting.check.chkStyle

勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效]

預設值："checkbox"

 

參數值： 值為 "checkbox" 時，顯示 checkbox 選擇框，setting.check.chkboxType 屬性有效。 值為 "radio" 時，顯示 radio 選擇框， setting.check.radioType 屬性有效。

請註意大小寫，不要改變

 

 

setting 舉例： 設置選擇框為 radio

var setting = {

    check: {

        enable: true,

        chkStyle: "radio"

    }

};

......

 

setting.view.selectedMulti

設置是否允許同時選中多個節點。

預設值: true

 

參數值：true / false 分別表示 支持 / 不支持 同時選中多個節點

1、設置為 true時，按下 Ctrl 或 Cmd 鍵可以選中多個節點

2、設置為 true / false 都不影響按下 Ctrl 或 Cmd 鍵可以讓已選中的節點取消選中狀態（ 取消選中狀態可以參考 setting.view.autoCancelSelected ）

 

setting 舉例： 禁止多點同時選中的功能

var setting = {

    view: {

        selectedMulti: false

    }

};

......

 

setting.data.simpleData.enable

確定 zTree 初始化時的節點數據、非同步載入時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)

不需要用戶再把資料庫中取出的 List 強行轉換為複雜的 JSON 嵌套格式

預設值：false

 

參數：true / false 分別表示 使用 / 不使用 簡單數據模式

如果設置為 true，請務必設置 setting.data.simpleData 內的其他參數: idKey / pIdKey / rootPId，並且讓數據滿足父子關係。

 

setting.data.simpleData.idKey

節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

預設值："id"

 

setting.data.simpleData.pIdKey

節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效]

預設值："pId"

 

rootPId

用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效]

預設值：null

 

setting 舉例： 使用簡單 Array 格式的數據

var setting = {

    data: {

        simpleData: {

            enable: true,

            idKey: "id",

            pIdKey: "pId",

            rootPId: 0

        }

    }

};

var treeNodes = [

    {"id":1, "pId":0, "name":"test1"},

    {"id":11, "pId":1, "name":"test11"},

    {"id":12, "pId":1, "name":"test12"},

    {"id":111, "pId":11, "name":"test111"}

];

......

 

setting.edit.enable

設置 zTree 是否處於編輯狀態

請在初始化之前設置，初始化後需要改變編輯狀態請使用 zTreeObj.setEditable() 方法

預設值: false

 

參數說明：true / false 分別表示 可以 / 不可以 編輯

編輯狀態規則說明

1、點擊節點時，不會打開 node.url 指定的 URL。

2、全面支持 編輯 與 非同步載入 狀態共存。

3、可以對節點進行拖拽，且支持多棵樹之間進行拖拽。

4、支持拖拽時 複製/移動 節點。（參考: setting.edit.drag.isCopy / setting.edit.drag.isMove）

5、可以通過編輯按鈕修改 name 屬性。

6、可以通過刪除按鈕刪除節點。

請註意大小寫，不要改變

 

setting 舉例：設置 zTree 進入編輯狀態

var setting = {

    edit: {

        enable: true

    }

};

......

 

setting.callback.beforeRemove

用於捕獲節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作

預設值：null

 

參數說明

treeIdString  對應 zTree 的 treeId，便於用戶操控

treeNodeJSON  將要刪除的節點 JSON 數據對象

 

返回值  true / false

如果返回 false，zTree 將不刪除節點，也無法觸發 onRemove 事件回調函數

 

setting && function舉例： 禁止全部刪除操作

function zTreeBeforeRemove(treeId, treeNode) {

    return false;

}

 

var setting = {

    edit: {

        enable: true

    },

    callback: {

        beforeRemove: zTreeBeforeRemove

    }

};

......

 

setting.callback.beforeEditName

用於捕獲節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態

此事件回調函數最主要是用於捕獲編輯按鈕的點擊事件，然後觸發自定義的編輯界面操作。

預設值：null

 

參數說明

treeIdString  對應 zTree 的 treeId，便於用戶操控

treeNodeJSON  將要進入編輯名稱狀態的節點 JSON 數據對象

 

返回值 true / false

如果返回 false，節點將無法進入 zTree 預設的編輯名稱狀態

 

setting & function 舉例: 禁止修改父節點的名稱

function zTreeBeforeEditName(treeId, treeNode) {

    return !treeNode.isParent;

}

 

var setting = {

    edit: {

        enable: true

    },

    callback: {

        beforeEditName: zTreeBeforeEditName

    }

};

......

 

setting.callback.beforeDrag

用於捕獲節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啟拖拽操作

預設值：null

 

參數說明

treeIdString   被拖拽的節點 treeNodes 所在 zTree 的 treeId，便於用戶操控

treeNodesArray(JSON)   要被拖拽的節點 JSON 數據集合

v3.x 允許多個同級節點同時被拖拽，因此將此參數修改為 Array(JSON)

如果拖拽時多個被選擇的節點不是同級關係，則只能拖拽滑鼠當前所在位置的節點

 

返回值 true / false

如果返回 false，zTree 將終止拖拽，也無法觸發 onDrag / beforeDrop / onDrop 事件回調函數

 

setting & function 舉例： 禁止全部拖拽操作

function zTreeBeforeDrag(treeId, treeNodes) {

    return false;

};

var setting = {

    edit: {

        enable: true

    },

    callback: {

        beforeDrag: zTreeBeforeDrag

    }

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

-Advertisement-
Play Games
更多相關文章
  • new 運算符的原理
    關於 new 運算符的原理： 1、紅寶書上解釋： （1）創建一個新對象 （2）將構造函數的作用域賦給新對象 （3）執行構造函數中的代碼 （4）返回新對象 2、MDN上的解釋： （1）一個繼承自 Foo.prototype 的新對象被創建 （2）使用指定的參數調用構造函數 Foo，並將 this 綁定 ...
  • 正則限制input負數輸入
    //直接在input標簽內加入下麵兩個事件處理程式即可 onkeyup="this.value=this.value.replace(/\D|^0/g,'')" onafterpaste="this.value=this.value.replace(/\D|^0/g,'')" ...
  • vue項目中使用高德地圖（根據坐標定位點）
    前言 項目中需要根據坐標定位，將自己的實現過程寫下來，廢話不多說，上代碼 正文 總結 ...
  • 高德地圖 使用
    前言 帶你走進高德api 正文 高德api地址：https://lbs.amap.com/ 1、註冊/登錄 2、進入應用管理創建應用並申請key 3、在項目中使用 效果圖 ...
  • 前端測試幹掉緩存
    通過配置nginx幹掉 304 (from memory cache) (from disk cache) ...
  • vue-router動態路由設置參數可選
    在日常工作中，我們需要將匹配到的所有路由，映射到一個組件上。 如下代碼想要達到的效果： 不傳page和id，則映射到user預設list頁面 傳page和id，根據page不同，顯示不同的頁面 問題 使用以下代碼片段是不能實現以上效果的，因為預設情況下page和id參數是必傳的，如果不傳參數，則會根 ...
  • DOM之事件（一）
    DOM事件，就是瀏覽器或用戶針對頁面可以做出的某種動作，我們稱這些動作為DOM事件。它是用戶和頁面交互的核心。當動作發生（事件觸發）時，我們可以為其綁定一個或多個事件處理程式（函數），來完成我們想要實現的功能。 為了方便理解下麵即將要講解的內容，在正式開始之前，讓我們先來瞭解一個最常用的事件：cli ...
  • jQuery知識梳理20190818
    jQuery知識梳理20190818 [TOC] 1. 時間綁定和解綁 2. 區別mouseover與mouseenter 3. 時間委托（委派/代理） 4 . 多庫共存 如果有2個庫都有$, 就存在衝突。 jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQ ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類