无限分类的实现

实现的源代码

<div class="layui-card-body">
        <!--主体内容 start-->
        <div class="layui-row" style="margin-bottom: 10px;">
            <div class="layui-col-md2">
                <button class="layui-btn layui-btn-danger" onclick="service()" id="service">服务管理</button>
            </div>
            <div class="layui-col-md2" style="display: none" id="service_add">
                <button class="layui-btn layui-btn-normal" onclick="service_add()">服务管理添加</button>
            </div>
            <div class="layui-col-md2">
                <button class="layui-btn btn" onclick="classificat()" id="classificat">服务分类管理</button>
            </div>
            <div class="layui-col-md2" style="display: none" id="classificat_add">
                <button class="layui-btn layui-btn-normal" onclick="classificat_add()">服务分类添加</button>
            </div>
            <div class="layui-col-md4" id="ser_on_k" style="display: none">
                <div class="layui-col-md3">
                    <input type="text" id="ser_row" name="ser_row" required  lay-verify="required" placeholder="请输入项目" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md1" >
                    <button style="margin-left: 50px;" class="layui-btn" onclick="ser_on()">搜索</button>
                </div>
            </div>

        </div>
        <table id="demo" lay-filter="test"></table>
        <!--主体内容 end-->
    </div>
html代码：代码中的，.layui-form 是获取这个div的demo的节点

 //服务分类管理
    function classificat(){
        $("#classificat_add").css("display","block");
        $("#service_add").css("display","none");
        $("#ser_on_k").css("display","none");
        $('.layui-form ').html('<table class="layui-table layui-form" id="test-tree-table"></table>').css('overflow-y','scroll').css('padding','20px 20px 50px');
        layui.config({
            base: './Public/layuiadmin/lay_table/js/',
        });
        layui.use(['treetable','form'],function(){
            $.post('{:U("api/user/merchant_items_get")}',{},function(data){
                if(data.success){
                    console.log(data);
                    var data=data.data;
                    var o = layui.$,treetable = layui.treetable;
                    var form = layui.form,layer = layui.layer;
                    treetable.render({
                        elem: '#test-tree-table',
                        data: data,
                        field: 'title',
                        is_checkbox: true,
                        checked:[1,2,3,4],
                        /*icon_val: {
                            open: "&#xe619;",
                            close: "&#xe61a;"
                        },
                        space: 4,*/
                        cols: [
                            {
                                field: 'title',
                                title: '管理分类名称',
                                width: '50%',
                                template: function(item){
                                    if(item.level == 1){
                                        return '<span style="color:red;">'+item.title+'</span>';
                                    }
                                    if(item.level == 2){
                                        return '<span style="color:green;">'+item.title+'</span>';
                                    }
                                    return item.title;
                                }
                            },
                            {
                                field: 'actions',
                                title: '操作',
                                width: '50%',
                                template: function(item){
                                    var tem = [];
                                    tem.push('<button lay-filter="edit" class="layui-btn">编辑</button>');
                                    if(item.pid == 0){
                                        tem.push('<button class="add-child layui-btn layui-btn-danger" lay-filter="delete">删除</button>');
                                    }
                                    if(item.pid > 0){
                                        tem.push('<button class="set-attr layui-btn layui-btn-danger" lay-filter="delete">删除</button>');
                                    }
                                    return tem.join(' <font>|</font> ')
                                },
                            },
                        ]
                    });

                    treetable.on('treetable(edit)',function(data){

                        EDIT= layer.open({
                            type: 1,
                            skin: 'layui-layer-rim',
                            area: ['50%', '50%'],
                            content: $('#edit_update')
                        });
                        $("#edit_title").val(data.item.title);
                        $("#edit_sort").val(data.item.sort);
                        var edit_id=data.item.id;
                        var edit_pid=data.item.pid;
                        $("#edit_title").attr('data-edid',edit_id).attr('data-edpid',edit_pid);

                    });

                    treetable.on('treetable(delete)',function(data){
                        var id=data.item.id;
                        layer.confirm('你确定要删除么？', {
                            btn: ['确定', '取消'] //可以无限个按钮
                            ,end:function () {
                                $("#classificat")[0].click();
                            }
                        }, function(index, layero){
                            //按钮【按钮一】的回调
                            $.post('{:U("api/user/merchant_items_del")}',{'id':id},function(data){
                                if(data.success){
                                    layer.msg(data.msg);
//                                    location.reload();
                                }else{
                                    layer.alert(data.msg);
                                }
                            });

                        }, function(index){
                            //按钮【按钮二】的回调
                        });

                    });

                    o('.up-all').click(function(){
                        treetable.all('up');
                    });

                    o('.down-all').click(function(){
                        treetable.all('down');
                    });

                    o('.get-checked').click(function(){
                        console.dir(treetable.all('checked'));
                    });

                    form.on('switch(status)',function(data){
                        layer.msg('监听状态操作');
                        console.dir(data);

                    })

                }
            })
//              var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
        })
    }

    //服务管理 分类的编辑
    function edit_update(){
        var title=$("#edit_title").val();
        var sort=$("#edit_sort").val();
        var id=$("#edit_title").attr("data-edid");
        var pid=$("#edit_title").attr("data-edpid");
        $.post('{:U("api/user/merchant_items_edit")}',{'id':id,'pid':pid,'title':title,'sort':sort},function(data){
            if(data.success){
                layer.msg(data.msg);
                layer.close(EDIT);
                classificat();
            }else{
                layer.alert(data.msg);
            }
        });
    }
    //服务分类管理 添加
    function classificat_add() {
        var url='/XXX/api.php?s=/home/user/merchant_items_add';
        var DD=layer.open({
            type: 2,
            title: '服务分类管理',
            shadeClose: true,
            shade: 0.8,
            area: ['60%', '60%'],
            end:function(){
                location.reload();
            },
            content: url //iframe的url
        });
    }
接口代码：

//商品分类设置的获取
public function memchart_lists_category_get(){
    $data=M("pro.merchant_goods_type")->field("id,pid,name as title,sort")->order("sort ASC")->select();
    $list["data"]=$data;
    success("获取成功",$list);
}
说明：
接口返回的字段必须是：
id pid title sort 这四个