layui树怎么清空

来源:网络整理作者: 发布时间:2020-12-19 20:03

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;"> <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 } ] } ] } ] });

添加个清空的按钮：

点击清空按钮，调用点击事件清除树

$(".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=https://www.ym97.com/layui/"/res.layui.com/layui/dist/css/layui.css" media="all">  </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=https://www.ym97.com/layui/"/res.layui.com/layui/dist/layui.js" charset="utf-8"></script>  <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相关技术文章，请访问Layui框架教程栏目进行学习！

以上就是layui树怎么清空的详细内容，更多请关注php中文网其它相关文章！

一个页面写完了要编写一个美	本教程操作环境：windows7系统
content: $(#id) //这里content是一个	layui自界说滑滚动窗动画
利用layui框架封装ajax模块的详	layui兼容ie8中出现的问题 1、检
将这个文件给引入进去引入的	layuicode是默认通过寻找layui-c
该div包含layui-select-title和dl两个	让layui支持es5写法的方法介绍
layui框架中常见表单排版介绍	解决layUI导出到Excel时身份证号
在layui的layDate组件中添加设置	layui框架的table字段筛选功能介
html里文字居中代码怎么写？	html中图片怎么居中对齐？

CSS/HTML

layui树怎么清空

相关文章

热门TAG

最新文章

热门文章