乐趣区

用原生TypeScript造轮子六-Tree

ui 参考 primeNG: http://primefaces.org/primeng…
ts 开发环境:https://github.com/lycHub/ts-…
目录

简介

本节 demo 和源码
参考 ivew tree 的内部实现,完成其部分功能
已实现的功能:

  • 默认展开
  • 默认选中
  • 单 / 多选

基本思路

用户需要传入一个相对固定的数据结构,比如:

const data = [
  {
    title: 'parent 1',
    expand: true,
    children: [
      {
        title: 'parent 1-1',
        expand: true,
        selected: true,
        children: [
          {title: 'leaf 1-1-1'},
          {title: 'leaf 1-1-2'}
        ]
      },
      {
        title: 'parent 1-2',
        children: [
          {title: 'leaf 1-2-1'},
          {title: 'leaf 1-2-1'}
        ]
      }
    ]
  },
  {
    title: 'parent 2',
    expand: true,
    children: [
      {
        title: 'parent 2-1',
        children: [
          {title: 'leaf 2-1-1'},
          {
            title: 'leaf 2-1-2',
            selected: true
          }
        ]
      },
      {
        title: 'parent 2-2',
        expand: true,
        children: [
          {title: 'leaf 2-2-1'},
          {title: 'leaf 2-2-2'}
        ]
      }
    ]
  }
];

然后根据这个 data, 用递归函数渲染出 dom,每个 children 都对应一个 ul:

所以最重要的就是写出递归函数,demo 中是这段:

这里只是组装 dom 结构,还需要再写个递归函数,把 dom 和用户传入的 data 对应起来:

这个函数给每 item 加了个 nodeKey 作为标识,在上面渲染 dom,只要把这个 nodeKey 存在 dom 中,

那么在点击选中时,就能映射到对应的 item 数据了:

还有个点是,ts 中对于地归类的数据类型,可以如下设置:

export type DataTree = {
  title: string;
  expand?: boolean;
  selected?: boolean;
  nodeKey?: number;
  children?: DataTree[];}
退出移动版