用html+css+js實現一個無限級樹形控件

時間 2019-12-09

標籤 html+css+js html css 實現一個無限控件欄目 HTML 简体版

原文原文鏈接

主要參考：https://blog.csdn.net/cc_fys/article/details/81284638javascript

增長內容：在頁面上顯示所選葉子節點的文本，便於向後臺發送。css

<!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" onclick="sel(this)" data-leaf="'+attr+'"></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(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>