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
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>
layui. use (['tree', 'layer'], function (){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1'
,target: '_blank'
,click: function (item){
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [
{
name: '树干'
,id: 2
,spread: true
}
]
});
});
</script>
|
Nach dem Login kopieren
Ä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 (['tree', 'layer'], function (){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1'
,target: '_blank'
,click: function (item){
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [
{
name: '树干'
,id: 2
,spread: true
,children: [
{
name: '树杈1'
,id: 21
,spread: true
}, {
name: '树杈2'
,id: 22
}
]
}
]
});
|
Nach dem Login kopieren
Ä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: '#demo1'
,target: '_blank'
,click: function (item){
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [
{
name: '树干'
,id: 2
,spread: true
,children: [
{
name: '树杈1'
,id: 21
,spread: true
,children: [
{
name: '树枝'
,id: 211
}
]
}, {
name: '树杈2'
,id: 22
,children: [
{
name: '树枝'
,id: 221
}
]
}
]
}
]
});
|
Nach dem Login kopieren
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: '#demo1'
,target: '_blank'
,click: function (item){
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [
{
name: '树干'
,id: 2
,spread: true
,children: [
{
name: '树杈1'
,id: 21
,spread: true
,children: [
{
name: '树枝'
,id: 211
,children: [
{
name: '树叶1'
,id: 2111
}, {
name: '树叶2'
,id: 2112
}, {
name: '树叶3'
,id: 2113
}
]
}
]
}, {
name: '树杈2'
,id: 22
,children: [
{
name: '树枝'
,id: 221
}
]
}
]
}
]
});
|
Nach dem Login kopieren
Eine klare Schaltfläche hinzufügen:
1 | <button class = "layui-btn" >清空</button>
|
Nach dem Login kopieren
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 (){
$('ul li').remove();
});
|
Nach dem Login kopieren
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>
layui. use (['tree', 'layer'], function (){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1'
,target: '_blank'
,click: function (item){
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [
{
name: '树干'
,id: 2
,spread: true
,children: [
{
name: '树杈1'
,id: 21
,spread: true
,children: [
{
name: '树枝'
,id: 211
,children: [
{
name: '树叶1'
,id: 2111
}, {
name: '树叶2'
,id: 2112
}, {
name: '树叶3'
,id: 2113
}
]
}
]
}, {
name: '树杈2'
,id: 22
,children: [
{
name: '树枝'
,id: 221
}
]
}
]
}
]
});
$(".layui-btn").click( function (){
$(&#39;ul li&#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!