用html+css+js实现一个无限级树形控件

分手后的思念是犯贱 2021-12-07 11:29 451阅读 0赞

主要参考：https://blog.csdn.net/cc\_fys/article/details/81284638

增加内容：在页面上显示所选叶子节点的文本，便于向后台发送。

<!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 red;  /* 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: 30px;  /* 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 class="warp">
        <ul id="container">
        </ul>
    </div>
     选择的叶子节点是：<span id="sp"></span><br/> 
     
    <script type="text/javascript">
     Array.prototype.remove = function(val) { 
    var index = this.indexOf(val); 
    if (index > -1) { 
    this.splice(index, 1); 
    } 
    };
        //结构
        var json={
            'A':{
                'B':null,
                'C':{
                    'd':null,
                    'e':null,
                    'f':null
                },
                'g':null
            },
            'h':{
                'i':null,
                'j':null
            },
            'k':null
        };
     
    //这里生成DOM
        function generate(json,par)
        {
            for(var attr in json)
            {
                var ele=document.createElement('li');
                if(!json[attr])
                    ele.innerHTML=' <input type="checkbox" οnclick="sel(this)" data-leaf="'+attr+'"></input>'+attr;
                else
                {
                    ele.innerHTML='<span><span class="switch-open" οnclick="toggle(this)"></span><input type="checkbox" οnclick="checkChange(this)"></input>'+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++)
                    {
                    var ch = oul.querySelectorAll('input')[i];
                    ch.checked=true;
                    
                    var sp = document.getElementById('sp');
                    var arr = sp.innerHTML.split(';');
                    if(arr[0]==""){
                    arr.shift()    
                    }
                    var leaf = ch.dataset.leaf;
                    arr.remove(leaf);/*防止重复添加*/
                    if(leaf !=undefined){
                    arr.push(leaf)
                    }
                    sp.innerHTML=arr.join(';');
                        console.log(ch.type + leaf)
                    }
            }
            else
            {
                for(var i=0;i<oul.querySelectorAll('input').length;i++)
                {
                var ch = oul.querySelectorAll('input')[i];
                    ch.checked=false;
                    
                    var sp = document.getElementById('sp');
                    var arr = sp.innerHTML.split(';');
                    if(arr[0]==""){
                    arr.shift()    
                    }
                    
                    var leaf = ch.dataset.leaf
                    arr.remove(leaf)
                    sp.innerHTML=arr.join(';');
                }
            }
        }
        function sel(e)
        {
        var sp = document.getElementById('sp');
        var arr = sp.innerHTML.split(';');
            if(arr[0]==""){
        arr.shift()    
        }
        var e1 = e.nextSibling;
        if(e.checked){
        arr.push(e1.nodeValue);
        }else{
        arr.remove(e1.nodeValue);
        }
        sp.innerHTML=arr.join(';');
         console.log(arr) 
        }    
          
    </script>
     
    </body>
    
    <html>

转载于:https://www.cnblogs.com/pu369/p/11010845.html