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

最新推荐文章于 2025-05-26 12:38:52 发布

漠水情

最新推荐文章于 2025-05-26 12:38:52 发布

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： html jquery

本文链接：https://blog.csdn.net/qq_23063179/article/details/109218858

本文介绍了一种对layui无限级树形组件的改造方法，以满足特定功能需求。通过修改js源码和CSS样式，实现了增删改功能在不同级别的控制，并提供了下载链接以供参考。改造后的组件可以根据节点级别显示或隐藏操作按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为layui 的tree 是无限级，所以增删改都是所有层级都有的，但是因为，我这边要实现如下图所示功能，就加以改造了

展示图

增删改的点击功能是从网上找的，修改的源码

tree.js

具体的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";//属性修改
						   
							 
							
						}
						
					}
				});

这样就可以实现了