树组件

树组件 tree 是以树形为结构的菜单伸缩型组件，当前版本中，tree主要用于树菜单展示，交互性相对较弱。

<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2> <div> {{- d.include("/tree/detail/demo.md") }} </div> <h2 id="api" lay-toc="{hot: true}">API</h2>

API	描述
var tree = layui.tree	获得 `tree` 模块。
基础接口 <sup>2.13+</sup>	该组件由 `component` 构建，因此继承其提供的基础接口。
tree.render(options)	tree 组件渲染，核心方法。
tree.getChecked(id)	获取选中的节点数据
tree.setChecked(id, idArr)	设置对应 id 的节点选中
tree.reload(id, options)	tree 实例重载

tree.render(options);

参数 options : 基础属性选项。#详见属性

<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3> <div> {{- d.include("/tree/detail/options.md") }} </div> <h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3> <div> {{- d.include("/tree/detail/options.data.md") }} </div> <div id="options.customName" class="ws-anchor">

您可以对上述 data 中常用的字段进行自定义名称 <sup>2.8.14+</sup> :

</div>

var tree = layui.tree;
// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  data: [], // 数据源
  customName: { // 自定义 data 字段名 --- 2.8.14+
    id: 'id',
    title: 'title',
    children: 'children'
  },
  // 其他属性 …
});

<h3 id="getChecked" lay-pid="api" class="ws-anchor">获取选中的节点数据</h3>

tree.getChecked(id);

参数 id : 对应 tree 渲染时定义的 id 属性值

var tree = layui.tree;

// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});

// 获取选中的节点数据
var checkData = tree.getChecked('test');

<h3 id="setChecked" lay-pid="api" class="ws-anchor">设置对应 id 的节点选中</h3>

tree.setChecked(id, idArr);

参数 id : 对应 tree 渲染时定义的 id 属性值
参数 idArr : 对应 tree 渲染时的 data 中的 id 属性值。数组格式，可设置多个。

var tree = layui.tree;

// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});

// 设置对应 id 的节点选中
tree.setChecked('test', [1, 3]); // 批量勾选 id 为 1,3 的节点

tree.reload(id, idArr);

参数 id : 对应 tree 渲染时定义的 id 属性值
参数 options : 基础属性选项。#详见属性

var tree = layui.tree;

// 渲染
tree.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});

// 重载
tree.reload('test', { // options
  data: []
});

树组件 tree

树组件