JQuery Ztree 树插件配置与应用小结

by:授客 QQ1033553122

测试环境

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">

<!-- 上述3meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

    {% 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) 全部节点数据

1Array 仅仅是根节点的集合

(默认情况子节点都处于 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

JQuery Ztree 树插件配置与应用小结的更多相关文章

  1. Jquery ztree树插件

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. Jquery ztree树插件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  4. Jquery的树插件jqxTreeGrid的使用小结(实现基本的增删查改操作)

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  5. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  6. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  7. 树结构数据的展示和编辑-zTree树插件的简单使用

    最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...

  8. 在vue中使用ztree树插件

    插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...

  9. 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

随机推荐

  1. Android 自定义吐司通知

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  2. Linux电源管理(7)_Wakeup events framework

    1. 前言 本文继续"Linux电源管理(6)_Generic PM之Suspend功能"中有关suspend同步以及PM wakeup的话题.这个话题,是近几年Linux ker ...

  3. 三个月前的评测拖延三个月仍旧是拳王No.1吗?YES!

    距前作展开隐形的翅膀,WPR003N补完篇仿佛已经隔了几个光年,最近替换了2019发现android sdk需要手冻放入一个tools2文件夹来延续Eclipse style的m$ distribut ...

  4. C#中转换运算符explicit、implicit、operator、volatile研究

    C#中的这个几个关键字:explicit.implicit与operator,估计好多人的用不上,什么情况,这是什么?字面解释:explicit:清楚明白的;易于理解的;(说话)清晰的,明确的;直言的 ...

  5. php 将科学计算法得出的结果转换成原始数据 NumToStr

    由于php最大只支持显示 15位因的数据运算,大于15位的2数加减乘除的数据的结果,会直接用科学计数法显示, 但在现实生活中,科学计数法不利于普通人识别,所以,本函数将:科学计数法的出的结果转换成原始 ...

  6. mysql5.5下载安装教程

    下载地址:https://dev.mysql.com/downloads/mysql/ 这里选择的是5.5的版本: 步骤1: 步骤2: 步骤三: 步骤四: 步骤5: 步骤6: 步骤7: 步骤8: 步骤 ...

  7. JS---DOM---tab切换案例实现---排他

    tab切换案例实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  8. iPhone 启动页尺寸

    iPhone 启动页尺寸 4 640*960 5 640*1136 6 750*1334 6p 1242*2208

  9. OPENGL 坐标轴转换

    坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴  OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...

  10. 通过U盘在物理机安装CentOS出现Timeout的问题

    错误信息:centos dracut timeout..... 解决方案: 在进入install页面是,按e,启动编辑.要保证Label与U盘的卷标保持一致即可.