layui/docs/tree/index.md

title	toc
树组件 tree	true

树组件

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

示例

{{- d.include("/tree/detail/demo.md") }}

API

API	描述
var tree = layui.tree	获得 tree 模块。
tree.render(options)	tree 组件渲染，核心方法。
tree.getChecked(id)	获取选中的节点数据
tree.setChecked(id, idArr)	设置对应 id 的节点选中
tree.reload(id, options)	tree 实例重载

渲染

tree.render(options);

• 参数 options : 基础属性配置项。#详见属性

属性

{{- d.include("/tree/detail/options.md") }}

data 格式

{{- d.include("/tree/detail/options.data.md") }}

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

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

获取选中的节点数据

tree.getChecked(id);

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

var tree = layui.tree;

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

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

设置对应 id 的节点选中

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