【Django+zTree实现目录树】

最新推荐文章于 2023-03-14 20:14:01 发布

原创最新推荐文章于 2023-03-14 20:14:01 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#django #python #后端

本文介绍如何使用Django和zTree创建目录树结构。通过页面代码展示zTree的JavaScript应用，同时详细解释Django的view和url配置。最终目标是实现在页面上选择目录，并监测 SVN 路径变化，以便通过邮件通知目录内容的变更。

部署运行你感兴趣的模型镜像

页面代码

需要zTree的js

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.core.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj; //定义ztree对象
        var setting = {          //此处根据自己需要进行配置
            view: {
                selectedMulti: true, //设置是否能够同时选中多个节点
                showIcon: true,      //设置是否显示节点图标
                showLine: true,      //设置是否显示节点与节点之间的连线
                showTitle: true,     //设置是否显示节点的title提示信息
                },
            data: {
                simpleData: {
                 enable: false//后端传递数据使用的标准模式
                    }
            },
            callback: {
                onClick: onClick//点击目录时的函数
        }

        };
        $.ajax({
            url:"/GetTreeData/",//请求获取目录树
            dataType:"json",
            success: function(data){
                //jdata=JSON.parse(data);
                //console.log(data);
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                }
            }
        );
        function onClick(e, treeId, treeNode) {
            //获取被点击的目录，将该目录的名称dir和真实路径传real_path递到后端,
            $.ajax({
                url: '/Click_Dir/',
                type: 'post',
                data: {
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                    dir:treeNode.name,
                    //click_path:treeNode.real_path,//这里是自定义treeNode的read_path参数，用来传递目录的真实路径
                    },
                success: function(data){
                //console.log(data);
                }
            });
        };
    </SCRIPT>
</HEAD>
<BODY>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</BODY>
</HTML>

django的view代码

tree_dir是根据路径生成目录json的py脚本
https://blog.youkuaiyun.com/cxym2022/article/details/125911718

from django.http import HttpResponse, JsonResponse
from django.shortcuts import render
import json
from svn_app.tree_dir import node as znode


def get_tree_data(request):
    response = JsonResponse(znode, safe=False)
    return response


def click_dir(request):
    if request.method == "POST":
        dir_name = request.POST.get("dir")
        #click_path=request.POST.get("click_path")
        #print(click_path)
        #return HttpResponse(mail_list)
    return render(request, "home.html")


def home(request):
    return render(request, 'home.html')

django的url

from django.contrib import admin
from django.urls import path
from svn_app import views as svn_app_views

urlpatterns = [
    path('', svn_app_views.index),
    path('home/', svn_app_views.home),
    path('admin/', admin.site.urls),
    path('GetTreeData/', svn_app_views.get_tree_data, name='GetTreeData'),
    path('Click_Dir/', svn_app_views.click_dir, name='Click_Dir'),

目标是可以用来对svn的路径进行扫描，根据页面选择的目录，邮件通知目录变更的内容

您可能感兴趣的与本文相关的镜像

Qwen3-8B

文本生成

Qwen3

Qwen3 是 Qwen 系列中的最新一代大型语言模型，提供了一整套密集型和专家混合（MoE）模型。基于广泛的训练，Qwen3 在推理、指令执行、代理能力和多语言支持方面取得了突破性进展