您好,登錄后才能下訂單哦!
小編給大家分享一下layui樹如何清空,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
layui樹怎么清空
首先創(chuàng)建一個(gè)樹框:
<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' //是否新選項(xiàng)卡打開(比如節(jié)點(diǎn)返回href才有效) ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào) layer.msg('當(dāng)前節(jié)名稱:'+ item.name + '<br>全部參數(shù):'+ JSON.stringify(item)); console.log(item); } ,nodes: [ //節(jié)點(diǎn) { name: '樹干' ,id: 2 ,spread: true } ] }); }); </script>
在原有的樹干上添加樹杈:
layui.use(['tree', 'layer'], function(){ var layer = layui.layer ,$ = layui.jquery; layui.tree({ elem: '#demo1' //指定元素 ,target: '_blank' //是否新選項(xiàng)卡打開(比如節(jié)點(diǎn)返回href才有效) ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào) layer.msg('當(dāng)前節(jié)名稱:'+ item.name + '<br>全部參數(shù):'+ JSON.stringify(item)); console.log(item); } ,nodes: [ //節(jié)點(diǎn) { name: '樹干' ,id: 2 ,spread: true ,children: [ { name: '樹杈1' ,id: 21 ,spread: true }, { name: '樹杈2' ,id: 22 } ] } ] });
再在之前的基礎(chǔ)上添加樹枝:
layui.tree({ elem: '#demo1' //指定元素 ,target: '_blank' //是否新選項(xiàng)卡打開(比如節(jié)點(diǎn)返回href才有效) ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào) layer.msg('當(dāng)前節(jié)名稱:'+ item.name + '<br>全部參數(shù):'+ JSON.stringify(item)); console.log(item); } ,nodes: [ //節(jié)點(diǎn) { name: '樹干' ,id: 2 ,spread: true ,children: [ { name: '樹杈1' ,id: 21 ,spread: true ,children: [ { name: '樹枝' ,id: 211 } ] }, { name: '樹杈2' ,id: 22 ,children: [ { name: '樹枝' ,id: 221 } ] } ] } ] });
再在之前的基礎(chǔ)上添加樹葉:
layui.tree({ elem: '#demo1' //指定元素 ,target: '_blank' //是否新選項(xiàng)卡打開(比如節(jié)點(diǎn)返回href才有效) ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào) layer.msg('當(dāng)前節(jié)名稱:'+ item.name + '<br>全部參數(shù):'+ JSON.stringify(item)); console.log(item); } ,nodes: [ //節(jié)點(diǎn) { 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 } ] } ] } ] });
添加個(gè)清空的按鈕:
<button class="layui-btn">清空</button>
點(diǎn)擊清空按鈕,調(diào)用點(diǎn)擊事件清除樹
$(".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"> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述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> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述js路徑需要改成你本地的 --> <script> //Demo layui.use(['tree', 'layer'], function(){ var layer = layui.layer ,$ = layui.jquery; layui.tree({ elem: '#demo1' //指定元素 ,target: '_blank' //是否新選項(xiàng)卡打開(比如節(jié)點(diǎn)返回href才有效) ,click: function(item){ //點(diǎn)擊節(jié)點(diǎn)回調(diào) layer.msg('當(dāng)前節(jié)名稱:'+ item.name + '<br>全部參數(shù):'+ JSON.stringify(item)); console.log(item); } ,nodes: [ //節(jié)點(diǎn) { 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>
看完了這篇文章,相信你對(duì)layui樹如何清空有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。