Heim > Web-Frontend > Layui-Tutorial > So roden Sie den Laui-Baum

So roden Sie den Laui-Baum

藏色散人
Freigeben: 2019-08-01 16:35:31
Original
3997 Leute haben es durchsucht

So roden Sie den Laui-Baum

So roden Sie den Laui-Baum

Erstellen Sie zunächst eine Baumbox:

1

2

3

4

5

6

7

<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>

Nach dem Login kopieren

So roden Sie den Laui-Baum

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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>

Nach dem Login kopieren

So roden Sie den Laui-Baum

Äste zum ursprünglichen Stamm hinzufügen:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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

            

          }

        ]

      }

       

    ]

  });

Nach dem Login kopieren

So roden Sie den Laui-Baum

Äste basierend auf den vorherigen hinzufügen:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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

              }

            ]

          }

        ]

      }

       

    ]

  });

Nach dem Login kopieren

So roden Sie den Laui-Baum

Blätter basierend auf dem vorherigen hinzufügen:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

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

              }

            ]

          }

        ]

      }

       

    ]

  });

Nach dem Login kopieren

So roden Sie den Laui-Baum

Eine klare Schaltfläche hinzufügen:

1

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

Nach dem Login kopieren

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

1

2

3

$(".layui-btn").click(function(){

$(&#39;ul li&#39;).remove();

});

Nach dem Login kopieren

So roden Sie den Laui-Baum

Methode/Schritt 2

Abgeschlossen Code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

  <meta charset="utf-8">

  <title>layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">

  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->

 

 

             

<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;">

  <ul id="demo1"></ul>

</div>

  

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

            

           

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

<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>

Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage