PHP菜单树多选框ztree组件的使用

<link href="__STATIC__/layui_2.5.5/css/layui.css" rel="stylesheet" type="text/css"/>
<link href="__STATIC__/layui_2.5.5/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript"   src="__STATIC__/layui_2.5.5/layui.all.js"></script>
<script type="text/javascript"   src="__STATIC__/layui_2.5.5/jquery.ztree.core.js"></script>
<script type="text/javascript"   src="__STATIC__/layui_2.5.5/jquery.ztree.excheck.js"></script>

以上js下载地址:https://gitee.com/zTree/zTree_v3
看下console里面报什么错,就引用什么

<script>
    layui.config({
        base: '/Public/static/layui_2.5.5/' //treeTable.js所在目录
    }).use(['treeTable'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

      
        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var id = obj.data.id;
            if (event === 'del') {
                layer.confirm('确认要删除吗,如果该分类下有子分类将同时删除子分类？',function(index){
                    $.ajax({
                        url: "del_cate_menu_data",    //后台数据请求地址
                        type: "post",
                        data:{id:id},
                        async: false,
                        success: function (result) {
                            if(result == 'success'){
                                layer.msg('操作成功',{icon:1,time:3000});
                                setTimeout('location.replace(location.href)', 1000);
                            }

                        }
                    });

                })


            } 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()
                    }
                });


                //




            } else if(event === 'show'){

                layer.open({
                    title: '角色权限分配',
                    type:1,
                    btn: ['保存', '取消'],
                    content: '<ul id="roleAuthTree" class="ztree"></ul>',
                    success: function (layero, dIndex) {
                        // var loadIndex = layer.load(2);
                        $.get('menus', {roleId: 20}, function (res) {
                            // console.log(res.data);
                            // layer.close(loadIndex);
                            $.fn.zTree.init($('#roleAuthTree'), {
                                check: {enable: true},
                                data: {simpleData: {enable: true}}
                            }, res.data);
                        }, 'json');
                        // 超出一定高度滚动
                        $(layero).children('.layui-layer-content').css({'max-height': '300px', 'overflow': 'auto'});
                    },
                    yes: function (dIndex) {
                        var insTree = $.fn.zTree.getZTreeObj('roleAuthTree');
                        var checkedRows = insTree.getCheckedNodes(true);
                        var ids = [];
                        for (var i = 0; i < checkedRows.length; i++) {
                            ids.push(checkedRows[i].id);
                        }
                        // var loadIndex = layer.load(2);
                        $.get('gggg', {roleId: 20, authIds: ids.join(',')}, function (res) {
                            layer.close(loadIndex);
                            if (200 === res.code) {
                                layer.msg(res.msg, {icon: 1});
                                layer.close(dIndex);
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                    }
                });


            }
        });

    });
</script>

注意事项: res.data里面的字段必须是这样的.否则将会报错,尤其是name,pid ,open=true 是展开的意思, 如果有checked=true 则说明是选中状态.

var datas =[

            { id:1, pId:0, name:"树", open:true},

            { id:11, pId:1, name:"松树", open:true},

            { id:12, pId:1, name:"樟树", open:true},

            { id:2, pId:0, name:"花", checked:true, open:true},

            { id:21, pId:2, name:"梅花"},

            { id:22, pId:2, name:"桃花", open:true}

        ];