JQuery Ztree 树插件配置与应用小结
jquery ztree 树插件配置与应用小结
by:授客 qq：1033553122
测试环境
win7
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)
参考链接：
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2w2jljy48u0w0
推荐阅读
-
JQuery Ztree 树插件配置与应用小结
-
jQuery插件zTree实现的基本树与节点获取操作示例
-
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
-
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
-
jQuery插件zTree实现基本树与节点获取详解
-
JQuery Ztree 树插件配置与应用小结
-
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
-
jQuery插件zTree实现基本树与节点获取详解
-
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结