Tree 树形控件

树形控件组件，用于展示树形结构数据。

基础用法

<div id="demo-tree"></div>

<script>
  const tree = new SaTree('#demo-tree', {
    data: [
      {
        id: 1,
        label: '一级节点 1',
        children: [
          { id: 11, label: '二级节点 1-1' },
          { id: 12, label: '二级节点 1-2' }
        ]
      },
      {
        id: 2,
        label: '一级节点 2',
        children: [
          { id: 21, label: '二级节点 2-1' },
          { id: 22, label: '二级节点 2-2' }
        ]
      }
    ],
    onNodeClick: (node) => {
      console.log('点击节点:', node);
    }
  });
</script>

加载 SanoUI 组件中...

带复选框

通过 showCheckbox: true 启用复选框功能。

<div id="demo-tree-checkbox"></div>

<script>
  const tree = new SaTree('#demo-tree-checkbox', {
    data: [
      {
        id: 1,
        label: '一级节点 1',
        children: [
          { id: 11, label: '二级节点 1-1' },
          { id: 12, label: '二级节点 1-2' }
        ]
      }
    ],
    showCheckbox: true,
    onCheck: (checkedNodes) => {
      console.log('选中的节点:', checkedNodes);
    }
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaTreeOptions	{}

配置选项

参数	说明	类型	可选值	默认值
data	树形数据	Array<TreeNode>	-	[]
showCheckbox	是否显示复选框	boolean	-	false
defaultExpandedKeys	默认展开的节点	Array<string>	-	[]
defaultCheckedKeys	默认选中的节点	Array<string>	-	[]
onNodeClick	节点点击回调	function(node: TreeNode)	-	-
onCheck	复选框变化回调	function(checkedNodes: Array<TreeNode>)	-	-

TreeNode 配置

参数	说明	类型	默认值
id	节点唯一标识	string | number	-
label	节点文本	string	-
children	子节点数组	Array<TreeNode>	-
disabled	是否禁用	boolean	false

方法

方法名	说明	参数	返回值
setData	设置树形数据	data: Array<TreeNode>	void
getCheckedNodes	获取选中的节点	-	Array<TreeNode>
expandAll	展开所有节点	-	void
collapseAll	折叠所有节点	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const tree = new SaTree('#my-tree', {
  data: [
    {
      id: 1,
      label: '一级节点 1',
      children: [
        { id: 11, label: '二级节点 1-1' },
        { id: 12, label: '二级节点 1-2' }
      ]
    }
  ],
  showCheckbox: true,
  defaultExpandedKeys: ['1'],
  onNodeClick: (node) => {
    console.log('点击节点:', node);
  },
  onCheck: (checkedNodes) => {
    console.log('选中的节点:', checkedNodes);
  }
});

// 获取选中的节点
const checkedNodes = tree.getCheckedNodes();

// 展开所有节点
tree.expandAll();

// 折叠所有节点
tree.collapseAll();

实际使用场景

场景 1：文件目录树

使用树形控件展示文件目录结构。

<div id="file-tree" style="border: 1px solid #ddd; border-radius: 4px; padding: 1rem; max-height: 400px; overflow-y: auto;"></div>

<script>
  const tree = new SaTree('#file-tree', {
    data: [
      {
        id: '1',
        label: '项目文件夹',
        children: [
          {
            id: '1-1',
            label: 'src',
            children: [
              { id: '1-1-1', label: 'index.js' },
              { id: '1-1-2', label: 'app.js' }
            ]
          },
          {
            id: '1-2',
            label: 'public',
            children: [
              { id: '1-2-1', label: 'index.html' }
            ]
          },
          { id: '1-3', label: 'package.json' }
        ]
      }
    ],
    defaultExpandedKeys: ['1', '1-1'],
    onNodeClick: (node) => {
      console.log('点击文件:', node.label);
    }
  });
</script>

加载 SanoUI 组件中...

场景 2：权限选择树

使用带复选框的树形控件选择权限。

<div id="permission-tree" style="border: 1px solid #ddd; border-radius: 4px; padding: 1rem; max-height: 400px; overflow-y: auto;"></div>
<button class="sa-button sa-button--primary" onclick="getSelectedPermissions()" style="margin-top: 1rem;">获取选中的权限</button>

<script>
  const tree = new SaTree('#permission-tree', {
    data: [
      {
        id: 'user',
        label: '用户管理',
        children: [
          { id: 'user-view', label: '查看用户' },
          { id: 'user-add', label: '添加用户' },
          { id: 'user-edit', label: '编辑用户' },
          { id: 'user-delete', label: '删除用户' }
        ]
      },
      {
        id: 'role',
        label: '角色管理',
        children: [
          { id: 'role-view', label: '查看角色' },
          { id: 'role-add', label: '添加角色' },
          { id: 'role-edit', label: '编辑角色' }
        ]
      }
    ],
    showCheckbox: true,
    defaultExpandedKeys: ['user', 'role'],
    onCheck: (checkedNodes) => {
      console.log('选中的权限:', checkedNodes.map(n => n.label));
    }
  });
  
  function getSelectedPermissions() {
    const checkedNodes = tree.getCheckedNodes();
    const permissions = checkedNodes.map(n => n.label);
    alert('选中的权限：\n' + permissions.join('\n'));
  }
</script>

加载 SanoUI 组件中...