Layui中的树形组件模块tree用于以树形形式显示上下级结构的数据，类似于winform中的tree控件。tree模块的基本用法及显示效果如下所示：
<div id="test"></div><br />
<script>
layui.use(['tree','layer'], function(){
var tree = layui.tree;
var layer = layui.layer;
var $ = layui.jquery;
tree.render({
elem: '#test' ,
data:[
{
title:'中国古代四大发明',
children:[
{
title:'火药'
},
{
title:'造纸术'
},
{
title:'活字印刷术'
},
{
title:'指南针'
}
]
},
{
title:'中国省市',
children:[
{
title:'直辖市',
children:[
{
title:'北京'
},
{
title:'天津'
},
{
title:'上海'
},
{
title:'重庆'
}
]
},
{
title:'河北',
children:[
{
title:'石家庄'
},
{
title:'秦皇岛'
},
{
title:'保定'
},
{
title:'邯郸'
}
]
},
{
title:'山东',
children:[
{
title:'济南'
},
{
title:'淄博'
},
{
title:'青岛'
},
{
title:'威海'
}
]
}
]
}
]
});
});
</script>
基础参数data配置树形组件的数据源。data中的数据有格式规范，可以类比winform中的tree控件。data中的节点集合类似于tree控件中的nodes属性，每个节点对应一个node对象，其中必填节点属性为title，类似于node对象的text属性，每个节点可以设置id属性，用于唯一标识该节点，节点的children属性设置节点的子节点结合，类似于node对象中nodes属性。同时节点的spread、checked、disabled属性控制节点的展开状态、选中状态及禁用状态。data属性的详细数据格式请参见参考文献2。
基础参数id设置树形组件实例的唯一标识，通过该标识，配合tree模块的相关函数可以获取或设置tree组件的节点相关数据。
基础参数showCheckbox设置是否显示复选框，默认为false，即不显示。其显示效果如下所示：
基础参数accordion设置是否开启手风琴模式。默认为false，即同一级的节点可以任意展开多个，为true时只能展开单个节点。其显示效果如下所示：
基础参数onlyIconControl设置是否仅允许点击节点图标展开/收缩节点。默认为false，值为true值只能点击节点图标展开/收缩节点。
基础参数isJump设置是否跳转到节点的href属性设置的url地址。可以是相对地址，也可以是独立的网站地址。
基础参数showLine设置是否显示连接线。默认为true。其显示效果如下所示：
基础参数edit设置是否显示节点的操作图标。值可以为true/false，为true时显示修改和删除图标，也可以用数组指定显示的图标和顺序，目前支持add、update、del三种。其显示效果如下所示：
除了上述基本参数，tree模块的click、oncheck、operate设置处理节点被点击、复选框被点击和操作节点时的事件处理函数。
基于tree组件设置的id属性，调用tree模块的tree.getChecked函数可以获取指定id的tree组件中所有选中的节点数据集合，调用tree.setChecked函数可以设置指定id的tree组件中指定节点id集合的节点选中状态。
参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
