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
}
};
......
$.fn.zTree.init
zTree 初始化方法，創建 zTree 必須使用此方法
1、頁面需要進行 W3C 申明，例如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。
2、需要首先加載 jquery-1.4.2.js 或其他更高版本的 jQuery 。
3、需要加載 jquery-ztree.core-3.0.js，如果需要用到 編輯功能 或 checkbox / radio 還需要分別加載 jquery-ztree.exedit-3.0.js 和 jquery-ztree.excheck-3.0.js 。
4、需要加載 zTreeStyle.css 以及 zTreeStyle 目錄下的 img 文件。
5、如果需要使用自定義圖標請參考相應的Demo。
6、請注意設置 zTree 的容器樣式 class="ztree"，其中 "ztree" 這個 className，可以根據需要隨意修改，別忘了修改 css 中對應名字就是了，對於容器如果需要增加其他特殊樣式，可根據自己的需要進行修改。
參數說明
objjQuery Object 用於展現 zTree 的 DOM 容器
zSettingJSON zTree 的配置數據，具體請參考 “setting 配置詳解”中的各個屬性詳細說明
zNodesArray(JSON) / JSON zTree 的節點數據，具體請參考 “treeNode 節點數據詳解”中的各個屬性詳細說明
1、v3.x 支持單獨添加一個節點，即如果只新增一個節點，不用必須包在數組中
2、如果需要異步加載根節點，可以設置為 null 或 [ ]
3、使用簡單數據模式，請參考 setting.data.simpleData 內的屬性說明
返回值JSON
zTree 對象，提供操作 zTree 的各種方法，對於通過 js 操作 zTree 來說必須通過此對象
如果不需要自行設定全局變量保存，可以利用 $.fn.zTree.getZTreeObj 方法隨時獲取
setting & function 舉例: 簡單創建 zTree 演示
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core.js"></script>
<!--
<script type="text/javascript" src="jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="jquery.ztree.exedit.js"></script>
-->
<SCRIPT type="text/javascript" >
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>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</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 屬性下）；
2、如需遍歷全部節點需要利用遞歸，或利用 transformToArray 方法 將數據變成簡單的 Array 集合
3、對於異步加載模式下，尚未加載的子節點是無法通過此方法獲取的。
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