treeselect 清空销毁树_layui树怎么清空

layui树怎么清空

首先创建一个树框：

基本树

基本树

//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 + '
全部参数：'+ JSON.stringify(item));

console.log(item);

}

,nodes: [ //节点

{

name: '树干'

,id: 2

,spread: true

}

]

});

});

在原有的树干上添加树杈：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 + '
全部参数：'+ 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 + '
全部参数：'+ 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 + '
全部参数：'+ 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

完整代码：

layui

基本树

清空

//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 + '
全部参数：'+ 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();

});

});

更多Layui相关技术文章，请访问Layui框架教程栏目进行学习！