组织架构树实例

数据结构：

var data = {
      "info":"组织层级树",
      "data":[
        {
          "party_id":1,
          "party_name":"组织0",
          "communist":[
            {
              "user_id":1,
              "user_name":"张三",
            }
          ],
          "child":[
            {
              "party_id":2,
              "party_name":"组织0-0",
              "communist":[
                {
                  "user_id":1,
                  "user_name":"陈立夫",
                }
              ],
              "child":[
                {
                  "party_id":1,
                  "party_name":"组织0-0-0",
                  "communist":[
                    {
                      "user_id":4,
                      "user_name":"赵倩0",
                    },
                    {
                      "user_id":4,
                      "user_name":"赵倩1",
                    },
                    {
                      "user_id":4,
                      "user_name":"赵倩2",
                    }
                  ],
                  "child":[],
                },
                {
                  "party_id":1,
                  "party_name":"组织0-0-1",
                  "communist":[
                    {
                      "user_id":1,
                      "user_name":"周天昊0",
                    },
                    {
                      "user_id":1,
                      "user_name":"周天昊1",
                    },
                    {
                      "user_id":1,
                      "user_name":"周天昊2",
                    },
                  ],
                  "child":[],
                }
              ],
            },
            {
              "party_id":1,
              "party_name":"组织0-0-2",
              "communist":[
                {
                  "user_id":1,
                  "user_name":"李昊0",
                },
                {
                  "user_id":1,
                  "user_name":"李昊1",
                },
                {
                  "user_id":1,
                  "user_name":"李昊2",
                },
                {
                  "user_id":1,
                  "user_name":"李昊3",
                },
              ],
              "child":[],
            }
          ],
        }
      ],
    }

html:

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

css:

ul>li{
         list-style: none;
     }
     ul{
       padding-left: 15px;
     }
       /* 可展开*/
      .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: 16px;
         height: 16px;
         -webkit-appearance:none;
         -moz-appearance: none;
         border: 1px solid #c9c9c9;
         border-radius: 3px;
         outline: none;
         color:white;
         text-align: center;
         position:relative;
         margin:0px 2px;
     }
     input[type=checkbox]:checked{
       background-color: #e9ecee;
       border: 1px solid #adb8c0;
     }
     input[type=checkbox]:checked:before{
       content: '\2714';
       font-size: 12px;
       position: absolute;
       top: -3px;
       left: 2px;
       color: #99a1a7;
     }

js:

function generate(data,par)
    {
        for(var i = 0;i < data.length;i++)
        {
            var ele=document.createElement('li');
            if(data[i].child.length <= 0){
              ele.innerHTML='<span><span class="switch-close" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+data[i].party_name+'</span>';
              var html = '';
              for(var j = 0;j < data[i].communist.length;j++){
                html += ' <li><input type="checkbox"></input>'+data[i].communist[j].user_name+'</li>';
              }
              var userBox=document.createElement('ul');
              userBox.innerHTML = html;
              userBox.style.display = 'none';
              ele.appendChild(userBox);
            }else{
                ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+data[i].party_name+'</span>';
                var nextpar=document.createElement('ul');
                ele.appendChild(nextpar);
                generate(data[i].child,nextpar);
            }
            par.appendChild(ele);
        }
    }
    generate(data.data,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;
            }
        }
    }

效果：