ztree 树形结构

前置页面

Html:

<link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>

<div>
     <ul id="treeDemo" class="ztree"></ul>
</div>

 

Js：

 

var caseTreeInit = function () {
    var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        check:{
            enable: true,    //可勾选
            chkStyle: 'checkbox',   //可多选
            }
        };

    $(document).ready(function(){
        $.get("/testtask/get_case_tree",{},
        function (resp) {
            // console.log(resp.data)
            var zNodes=resp.data;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(false);   //控制目录是否默认展开
        });

    });
}

function savefun() {
    var name = $("#name").val();
    var descripe = $("#descripe").val();
    var cases=Array();
    var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
    var nodes=treeObj.getCheckedNodes(true);         //获取对应节点
    console.log("nodes",nodes);
    for(let i=0;i<nodes.length;i++){
        if(nodes[i].isParent == false){
            console.log("用例的id",nodes[i].id);
            cases.push(nodes[i].id)
        }

    }
                //将列表转为字符串,然后传给后端
    casesStr=JSON.stringify(cases);
    $.post("/testtask/save_task",{
        name: name,
        desc: descripe,
        cases: casesStr
    },function (resp) {
        if(resp.status=10200){
            window.alert("创建任务成功");
            window.location.href="/testtask/";
        }
    });
}

后端编写 save_task接口，保存数据到数据库中。

 

 

后端接口

def get_case_tree(request):
    if request.method == 'GET':
        data_list=[]
        projects=Project.objects.all()
        for project in projects:
            project_dict={
                "name": project.name
            }

            modules=Module.objects.filter(project_id=project.id)
            module_list=[]
            for module in modules:
                module_dict={
                    "name":module.name
                }
                cases=TestCase.objects.filter(module_id=module.id)
                case_list=[]
                for case in cases:
                    case_dict={
                        "name": case.name
                    }
                    case_list.append(case_dict)

                module_dict['children']=case_list
                module_list.append(module_dict)

            project_dict['children']=module_list
            data_list.append(project_dict)

        return  JsonResponse({"result": '请求成功',"data":data_list})