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

時間 2020-05-20

標籤 jquery ztree 插件配置應用小結欄目 JQuery 简体版

原文原文鏈接

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

by:授客 QQ：1033553122php

測試環境css

Win7html

jquery-3.2.1.min.jsjava

下載地址：node

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

zTree_v3-master.zipgit

下載地址：github

https://github.com/zTree/zTree_v3web

插件配置與應用

應用效果展現

HTML代碼片斷

<!DOCTYPE html>

<head>

{% load staticfiles %}

……略

……略

……略

</head>

<body>

<div>

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

</div>

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

</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 分別表示支持 / 不支持同時選中多個節點

一、設置爲 true時，按下 Ctrl 或 Cmd 鍵能夠選中多個節點

二、設置爲 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 分別表示能夠 / 不能夠編輯

編輯狀態規則說明

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

二、全面支持編輯與異步加載狀態共存。

三、能夠對節點進行拖拽，且支持多棵樹之間進行拖拽。

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

五、能夠經過編輯按鈕修改 name 屬性。

六、能夠經過刪除按鈕刪除節點。

請注意大小寫，不要改變

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

}

};

......

$.fn.zTree.init

zTree 初始化方法，建立 zTree 必須使用此方法

一、頁面須要進行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。

二、須要首先加載 jquery-1.4.2.js 或其餘更高版本的 jQuery 。

三、須要加載 jquery-ztree.core-3.0.js，若是須要用到編輯功能或 checkbox / radio 還須要分別加載 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。

四、須要加載 zTreeStyle.css 以及 zTreeStyle 目錄下的 img 文件。

五、若是須要使用自定義圖標請參考相應的Demo。

六、請注意設置 zTree 的容器樣式 class="ztree"，其中 "ztree" 這個 className，能夠根據須要隨意修改，別忘了修改 css 中對應名字就是了，對於容器若是須要增長其餘特殊樣式，可根據本身的須要進行修改。

參數說明

objjQuery Object 用於展示 zTree 的 DOM 容器

zSettingJSON zTree 的配置數據，具體請參考「setting 配置詳解」中的各個屬性詳細說明

zNodesArray(JSON) / JSON zTree 的節點數據，具體請參考「treeNode 節點數據詳解」中的各個屬性詳細說明

一、v3.x 支持單獨添加一個節點，即若是隻新增一個節點，不用必須包在數組中

二、若是須要異步加載根節點，能夠設置爲 null 或 [ ]

三、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明

返回值JSON

zTree 對象，提供操做 zTree 的各類方法，對於經過 js 操做 zTree 來講必須經過此對象

若是不須要自行設定全局變量保存，能夠利用 $.fn.zTree.getZTreeObj 方法隨時獲取

setting & function 舉例: 簡單建立 zTree 演示

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> ZTREE DEMO </TITLE>

<!--

-->

var zTreeObj,

setting = {

view: {

selectedMulti: false

}

zTreeNodes = [

{"name":"網站導航", open:true, children: [

{ "name":"google", "url":"http://g.cn", "target":"_blank"},

{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},

{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}

]

}

];

$(document).ready(function(){

zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

});

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

$.fn.zTree.getZTreeObj

zTree v3.x 專門提供的根據 treeId 獲取 zTree 對象的方法。

必須在初始化 zTree 之後纔可使用此方法。

有了這個方法，用戶再也不須要本身設定全局變量來保存 zTree 初始化後獲得的對象了，並且在全部回調函數中全都會返回 treeId 屬性，用戶能夠隨時使用此方法獲取須要進行操做的 zTree 對象

參數說明

treeIdString zTree 的 DOM 容器的 id

返回值JSON

zTree 對象，提供操做 zTree 的各類方法，對於經過 js 操做 zTree 來講必須經過此對象

function 舉例: 獲取 id 爲 tree 的 zTree 對象

var treeObj = $.fn.zTree.getZTreeObj("tree");

zTreeObj.checkAllNodes

勾選或取消勾選所有節點。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時有效]

此方法不會觸發 beforeCheck / onCheck 事件回調函數。

參數說明

checked true 表示勾選所有節點； false 表示所有節點取消勾選

不會影響 treeNode.nocheck = true 的節點。

不會影響未加載的節點。

無返回值

function 舉例：勾選所有節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

treeObj.checkAllNodes(true);

zTreeObj.checkNode

勾選或取消勾選單個節點。[setting.check.enable = true 時有效]

v3.x 中 checkNode() 方法能夠觸發 beforeCheck / onCheck 事件回調函數。

參數說明

treeNode 須要勾選或取消勾選的JSON節點數據

請務必保證此節點數據對象是 zTree 內部的數據對象

checked true 表示勾選節點； false 表示節點取消勾選。省略此參數，則根據對此節點的勾選狀態進行 toggle 切換

不影響 treeNode.nocheck = true 的節點。

checkTypeFlag 爲true 表示按照 setting.check.chkboxType 屬性進行父子節點的勾選聯動操做，爲false 表示只修改此節點勾選狀態，無任何勾選聯動操做（我的理解，選中父節點，自動選中其下全部子節點，相似這種聯動）；爲 false 且 treeNode.checked = checked 時，不會觸發回調函數，直接返回

不影響父子節點中 treeNode.nocheck = true 的節點。

callbackFlag 爲 true 表示執行此方法時觸發 beforeCheck & onCheck 事件回調函數；爲 false 表示執行此方法時不觸發事件回調函數，省略此參數，等同於 false

目前無任何返回值

function 舉例：勾選當前選中的節點

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getSelectedNodes();

for (var i=0, l=nodes.length; i < l; i++) {

treeObj.checkNode(nodes[i], true, true);

}

zTreeObj.getChangeCheckedNodes

獲取輸入框勾選狀態被改變的節點集合（與原始數據 checkedOld 對比）。[setting.check.enable = true 時有效]

參數說明

返回值 Array(JSON)

返回所有勾選狀態被改變的節點集合 Array

若是須要獲取每次操做後所有被改變勾選狀態的節點數據，請在每次勾選操做後，遍歷全部被改變勾選狀態的節點數據，讓其 checkedOld = checked 就能夠了。

function 舉例：獲取當前勾選狀態被改變的節點集合

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getChangeCheckedNodes();

zTreeObj.getNodes

獲取 zTree 的所有節點數據

參數說明

返回值 Array(JSON) 所有節點數據

1、Array 僅僅是根節點的集合，

（默認狀況子節點都處於 children 屬性下）；

二、如需遍歷所有節點須要利用遞歸，或利用 transformToArray 方法將數據變成簡單的 Array 集合

三、對於異步加載模式下，還沒有加載的子節點是沒法經過此方法獲取的。

function 舉例： 獲取所有節點數據

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getNodes();

zTreeObj.getCheckedNodes

獲取輸入框被勾選或未勾選的節點集合。[setting.check.enable = true 時有效]

參數說明

checked true 表示獲取被勾選的節點集合，false 表示獲取未勾選的節點集合。省略此參數，等同於 true。

返回值 Array(JSON)

返回所有符合要求的節點集合 Array

function 舉例： 獲取當前被勾選的節點集合

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getCheckedNodes(true);

注意：

1、對於 treeNode.nocheck = true 的節點不進行獲取。

2、默認狀況下，按相似如下配置和初始化方式，調用該API，獲取不到數據，由於所有節點都是沒選中的，解決方案以下：

1）先經過ztreeObject.checkAllNodes(false) 取消全部節點的選中狀態（由於一開始所有節點都是沒選中的，因此調用該API後，全部節點都是改變過狀態的）

2）而後經過ztreeObject.getChangeCheckedNodes() 獲取全部改變過狀態的節點（全部節點）

3）判斷對象關聯的節點id是否在所有節點id範圍內，在則經過ztreeObj.checkNode(treeNode, true, false)

/**

* ztree 設置

setting = {

view: {

selectedMulti: false

check: {

enable: true, // 表示顯示覆選框或單選框

chkStyle:'checkbox' // zTreeObj.checkAllNodes方法依賴的配置

data: {

simpleData: {

enable: true, // true表示使用簡單數據模式

idKey: "id", // 節點數據中保存惟一標識的屬性名稱

pIdKey: "pId", // 節點數據中保存其父節點惟一標識的屬性名稱

rootPId: 0 // 用於修正根節點父節點數據，即 pIdKey 指定的屬性值

}

edit: {

enable: false // 禁止編輯

callback: {

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

}

};

// 獲取資源樹節點

getResourcesTreeNodes().then(function(result) {

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

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

        // 獲取已經關聯資源ID並勾選已關聯資源節點

        $.ajax({

            type: "get",

            url: queryResourceIDsForRoleURL,

            async: true,

            data:{'roleID':currentRole.id},

            success: function (result) {

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

                    var treeObj = $.fn.zTree.getZTreeObj(resouceZtreeID);

                    treeObj.checkAllNodes(false); //  表示所有節點取消勾選

                    var nodes = treeObj.getChangeCheckedNodes() // 獲取改變過狀態的節點

                    var nodeIDs = {};

                    $.each(nodes, function() {

                        nodeIDs[this.id] = this;

});

                    //var keyAarray = Object.keys(nodeIDs);

                    $.each(result.data, function() {

                        var id = this.toString();

                        try {

                            treeObj.checkNode(nodeIDs[id], true, false); // 由於nodeIDs[id]可能不存在

                        } catch (e) {

                            // 啥也不作

});

                } else {

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

},

            error: function(XmlHttpRequest, textStatus, errorThrown) {

                   alert('獲取樹資源節點失敗' + XmlHttpRequest.responseText);

});

    } else {

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

});

後臺代碼片斷

def resource_ztree_nodes(request):

'''

獲取資源節點樹

:param request:

'''

if request.method == 'GET':

try:

ztree_nodes_list = []

def get_sub_resource(resource, father_node):

'''

獲取子級資源

'''

nonlocal ztree_nodes_list

resource_id = resource['id'] # 獲取上級資源id點的id

# 僅查找狀態爲 1 即設置爲顯示的資源

sub_sources = Resource.objects.filter(parent_id=resource_id).order_by('order').values()

if sub_sources: #若是存在子級資源，遍歷添加子級資源

father_node['isParent'] = 'true'

for sub_source in sub_sources:

sub_node = {} # 重置變量爲字典，用於存儲下一個節點

sub_node['id'] = sub_source['id']

sub_node['name'] = sub_source['name'] + ' [id:%s 排序:%s]' % (str(sub_source['id']), str(sub_source['order']))

parent_id = sub_source['parent_id']

if not parent_id:

parent_id = 0

sub_node['pId'] = parent_id

sub_node['open'] = 'true'

ztree_nodes_list.append(sub_node)

get_sub_resource(sub_source, sub_node)

# 獲取全部一級資源

father_resources = Resource.objects.filter(parent_id__isnull=True).order_by('order').values()

for father_resource in father_resources:

father_node = {}

father_node['id'] = father_resource['id']

father_node['name'] = father_resource['name'] + ' [id:%s 排序:%s]' % (str(father_resource['id']), str(father_resource['order']))

parent_id = father_resource['parent_id']

if not parent_id:

parent_id = 0

father_node['pId'] = parent_id

father_node['open'] = 'true'

ztree_nodes_list.append(father_node)

get_sub_resource(father_resource, father_node) # 獲取子級資源

content = {'data': ztree_nodes_list, 'msg':'獲取資源節點樹成功', 'success':'true', 'reason':''}

except Exception as e:

logger.error('getting resource failed: %s' % e)

content = {'data':[], 'msg':'獲取資源節點樹失敗', 'success':'false', 'reason': '%s' % e}

else:

logger.error('only get method allowed for getting resource ztree nodes')

content = {'data':[], 'msg':'獲取資源節點樹失敗', 'success':'false', 'reason': 'only get method allowed for getting resource ztree nodes'}

return JsonResponse(content)

參考連接：

http://www.treejs.cn/v3/demo.php#_101

http://www.treejs.cn/v3/api.php

個人博客即將同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=2w2jljy48u0w0

相關標籤/搜索

bootstrap+ztree+lodash+jquery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。