layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法

更新時間：2019年09月23日 09:17:40 作者：Yoson_He

今天小編就為大家分享一篇layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近在弄一個產(chǎn)品分類管理，是一個樹形菜單的形式，用的是layui-tree ,由于它并沒有動態(tài)添加節(jié)點，所以只能自己剛了。

大概效果如圖

體的實現(xiàn)是當我鼠標移入“長袖”這個分類時，出現(xiàn)三個icon (如圖)，按“增加”按鈕，會發(fā)送ajax異步請求到后臺，在數(shù)據(jù)庫庫中增加以“長袖”為父類id 的一個子分類，成功后返回到前臺，然后相應的節(jié)點下動態(tài)添加子節(jié)點，主要是通過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" rel="external nofollow" 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"); 
      //手動添加節(jié)點，肯定有更好的方法=.=！這里的方法感覺有點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>

以上這篇layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: