用js仿照树型

Layui组件的树型结构很好用，看起来也具有观赏性。但代码是万能的，我怎么能浪费代码转而轻松的使用layui。其实，我是想自己也试着一份类似layui树型结构的代码。不多说了代码呈上：

 我尝试的是三层树形结构的代码，事先的数据，也是只有三层嵌套。

 $("#content_div").append('<div class="divs" id="divs"><span style="float: left;">-</span><h3 where="0"><i class="layui-icon layui-icon-list"></i>'+data.suppliername+'</h3></div>');

 这句代码放的是第一层的div，data是post上传的返回值。用post上传，从数据库中查询数据，然后将数据结构逻辑成嵌套格式。

  for (var i=0;i<data.childVo.length;i++){

      $("#divs").append('<div class="divss"id="divss'+i+'"><span class="span">-</span><h3 where="0'+i+'"><i class="layui-iconlayui-icon-list"></i>'+data.childVo[i].suppliername+'</h3></div>');

      接下来的分支都是放在for循环里的，当前循环的就是二层嵌套。Id名我是为了点击反馈用的。

       var data2 = data.childVo[i].childVo;

for (var j=0;j<data2.length;j++){

        $("#divss"+i+"").append('<div class="divsss"><h3 where="0'+i+j+'" ipone="'+data2[j].contactnumber+'" linkman="'+data2[j].linkman+'" def="'+data2[j].defaults+'" ind="'+data2[j].supplierid+'" index="'+data2[j].suppliernumber+'"><i class="layui-icon layui-icon-file-b"></i>'+data2[j].suppliername+'</h3></div>')

       这是三层嵌套的最后一层，这一层的h3标签属性比较多，也是为了点击反馈。

                                 }

                                 }

       下面的代码是为了做到点击减号将树状图收起，点击加号将树桩图展开。

                    $("#divs > span").click(function (){

                    $("#divs>div").toggle("slow",function(){

                        if ( $("#divs>div").css("display")=="none"){

                            $("#divs > span").text("+");

                        }else{

                            $("#divs > span").text("-");

                        }

                    });

                })

                var divs = $("#divs>div>span");

                $.each(divs,function (i,n){

                    $(n).click(function (){

                        $("#divss"+i+"> div").toggle("slow",function (){

                            if ($("#divss"+i+"> div").css("display")=="none"){

                                $("#divss"+i+" > span").text("+");

                            }else{

                                $("#divss"+i+" > span").text("-");

                            }

                        });

                    })

                })

展开：

 

收起：