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

    主要参考: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;
              0px;
              height:0px;
              border-top-color: black;
     
          }
           /* 展开完毕*/
         .switch-close
         {
             margin-left:-12px;
             border:6px solid transparent;  
             display:inline-block;
             0px;
             height:0px;
             border-left-color: black;
             margin-bottom: 2px;
     
         }
       /* 改变CheckBox样式*/
         input[type='checkbox']{
              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>
  • 相关阅读:
    Android开发 ViewConfiguration View的配置信息类
    Android 开发 倒计时功能 转载
    Android 开发 关于7.0 FileUriExposedException异常 详解
    Android 开发 实现文本搜索功能
    Android 开发 Activity里获取View的宽度和高度 转载
    Android 开发 存储目录的详解
    Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView
    Android 开发 将window变暗
    Android 开发 DisplayMetrics获取Android设备的屏幕高宽与其他信息
    Android 开发 DP、PX、SP转换详解
  • 原文地址:https://www.cnblogs.com/pu369/p/11010845.html
Copyright © 2011-2022 走看看