实现层级显示，data_trees为请求响应时传入的数据

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_42517533

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量134

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_42517533/article/details/132838115

版权

文章介绍了如何使用HTML、CSS和JavaScript创建一个可展开的树形菜单，并结合PythonDjango后端，通过数据库查询获取层级数据并动态渲染。展示了列表转树形结构以及处理展开与收起的逻辑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>树形菜单示例</title>
    <style type="text/css">
     ul>li{
         list-style: none;
     }
       /* 可展开*/
      .switch-open
      {
          margin-left:-12px;
          border:6px solid transparent;
          display:inline-block;
          width:0px;
          height:0px;
          border-top-color: black;

      }
       /* 展开完毕*/
     .switch-close
     {
         margin-left:-12px;
         border:6px solid transparent;
         display:inline-block;
         width:0px;
         height:0px;
         border-left-color: black;
         margin-bottom: 2px;

     }
       /* 改变CheckBox样式*/
     input[type='checkbox']{
         width: 20px;
         height: 20px;

         -webkit-appearance:none;
         -moz-appearance: none;
         border: 1px solid #c9c9c9;
         border-radius: 3px;
         outline: none;
         color:white;
         text-align: center;
     }
     input[type='checkbox']:before
     {
         content: '√ ';
         color:transparent;
     }
     input[type=checkbox]:checked{
         background-color: #30add6;
     }
     input[type=checkbox]:checked:before{
         content: '√';
         color:white;
         font-weight: bold;
     }


    </style>
</head>
<body>
<div>
   刚好放胡椒粉国防军工附图
    {{data_trees}}
</div>

<div class="warp">
    <ul id="container">
    </ul>
</div>

<script type="text/javascript">

    //结构
    var jsons = {{data_trees}}


//这里生成DOM
    function generate(json,par)
    {
        for(var attr in json)
        {
            var ele=document.createElement('li');
            if(!json[attr])
                ele.innerHTML=' <input type="checkbox"></input>'+attr;
            else
            {
                ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
                var nextpar=document.createElement('ul');
                ele.appendChild(nextpar);
                generate(json[attr],nextpar);
            }
            par.appendChild(ele);
        }
    }
    generate(jsons ,document.getElementById('container'));

    //处理展开和收起
    function toggle(eve)
    {
        var par=eve.parentNode.nextElementSibling;
        if(par.style.display=='none')
        {
            par.style.display='block';
            eve.className='switch-open';

        }
        else
        {
            par.style.display='none';
            eve.className='switch-close';
        }
    }

//处理全部勾选和全部不选
    function checkChange(eve)
    {
        var oul=eve.parentNode.nextElementSibling;
        if(eve.checked)
        {
                for(var i=0;i<oul.querySelectorAll('input').length;i++)
                {
                    oul.querySelectorAll('input')[i].checked=true;
                }
        }
        else
        {
            for(var i=0;i<oul.querySelectorAll('input').length;i++)
            {
                oul.querySelectorAll('input')[i].checked=false;
            }
        }
    }
</script>




</body>
</html>

views,py 文件如下：

def Showtree(request):
    cursor = connection.cursor()
    cursor.execute("SELECT * FROM levels")
    levels = cursor.fetchall()
    new_data = []
    for level in levels:
        data_dict = {}
        data_dict['Lid'] = level[0]
        data_dict['LevelName'] = level[1]
        data_dict['parent_id'] = level[3]
        #data_dict['ConnectName'] = level[4]
        new_data.append(data_dict)
    # print('原始数据  ', new_data)
    data_tree = list_to_tree(new_data)
    data_trees = json.dumps(data_tree, ensure_ascii=False, indent=2)
    print('输出数据', data_trees)
    return render(request, 'Curves/Showtree.html', {'data_trees': data_trees})



def list_to_tree(data):
    root = []
    node = []

    # 初始化数据，获取根节点和其他子节点list
    for d in data:
        # print('输出的是在', d)
        d["choice"] = 0
        if d.get("parent_id") == '0':
            root.append(d)
        else:
            node.append(d)
    # print("root----",root)
    # print("node----",node)
    # 查找子节点
    for p in root:
        add_node(p, node)

    # 无子节点
    if len(root) == 0:
        return node

    return root


def add_node(p, node):
    # 子节点list
    p["children"] = []
    for n in node:
        if n.get("parent_id") == str(p.get("Lid")):
            p["children"].append(n)

    # 递归子节点，查找子节点的节点
    for t in p["children"]:
        if not t.get("children"):
            t["children"] = []
        t["children"].append(add_node(t, node))

    # 退出递归的条件
    if len(p["children"]) == 0:
        p["choice"] = 1
        return