JQ树形菜单加表格混合使用:treeTable组件使用

前端:

 <div class="demo-side" style="margin-top: 50px">
        <table id="demoTreeTb"></table>
    </div>

js:

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<link href="__STATIC__/layui_2.5.5/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="__STATIC__/layui_2.5.5/layui.all.js"></script>
<script>
    layui.config({
        base: '/Public/static/layui_2.5.5/'   //这里是treeTable.js 的目录 例如我的treeTable.js放在这个目录下
    }).use(['treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        treeTable.render({
            elem: '#demoTreeTb',
            url: 'menus',
            toolbar: true,
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'id',  //菜单的id名
                pidName: 'parent_id', //父id 字段名
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            cols: [[
                {type: 'numbers',width:50},
                {type: 'checkbox'},
                {field: 'cate_name', title: '分类名称', minWidth: 65},

                {field: 'remark', title: '备注'},

                {field: 'add_time', title: '创建时间'},
                {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
            ]],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var id = obj.data.id;
            if (event === 'del') {
                $.ajax({
                    url: "del_cate_menu_data",    //后台数据请求地址
                    type: "post",
                    data:{id:id},
                    async: false,
                    success: function (result) {
                        if(result == 'success'){
                            layer.msg('删除成功');
                            obj.del();
                        }

                    }
                });

            } else if (event === 'edit') {
                layer.open({
                    title:'编辑',
                    type: 2,
                    // shadeClose: true, //点击遮罩关闭层
                    area: ['400px', '450px'],
                    content: "goods_class_info?id="+id,

                    success:function (layero, index) {

                        // layer.close(layer.index)


                        // layer.close(layer.index)
                        // layer.msg('修改成功');
                        // obj.update({cate_name: '新的名称'});
                    },
                    cancel: function(index, layero){
                        location.reload()
                    }
                });


                //




            }
        });

    });
</script>

后端接口样式:
搞一个json 字符串即可,需要条数count和data数据. open=true 自动展开
data里面带一个open字段 才能自动展开

public function menus(){
        $res = D('StoreCate')
            ->field('id,cate_name,parent_id,remark,add_time,spread as open')
            ->select();
        echo json_encode(
                [
                'code'=>0,
                'msg'=>'',
                'count'=>D('StoreCate')->count(),
                'data'=>$res
                ]
        );exit;


    }