以JSON数据源用HTML实现三级树

最新推荐文章于 2023-05-05 10:23:06 发布

my-sh

最新推荐文章于 2023-05-05 10:23:06 发布

阅读量230

点赞数

文章标签： html json javascript

本文链接：https://blog.csdn.net/m0_69914454/article/details/129236108

版权

<!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;
         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 class="warp">
    <ul id="container">
    </ul>
</div>
 
 
<script type="text/javascript">
 
    //结构
    var json={
        '0-0':{
            '0-0-0':null,
            '0-0-1':{
                '0-0-1-0':null,
                '0-0-1-1':null,
                '0-0-1-2':null
            },
            '0-0-2':null
        },
        '0-1':{
            '0-1-0':null,
            '0-1-1':null
        },
        '0-2':null
    };
 
//这里生成DOM
    function generate(json,par)
    {
        for(var attr in json)
        {
            var ele=document.createElement('li');
            if(!json[attr])
                ele.innerHTML=''+attr;
            else
            {
                ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span>'+attr+'</span>';
                var nextpar=document.createElement('ul');
                ele.appendChild(nextpar);
                generate(json[attr],nextpar);
            }
            par.appendChild(ele);
        }
    }
    generate(json,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>