layui-tree實現Ajax非同步請求後動態新增節點

Yoson_He發表於2018-04-20
UI非同步

最近在弄一個產品分類管理，是一個樹形選單的形式，用的是layui-tree ,由於它並沒有動態新增節點，所以只能自己剛了。

                                                                                                        大概效果如左圖

    具體的實現是當我滑鼠移入“長袖”這個分類時，出現三個icon (如圖)，按“增加”按鈕，會傳送ajax非同步請求到後臺，在資料庫庫中增加以“長袖”為父類id 的一個子分類，成功後返回到前臺，然後相應的節點下動態新增子節點，主要是通過append 來增加html元素

[html] view plain copy

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>多級分類管理</title>  
  6. <meta name="renderer" content="webkit">  
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  8. <meta name="format-detection" content="telephone=no">  
  9. <link rel="stylesheet" type="text/css"  
  10.     href="layui/css/layui.css" media="all">  
  11.   
  12. </head>  
  13.   
  14. <style>  
  15. .panel {  
  16.     margin-bottom: 0;  
  17. }  
  18.  i{  
  19.       
  20.     cursor: pointer !important ;   
  21.     cursor: hand !important;  
  22.  }   
  23.  body{  
  24.   
  25.  }  
  26.   
  27.   a:hover{  
  28.     background-color:#E6E6E6 ;  
  29.  }   
  30.   
  31. .active{  
  32.     background:#E6E6E6;  
  33. }  
  34. .hide{  
  35.     display:none;  
  36. }  
  37.   
  38. </style>  
  39. <body style="height:100%;">  
  40.   
  41.   
  42.   
  43.     <div    style="height:100%;">  
  44.                 <div class="panel panel-default"  
  45.                     style=" position:fixed;   width: 250px; height:800px;   overflow:auto;">  
  46.                     <div class="panel-body"  style=" ">  
  47.                         <h4 style="text-align: center;">分類管理</h4>  
  48.                         <ul unselectable="on" id="demo"  
  49.                             style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"  
  50.                             onselectstart="return false;"  ></ul>  
  51.                             <button  id="addcate" class="layui-btn  layui-btn-primary"  style="margin-top:20px; margin-left:28px; width:70%;">新增分類</button>  
  52.                     </div>  
  53.     </div>  
  54.           
  55.       
  56.   
  57.     </div>  
  58.   
  59.   
  60.     <script type="text/javascript" src="layui/layui.js"></script>  
  61.     <script type="text/javascript">  
  62.     layui.use(['jquery','layer','element','form','tree'],function(){  
  63.           window.jQuery = window.$ = layui.jquery;  
  64.           window.layer = layui.layer;  
  65.           var form  =  layui.form;  
  66.           var elem = layui.element;  
  67.           var topcateid=0;  //為模擬頂級分類id用  
  68.   
  69.           //初始化layer.tree  
  70.            var tree = layui.tree({  
  71.               elem: '#demo',  
  72.               nodes:[]     //這裡可以通過後臺獲取（如ThinkPHP框架則可以通過後臺拼接好，再生成模板變數類似{$tree}就可以）  
  73.             });   
  74.             
  75.             window.onload=function(){  
  76.   
  77.                  //刪除layui-tree 自帶的樣式      
  78.                   $("i.layui-tree-branch").remove();  
  79.                   $("i.layui-tree-leaf").remove();  
  80.                   //新增操作的圖示(即滑鼠劃過時顯示的新增，修改，刪除的按鈕組)  
  81.                   $("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'></i>"+  
  82.                                                "<i class='layui-icon edit select hide'></i>"+  
  83.                                                "<i class='layui-icon del select hide'></i>");  
  84.             }  
  85.   
  86. //新增頂級分類  
  87.     $("#addcate").on("click",function(){  
  88.         layer.prompt({title: '輸入分類名稱，並確認', formType:0}, function(text, index){  
  89.               layer.close(index);  
  90.            //TODO 可以ajax到後臺操作，這裡只做模擬  
  91.            layer.load(2);  
  92.            setTimeout(function(){     
  93.            layer.closeAll("loading");  
  94.            //手動新增節點，肯定有更好的方法=.=！這裡的方法感覺有點LOW  
  95.            // li裡面的pid屬性為父級類目的id,頂級分類的pid為0  
  96.            topcateid= topcateid+1;  
  97.             $("ul#demo").append("<li  pid='0' id="+(topcateid)+">"+  
  98.                                "<a ><cite>"+text+"</cite> </a>"+  
  99.                                "<i class='layui-icon select hide add'></i>"+  
  100.                                "<i class='layui-icon edit select hide'></i>"+  
  101.                                "<i class='layui-icon del select hide'></i>"+  
  102.                                "</li>");  
  103.            },1000)  
  104.             });   
  105. })  
  106.       
  107. //顯示/隱藏 分類的操作欄  
  108. $("ul#demo").on({  
  109.     mouseover: function(event) {  
  110.       event.stopPropagation();  
  111.       $(this).children(".select").removeClass("hide")  
  112.     },  
  113.       
  114.     mouseout: function(event) {   
  115.      event.stopPropagation();   
  116.      $(this).children(".select").addClass("hide")  
  117.     },   
  118.   
  119. },"li","a")  
  120.   
  121. //新增子分類  
  122. $("ul#demo ").on("click","li .add",function(){  
  123.       
  124.      var pid = $(this).closest("li").attr("id");//將父級類目的id作為父類id  
  125.      var that= $(this).closest("li");  
  126.     layer.prompt({title: '輸入子分類名稱，並確認', formType:0}, function(text, index){  
  127.           layer.close(index);  
  128.             
  129.            //TODO 可以ajax到後臺操作，這裡只做模擬  
  130.            layer.load(2);  
  131.            setTimeout(function(){     
  132.            layer.closeAll("loading");  
  133.            topcateid= topcateid+1;  
  134.            if(that.children("ul").length == 0){  
  135.                          //表示要新增   i 以及 ul 標籤  
  136.                          that.prepend('<i class="layui-icon layui-tree-spread"></i>')  
  137.                          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>")  
  138.                      }else{  
  139.                         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>");  
  140.                      }  
  141.            },1000)  
  142.             });     
  143.   
  144.               
  145. })  
  146. //重新命名  
  147. $("ul#demo ").on("click","li .edit",function(){  
  148.    var node=$(this).parent().children("a").children("cite");  
  149.    var id=$(this).parent().attr("id")  
  150.    var that= $(this).closest("li");  
  151.     layer.prompt({title: '輸入新的分類名稱，並確認',value:node.text(), formType:0}, function(text, index){  
  152.           layer.close(index);  
  153.             
  154.          //TODO 可以ajax到後臺操作，這裡只做模擬  
  155.            layer.load(2);  
  156.            setTimeout(function(){     
  157.            layer.closeAll("loading");  
  158.             node.text(text);  
  159.            },1000)  
  160.             });   
  161.             
  162.           
  163. })  
  164. //刪除分類  
  165. $("ul#demo ").on("click","li .del",function(){  
  166.       
  167.       var that= $(this).closest("li");  
  168.     if(that.children("ul").length > 0){  
  169.         layer.msg("該分類下含有子分類不能刪除")  
  170.         return;  
  171.     }  
  172.    var id=$(this).parent().attr("id")  
  173.   
  174.  layer.confirm('確定要刪除？該分類下的課程亦將刪除！', {  
  175.   btn: ['刪除','取消']   
  176. }, function(){  
  177.       
  178.          //TODO 可以ajax到後臺操作，這裡只做模擬  
  179.            layer.load(2);  
  180.            setTimeout(function(){     
  181.            layer.closeAll("loading");  
  182.             if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("i.layui-tree-spread").length=1)){  
  183.                    //要把分類名前的三角符號和ul標籤刪除  
  184.                     that.parent("ul").parent("li").children("i.layui-tree-spread").remove();             
  185.                }  
  186.               that.remove()  
  187.            },1000)  
  188.             });   
  189.   
  190.   
  191. })  
  192. //開啟/關閉選單  
  193.       
  194.     $("ul#demo").on({  
  195.       
  196.     click:function(event){  
  197.         event.stopPropagation();  
  198.         event.preventDefault();  
  199.         if( $(this).parent().children("ul").hasClass("layui-show")){  
  200.               
  201.       
  202.               $(this).html("");  
  203.               $(this).parent().children("ul").removeClass("layui-show");  
  204.               return;  
  205.         }else{    
  206.               
  207.           
  208.          $(this).html("");  
  209.          $(this).parent().children("ul").addClass("layui-show");   
  210.         return;  
  211.         }   
  212.        return;  
  213.     }     
  214. },  'i.layui-tree-spread');    
  215.   
  216.               
  217.  });   
  218.   
  219. </script>  
  220.   
  221.   
  222.   
  223. </body>  
  224.   
  225. </html>  

相關文章