layui tree 自定义实现控制 新增、修改、删除的隐藏和展示

it2025-10-27  7

因为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";//属性修改 } } });

 

这样就可以实现了

最新回复(0)