jq無限極列表

框架layui
實現無限極列表無摺疊
前端實現無限極，後端給出接口，可以自己定義給json數據
最終效果如下


主要代碼如下

idname追加到的id
list-->arr
pleft->左邊距
function apend(idname,list,pleft) {
            var pleft = pleft;
            var html = "";
            for(var i in list){
                html += '<div class="layui-fluid">';
                    html += '<div class="layui-row" style="padding: 0px">';

                        html += '<div class="layui-col-sm4">';
                            html += '<i class="layui-icon layui-icon-windows" style="margin-right: 10px;margin-left: '+pleft+'px;"></i>';
                            html += '<span>'+list[i].title+'</span>';
                        html+='</div>';

                        html += '<div class="layui-col-sm5">';
                            html += '<div style="padding:0px 20px;">';
                                html += '<span>'+list[i].m+'</span>';
                                html += '<span>'+list[i].c+'</span>';
                                html += '<span>'+list[i].f+'</span>';
                            html+='</div>';
                        html+='</div>';

                        html += '<div class="layui-col-sm3">';
                        if(list[i].type == 1){
                            html +='<button type="button" data-type="addopen" data-id="'+list[i].id+'"  class="layui-btn layui-btn-xs "  >添加</button>';
                        }else{
                            html +='<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"  >添加</button>';
                        }
                        html+='<button type="button" data-type="editopen"  data-id="'+list[i].id+'"  class="layui-btn layui-btn-xs layui-btn-warm">修改</button>';
                        if(list[i].type == 1){
                            html +='<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"  >刪除</button>';

                        }else{
                            html +='<button type="button" data-type="deleopen"  data-id="'+list.id+'"  class="layui-btn layui-btn-xs layui-btn-danger">刪除</button>';
                        }

                        html+='</div>';

                    html+='</div>';
                html+='</div>';
                html+='<hr class="layui-bg-gray">';
                html+='<div id="li_'+list[i].id+'" >';
                var children = list[i].children;
                if(children !== undefined){
                    html+= apend("li_"+list[i].id,children,pleft+20);
                }
                html+='</div>';
            }
            return html
        }

數據返回如下格式

調用函數

html
<div id="menlists">

 </div>
 ajax請求返回json數據menlist，
$("#menlists").append(apend("#menlists",menlist,10));