layui-tree实现Ajax异步请求后动态添加html元素

最新推荐文章于 2024-06-28 03:45:22 发布

置顶 Hing丶

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量3.4w

点赞数 7

文章标签： layui-tree ajax异步动态添加子节点

本文链接：https://blog.csdn.net/u013397924/article/details/68060335

版权

最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。

大概效果如左图

具体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级分类管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css"
	href="layui/css/layui.css" media="all">

</head>

<style>
.panel {
	margin-bottom: 0;
}
 i{
 	
    cursor: pointer !important ; 
	cursor: hand !important;
 } 
 body{

 }

  a:hover{
	background-color:#E6E6E6 ;
 } 

.active{
	background:#E6E6E6;
}
.hide{
	display:none;
}

</style>
<body style="height:100%;">



	<div    style="height:100%;">
				<div class="panel panel-default"
					style=" position:fixed;   width: 250px; height:800px;   overflow:auto;">
					<div class="panel-body"  style=" ">
						<h4 style="text-align: center;">分类管理</h4>
						<ul unselectable="on" id="demo"
							style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"
							onselectstart="return false;"  ></ul>
							<button  id="addcate" class="layui-btn  layui-btn-primary"  style="margin-top:20px; margin-left:28px; width:70%;">添加分类</button>
					</div>
	</div>
		
	

	</div>


	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
 	layui.use(['jquery','layer','element','form','tree'],function(){
	      window.jQuery = window.$ = layui.jquery;
	      window.layer = layui.layer;
	      var form  =  layui.form;
	      var elem = layui.element;
	  	  var topcateid=0;  //为模拟顶级分类id用

		  //初始化layer.tree
		   var tree = layui.tree({
 	    	  elem: '#demo',
 	    	  nodes:[]     //这里可以通过后台获取（如ThinkPHP框架则可以通过后台拼接好，再生成模板变量类似{$tree}就可以）
 	    	});	
	  	  
			window.onload=function(){

	  		  	 //删除layui-tree 自带的样式    
	  		      $("i.layui-tree-branch").remove();
	  		      $("i.layui-tree-leaf").remove();
	  			  //添加操作的图标(即鼠标划过时显示的添加，修改，删除的按钮组)
	  			  $("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'></i>"+
	  			                               "<i class='layui-icon edit select hide'></i>"+
	  			                               "<i class='layui-icon del select hide'></i>");
	  		}

//添加顶级分类
	$("#addcate").on("click",function(){
		layer.prompt({title: '输入分类名称，并确认', formType:0}, function(text, index){
			  layer.close(index);
           //TODO 可以ajax到后台操作，这里只做模拟
           layer.load(2);
           setTimeout(function(){	
           layer.closeAll("loading");
           //手动添加节点，肯定有更好的方法=.=！这里的方法感觉有点LOW
           // li里面的pid属性为父级类目的id,顶级分类的pid为0
           topcateid= topcateid+1;
           	$("ul#demo").append("<li  pid='0' id="+(topcateid)+">"+
           	                   "<a ><cite>"+text+"</cite> </a>"+
           	                   "<i class='layui-icon select hide add'></i>"+
           	                   "<i class='layui-icon edit select hide'></i>"+
           	                   "<i class='layui-icon del select hide'></i>"+
           	                   "</li>");
           },1000)
			});	
})
	
//显示/隐藏 分类的操作栏
$("ul#demo").on({
    mouseover: function(event) {
   	  event.stopPropagation();
      $(this).children(".select").removeClass("hide")
    },
    
    mouseout: function(event) { 
     event.stopPropagation(); 
     $(this).children(".select").addClass("hide")
    }, 

},"li","a")

//添加子分类
$("ul#demo ").on("click","li .add",function(){
	
     var pid = $(this).closest("li").attr("id");//将父级类目的id作为父类id
     var that= $(this).closest("li");
 	layer.prompt({title: '输入子分类名称，并确认', formType:0}, function(text, index){
		  layer.close(index);
		  
		   //TODO 可以ajax到后台操作，这里只做模拟
           layer.load(2);
           setTimeout(function(){	
           layer.closeAll("loading");
           topcateid= topcateid+1;
           if(that.children("ul").length == 0){
						 //表示要新增   i 以及 ul 标签
						 that.prepend('<i class="layui-icon layui-tree-spread"></i>')
						 that.append("<ul class='layui-show'><li  pid="+pid+"   id="+(topcateid)+"><a    ><cite>"+text+"</cite> </a><i  class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li></ul>")
					 }else{
						that.children("ul").append("<li pid="+pid+"    id="+(topcateid)+"><a  ><cite>"+text+"</cite> </a><i  class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li>");
					 }
           },1000)
			});	  

			
})
//重命名
$("ul#demo ").on("click","li .edit",function(){
   var node=$(this).parent().children("a").children("cite");
   var id=$(this).parent().attr("id")
   var that= $(this).closest("li");
 	layer.prompt({title: '输入新的分类名称，并确认',value:node.text(), formType:0}, function(text, index){
		  layer.close(index);
		  
		 //TODO 可以ajax到后台操作，这里只做模拟
           layer.load(2);
           setTimeout(function(){	
           layer.closeAll("loading");
            node.text(text);
           },1000)
			});	
		  
		
})
//删除分类
$("ul#demo ").on("click","li .del",function(){
	
	  var that= $(this).closest("li");
	if(that.children("ul").length > 0){
		layer.msg("该分类下含有子分类不能删除")
		return;
	}
   var id=$(this).parent().attr("id")

 layer.confirm('确定要删除？该分类下的课程亦将删除！', {
  btn: ['删除','取消'] 
}, function(){
	
		 //TODO 可以ajax到后台操作，这里只做模拟
           layer.load(2);
           setTimeout(function(){	
           layer.closeAll("loading");
            if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("i.layui-tree-spread").length=1)){
		    	   //要把分类名前的三角符号和ul标签删除
		    	    that.parent("ul").parent("li").children("i.layui-tree-spread").remove();		   
		       }
		      that.remove()
           },1000)
			});	


})
//打开/关闭菜单
 	
	$("ul#demo").on({
	
	click:function(event){
		event.stopPropagation();
		event.preventDefault();
		if( $(this).parent().children("ul").hasClass("layui-show")){
			
	
			  $(this).html("");
	    	  $(this).parent().children("ul").removeClass("layui-show");
	    	  return;
		}else{	
			
		
	     $(this).html("");
   		 $(this).parent().children("ul").addClass("layui-show"); 
   		return;
		} 
	   return;
	}	
},  'i.layui-tree-spread');  

 	      	
 }); 

</script>



</body>

</html>

2018/1/22更新

源码我已经上传到github上了，有兴趣的可以看看 https://github.com/leeJqqq/layui-tree-ajax ,其实感觉写的可以更好，但是奈何能力有限，大家觉得有哪里写得不好或者有新的解决方案的，欢迎指正，而且听说layui2.0准备重构layui_tree,说不定新版本有动态插入的功能~大家可以留意layui的相关资讯。