用原生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[];
}