Heim  >  Artikel  >  Web-Frontend  >  So roden Sie den Laui-Baum

So roden Sie den Laui-Baum

藏色散人
藏色散人Original
2019-07-30 13:46:333935Durchsuche

So roden Sie den Laui-Baum

So roden Sie den Laui-Baum

Erstellen Sie zunächst eine Baumbox:

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>基本树</legend>
</fieldset>
 
<div style="display: inline-block; width: 180px; height: 210px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  
</div>

So roden Sie den Laui-Baum

<fieldset class="layui-elem-field layui-field-title"   style="max-width:90%">
  <legend>基本树</legend>
</fieldset>
 
<div style="display: inline-block; width: 180px; height: 210px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
  <ul id="demo1"></ul>
</div>
<script>
//Demo
layui.use([&#39;tree&#39;, &#39;layer&#39;], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开(比如节点返回href才有效)
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称:&#39;+ item.name + &#39;<br>全部参数:&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
 }
        ]
  });
});
</script>

So roden Sie den Laui-Baum

Äste zum ursprünglichen Stamm hinzufügen:

layui.use([&#39;tree&#39;, &#39;layer&#39;], function(){
  var layer = layui.layer
  ,$ = layui.jquery; 
  
  layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开(比如节点返回href才有效)
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称:&#39;+ item.name + &#39;<br>全部参数:&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
           
          }
        ]
      }
      
    ]
  });

So roden Sie den Laui-Baum

Äste basierend auf den vorherigen hinzufügen:

layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开(比如节点返回href才有效)
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称:&#39;+ item.name + &#39;<br>全部参数:&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 211
                
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

So roden Sie den Laui-Baum

Blätter basierend auf dem vorherigen hinzufügen:

layui.tree({
    elem: &#39;#demo1&#39; //指定元素
    ,target: &#39;_blank&#39; //是否新选项卡打开(比如节点返回href才有效)
    ,click: function(item){ //点击节点回调
      layer.msg(&#39;当前节名称:&#39;+ item.name + &#39;<br>全部参数:&#39;+ JSON.stringify(item));
      console.log(item);
    }
    ,nodes: [ //节点
      {
        name: &#39;树干&#39;
        ,id: 2
        ,spread: true
        ,children: [
          {
            name: &#39;树杈1&#39;
            ,id: 21
            ,spread: true
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 211
                
,children: [
                  {
                    name: &#39;树叶1&#39;
                    ,id: 2111
                  }, {
                    name: &#39;树叶2&#39;
                    ,id: 2112
                  }, {
                    name: &#39;树叶3&#39;
                    ,id: 2113
                  }
                ]
              }
            ]
          }, {
            name: &#39;树杈2&#39;
            ,id: 22
            ,children: [
              {
                name: &#39;树枝&#39;
                ,id: 221
              }
            ]
          }
        ]
      }
      
    ]
  });

So roden Sie den Laui-Baum

Eine klare Schaltfläche hinzufügen:

<button class="layui-btn">清空</button>

So roden Sie den Laui-Baum

Klicken Sie auf die Schaltfläche „Löschen“ und rufen Sie das Klickereignis auf, um den Baum zu löschen

$(".layui-btn").click(function(){
$(&#39;ul li&#39;).remove();
});

So roden Sie den Laui-Baum

Methode/Schritt 2

Abgeschlossen Code:




  
  layui
  
  
  
  
  


            
基本树
    <button class="layui-btn">清空</button> <script> //Demo layui.use([&#39;tree&#39;, &#39;layer&#39;], function(){ var layer = layui.layer ,$ = layui.jquery; layui.tree({ elem: &#39;#demo1&#39; //指定元素 ,target: &#39;_blank&#39; //是否新选项卡打开(比如节点返回href才有效) ,click: function(item){ //点击节点回调 layer.msg(&#39;当前节名称:&#39;+ item.name + &#39;<br>全部参数:&#39;+ JSON.stringify(item)); console.log(item); } ,nodes: [ //节点 { name: &#39;树干&#39; ,id: 2 ,spread: true ,children: [ { name: &#39;树杈1&#39; ,id: 21 ,spread: true ,children: [ { name: &#39;树枝&#39; ,id: 211 ,children: [ { name: &#39;树叶1&#39; ,id: 2111 }, { name: &#39;树叶2&#39; ,id: 2112 }, { name: &#39;树叶3&#39; ,id: 2113 } ] } ] }, { name: &#39;树杈2&#39; ,id: 22 ,children: [ { name: &#39;树枝&#39; ,id: 221 } ] } ] } ] }); $(&quot;.layui-btn&quot;).click(function(){ $(&amp;#39;ul li&amp;#39;).remove(); }); }); </script>

    Weitere technische Artikel zu Layui finden Sie in der Spalte Layui Framework Tutorial, um mehr zu erfahren!

    Das obige ist der detaillierte Inhalt vonSo roden Sie den Laui-Baum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn