溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下layui樹如何清空，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
layui樹怎么清空
首先創建一個樹框：
<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>
<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>
<script>
//Demo
layui.use(['tree', 'layer'], function(){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
,click: function(item){ //點擊節點回調
layer.msg('當前節名稱：'+ item.name + '<br>全部參數：'+ JSON.stringify(item));
console.log(item);
}
,nodes: [ //節點
{
name: '樹干'
,id: 2
,spread: true
}
]
});
});
</script>
在原有的樹干上添加樹杈：
layui.use(['tree', 'layer'], function(){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
,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
}
]
}
]
});
再在之前的基礎上添加樹枝：
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
,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
}
]
}
]
}
]
});
再在之前的基礎上添加樹葉：
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
,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
}
]
}
]
}
]
});
添加個清空的按鈕：
<button class="layui-btn">清空</button>
點擊清空按鈕，調用點擊事件清除樹
$(".layui-btn").click(function(){
$('ul li').remove();
});
方法/步驟2
完整代碼：
<!DOCTYPE html>
<html>
<head>
<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路徑需要改成你本地的 -->
</head>
<body>
<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(['tree', 'layer'], function(){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新選項卡打開（比如節點返回href才有效）
,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(){
$('ul li').remove();
});
});
</script>
</body>
</html>看完了這篇文章，相信你對layui樹如何清空有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
