因为layui 的tree 是无限级,所以增删改都是所有层级都有的,但是因为,我这边要实现如下图所示功能,就加以改造了
增删改的点击功能是从网上找的,修改的源码
具体的tree.js 可以通过以下链接下载 链接:https://pan.baidu.com/s/184zz97NT9dy_y1F-pYpGOA 提取码:0efw
实现不同级别的各个按钮的显示隐藏就要对生成的css样式进行控制了
.layui-tree-pack .layui-tree-lineExtend .layui-icon-add-1{ display: none; } .displayMenu{ display: none; } $.ajax({ url : $webURI+ '/portals/cgmenu/getAllMenus.action', type : 'post', dataType : 'json', success : function(data) { if(data.code>0){ //渲染 var inst1 = tree.render({ elem: '#menu' //绑定元素 ,data: data.data ,customOperate: true //自定义属性 ,edit: ['add', 'update', 'del'] ,operate: function(obj){ var type = obj.type; //得到操作类型:add、edit、del var data = obj.data; //得到当前节点的数据 var elem = obj.elem; //得到当前节点元素 //Ajax 操作 var id = data.id; //得到节点索引 if(type === 'add'){ //增加节点 //返回 key 值 //给表单赋值 form.val("formMenu", { "id":null, "parentid": id , "title":null, "href":null, "icon":null, "sort":null }); form.render(); //更新全部 openTc(); } else if(type === 'update'){ //修改节点 //给表单赋值 form.val("formMenu", { "id":data.id, "parentid": data.parentid , "title":data.title, "href":data.href, "icon":data.icon, "sort":data.sort }); form.render(); //更新全部 openTc(); } else if(type === 'del'){ //删除节点 layer.confirm('确定要删除该菜单吗?', { title : "提示", icon : 7, offset : '200px', btn : [ '确定', '取消' ] }, function() { }) } return false; } }); // var list=$(".layui-icon-edit"); list[0].className="displayMenu";//属性修改 var list1=$(".layui-icon-delete"); list1[0].className="displayMenu";//属性修改 } } });
这样就可以实现了
