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} ];