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
  • 移動開發（一）：使用.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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類