Skip to content

yunnan-tibet/tree-utils

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits

config

config

 
 

src

src

 
 

.babelrc

.babelrc

 
 

.gitignore

.gitignore

 
 

.gitlab-ci.yml

.gitlab-ci.yml

 
 

.npmignore

.npmignore

 
 

CHANGELOG.md

CHANGELOG.md

 
 

README.md

README.md

 
 

package.json

package.json

 
 

tsconfig.json

tsconfig.json

 
 

Repository files navigation

前端通用树形操作方法

树形操作通常为前端复杂点，为了不重复造轮子，便于各种框架和项目的树形操作，故写了这个库。

使用范围

通用

方法例子

changeTreePropName

后端返回的字段可能和前端需要不符的情况下，用来改变树形结构的key
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  }
]

// 例子1，改变属性名
const _treeL = changeTreePropName(treeList, [['deptId', 'value'], ['deptName', 'label'], ['deptChildrenList', 'children']], 'deptChildrenList');
// _treeL会得到下面的结果
[
  {
    value: '1',
    label: 'dept1',
    children: [
      {
        value: '2',
        label: 'dept2',
        children: [
          {
            value: '3',
            label: 'dept3',
          }
        ]
      }
    ]
  }
]

// 例子2，使用方法改变属性名（源属性名可以多次使用）
const _treeL1 = changeTreePropName(treeList, [['deptId', 'value'], ['deptName', 'label'], ['deptChildrenList', 'children'], ['deptChildrenList', 'isLeaf', (v) => {
  return !v || !v.length
}]], 'deptChildrenList');

// _treeL1会得到下面的结果
[
  {
    value: '1',
    label: 'dept1',
    isLeaf: false,
    children: [
      {
        value: '2',
        label: 'dept2',
        isLeaf: false,
        children: [
          {
            value: '3',
            label: 'dept3',
            isLeaf: true,
          }
        ]
      }
    ]
  }
]

setTreeData

把线性数据转成树形数据
// 例子
const peerList = [
  {
    deptId: '1',
    deptName: 'name1',
    parentId: null,
  },
  {
    deptId: '2',
    deptName: 'name2',
    parentId: '1',
  },
  {
    deptId: '3',
    deptName: 'name3',
    parentId: '2',
  },
  {
    deptId: '4',
    deptName: 'name4',
    parentId: null,
  }
]

// 当前例子parentId为null，若顶级parentId存在，则设置topCode即可
const _treeL = setTreeData(peerList, 'deptId', 'parentId', 'children')

// _treeL会得到下面的结果
[
  {
    deptId: '1',
    deptName: 'name1',
    parentId: null,
    children: [
      {
        deptId: '2',
        deptName: 'name2',
        parentId: '1',
        children: [
          {
            deptId: '3',
            deptName: 'name3',
            parentId: '2',
          }
        ],
      }
    ],
  },
  {
    deptId: '4',
    deptName: 'name4'
    parentId: null,
  }
]

getAllTreeKeys

获取某个key的集合
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    info: {
      innerId: '11',
    },
    deptChildrenList: [
      {
        deptId: '2',
        info: {
          innerId: '21',
        },
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
            info: {
              innerId: '31',
            },
          }
        ]
      }
    ]
  }
]

// 例子1
const _keys = getAllTreeKeys(treeList, 'deptId', 'deptChildrenList')

// _keys会得到下面的结果
['1', '2', '3']

// 例子2，多层级属性key获取
const _keys1 = getAllTreeKeys(treeList, 'info.innerId', 'deptChildrenList')

// _keys1会得到下面的结果
['11', '21', '31']

findSingle

根据指定key从主树获取子树，浅拷贝
// 以最常见的部门树结构来举例
const treeObj = {
  deptId: '1',
  deptName: 'dept1',
  info: {
    innerId: '11',
  },
  deptChildrenList: [
    {
      deptId: '2',
      info: {
        innerId: '21',
      },
      deptName: 'dept2',
      deptChildrenList: [
        {
          deptId: '3',
          deptName: 'dept3',
          info: {
            innerId: '31',
          },
        }
      ]
    }
  ]
}

// 例子1
const _treeObj = findSingle(treeObj, 'deptId', '2', 'deptChildrenList')

// _treeObj会得到下面的结果
{
  deptId: '2',
  info: {
    innerId: '21',
  },
  deptName: 'dept2',
  deptChildrenList: [
    {
      deptId: '3',
      deptName: 'dept3',
      info: {
        innerId: '31',
      },
    }
  ]
}

// 例子2
const _treeObj1 = findSingle(treeObj, 'info.innerId', '31', 'deptChildrenList')

// _treeObj1会得到下面的结果

{
  deptId: '3',
  deptName: 'dept3',
  info: {
    innerId: '31',
  },
}

getMyTreeListByKey

根据key从主树list获取子树
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  }
]

// 例子
const _treeObj = getMyTreeListByKey(treeList, 'deptId', '2', 'deptChildrenList')

// _treeObj会得到下面的结果
{
  deptId: '2',
  deptName: 'dept2',
  deptChildrenList: [
    {
      deptId: '3',
      deptName: 'dept3',
    }
  ]
}

getTreeKeysByKey

根据key从主树获取子树的所有key值列表
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  }
]

// 例子
const _keys = getTreeKeysByKey(treeList, 'deptId', '2', 'deptChildrenList')

// _keys会得到下面的结果
['2', '3']

getPeerList

扁平化树形
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  }
]

// 例子
const _peerL = getPeerList(treeList, 'deptChildrenList')

// _peerL会得到下面的结果
[
  {
    deptId: '1',
    deptName: 'dept1',
  },
  {
    deptId: '2',
    deptName: 'dept2',
  },
  {
    deptId: '3',
    deptName: 'dept3',
  },
]

filterTreeData

根据字符串模糊筛选tree，底下有的会保存上面和下面的链，支持多个模糊搜索
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      },
      {
        deptId: '4',
        deptName: 'dept4',
        deptChildrenList: [
          {
            deptId: '5',
            deptName: 'dept5',
          }
        ]
      },
    ]
  },
]

// 例子
const _treeL = filterTreeData(treeList, 'deptName', 'pt4', 'deptChildrenList')

// _treeL会得到下面的结果，dept4匹配到了pt4
[
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '4',
        deptName: 'dept4',
        deptChildrenList: [
          {
            deptId: '5',
            deptName: 'dept5',
          }
        ]
      },
    ]
  },
]

filterTreeDataExact

精准筛选tree，底下有的会保存上面和下面的链
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '34',
            deptName: 'dept3',
          }
        ]
      },
      {
        deptId: '4',
        deptName: 'c',
        deptChildrenList: [
          {
            deptId: '5',
            deptName: 'dept5',
          }
        ]
      },
    ]
  },
]

// 例子
const _treeL = filterTreeData(treeList, 'deptId', '4', 'deptChildrenList')

// _treeL会得到下面的结果，匹配到了deptId为4，不会匹配到34
[
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '4',
        deptName: 'dept4',
        deptChildrenList: [
          {
            deptId: '5',
            deptName: 'dept5',
          }
        ]
      },
    ]
  },
]

filterLine

根据key筛选tree得到扁平化数组，仅匹配到一个，底下有的会保存上链，去除底部
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  },
  {
    deptId: '4',
    deptName: 'dept4',
  }
]

// 例子
const _peerL = filterLine(treeList, 'deptId', '2', 'deptChildrenList')

// _peerL会得到下面的结果
[
  {
    deptId: '1',
    deptName: 'dept1',
  },
  {
    deptId: '2',
    deptName: 'dept2',
  },
]

getLeafs

获取tree的叶子节点列表
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
          }
        ]
      }
    ]
  },
  {
    deptId: '4',
    deptName: 'dept4',
  }
]

// 例子
const _leafL = getLeafs(treeList, 'deptChildrenList')

// _leafL会得到下面的结果
[
  {
    deptId: '3',
    deptName: 'dept3',
  },
  {
    deptId: '4',
    deptName: 'dept4',
  }
]

mergeTreeList

将两个树形列表进行合并，合并数组默认是同层级的合并
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '11',
        deptName: 'dept11',
        deptChildrenList: [
          {
            deptId: '111',
            deptName: 'dept111',
          },
          {
            deptId: '112',
            deptName: 'dept112',
          }
        ]
      }
    ]
  },
]

const addTreeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '11',
        deptName: 'dept11',
        deptChildrenList: [
          {
            deptId: '113',
            deptName: 'dept113',
          }
        ]
      }
    ]
  },
  {
    deptId: '2',
    deptName: 'dept2',
  }
]

// 例子
const mergedTreeL = mergeTreeList(treeList, addTreeList, 'deptId', 'deptChildrenList')

// mergedTreeL会得到下面的结果
[
  {
    deptId: '1',
    deptName: 'dept1',
    deptChildrenList: [
      {
        deptId: '11',
        deptName: 'dept11',
        deptChildrenList: [
          {
            deptId: '111',
            deptName: 'dept111',
          },
          {
            deptId: '112',
            deptName: 'dept112',
          }
          {
            deptId: '113',
            deptName: 'dept113',
          }
        ]
      }
    ]
  },
  {
    deptId: '2',
    deptName: 'dept2',
  }
]

filterTopMenu

根据key在主树截断不符合的子元素
// 以最常见的部门树结构来举例
const treeList = [
  {
    deptId: '1',
    deptName: 'dept1',
    type: 'menu',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        type: 'menu',
        deptChildrenList: [
          {
            deptId: '3',
            deptName: 'dept3',
            type: 'button',
          }
        ]
      }
    ]
  },
  {
    deptId: '4',
    deptName: 'dept4',
    type: 'menu',
  }
]

// 例子
const _l = filterTopMenu(treeList, 'type', 'menu', 'deptChildrenList')

// _l会得到下面的结果
[
  {
    deptId: '1',
    deptName: 'dept1',
    type: 'menu',
    deptChildrenList: [
      {
        deptId: '2',
        deptName: 'dept2',
        type: 'menu',
        deptChildrenList: []
      }
    ]
  },
  {
    deptId: '4',
    deptName: 'dept4',
    type: 'menu',
  }
]
方法 参数 参数说明 说明
changeTreePropName (list: any[], changeKeys: Array<[string, string, Function?]>, childrenKey?: string) @param {tree[]} list 树形列表, @param {Array<[string, string, Function?]>} changeKeys Array<[原始key, 最终key, changeFunc(item[原始key], item)]>, @param {string} childrenKey children属性key，默认为children, @returns {tree[]} 树形数组 后端返回的字段可能和前端需要不符的情况下，用来改变树形结构的key，例子：1.统一树形数据字段，2.主动适配组件
setTreeData (source: any[], idKey: string, parentIdKey: string, childrenKey: string, topCode?: string) @param {any[]} source 原数据List, @param {string} idKey id的key, @param {string} parentIdKey parentId的key, {string} childrenKey 生成children的key, @param {string} topCode 顶级元素父元素的id, @returns {tree[]} 树形数组 把线性数据转成树形数据
findSingle (tree: any, key: string, value: any, childrenKey?: string) @param {treeObj} tree obj类型, @param {string} key 可以是key.key类型, @param {any} value 值, @param {string} childrenKey children属性key，默认为children, @returns {treeObj} 树形对象 根据指定key从主树获取子树，浅拷贝
getMyTreeListByKey (treeList: any[], key: string, value: any, childrenKey?: string) @param {string} key key, @param {tree[]} treeList list类型, @param {any} value 值, @param {string} childrenKey children属性key，默认为children, @returns {treeObj} 树形对象 根据key从主树list获取子树
getAllTreeKeys (treeList: any[], key: string, childrenKey?: string) @param {tree[]} treeList 源树形数组, @param {string} key 可以是key.key类型, @param {string} childrenKey children属性key，默认为children, @returns {any[]} key值数组 获取某个key的集合, 例子：通常用于获取树形结构下所有id的集合
getTreeKeysByKey (treeList: any[], key: string, value: any, childrenKey?: string) @param {string} key 选用字段key, @param {tree[]} treeList 源树形数组, @param {any} value 值, @param {string} childrenKey children属性key，默认为children, @returns {string[]} key值数组 根据key从主树获取子树的所有key值列表
getPeerList (list: any[], childrenKey?: string) @param {tree[]} list tree数组，@param {string} childrenKey children属性key，默认为children，@returns {any[]} 返回扁平化数组 扁平化树形
filterTreeData (origin: any[], key: string string[], value: any, childrenKey?: string) @param {tree[]} origin 原始tree, @param {any} value 筛选字符串, @param {string} key 字符串对比的key，支持多个, @param {string} childrenKey children属性key，默认为children, @returns {tree[]} 树形数组，保存上链和下链
filterTreeDataExact (origin: any[], key: string string[], value: any, childrenKey?: string) @param {tree[]} origin 原始tree, @param {any} value 筛选字符串, @param {string} key 字符串对比的key，支持多个, @param {string} childrenKey children属性key，默认为children, @returns {tree[]} 树形数组，保存上链和下链
filterLine (origin: any[], key: string, value: any, childrenKey?: string) @param {tree[]} origin 原始tree, @param {any} value 筛选值, @param {string} key 对比的key, @param {string} childrenKey children属性key，默认为children, @returns {any[]} 扁平化的列表，保存上链 根据key筛选tree得到扁平化数组，仅匹配到一个，底下有的会保存上链，去除底部（精准匹配）, 例子：1.主要用于获取匹配id节点的上链（扁平化）2.用于树形名称的链式回显 杭州市/西湖区/xx苑
getLeafs (treeL: any[], childrenKey?: string) @param {tree[]} treeL 原始treeList, @param {string} childrenKey children属性key，默认为children, @returns {any[]} 扁平的叶子节点数组 获取tree的叶子节点列表, 例子：使用antd树结构时，只拿叶子节点进行回显
mergeTreeList (treeList: any[], addTreeList: any[], key: string, childenKey?: string) @param {tree[]} treeList 源树形数组，@param {tree[]} addTreeList 加入的树形数组，@param {string} key 对比的key，@param {string} childenKey children属性key，默认为children，@returns {tree[]} 合并后的树形数组 将两个树形列表进行合并，合并数组默认是同层级的合并
filterTopMenu (treeList: any[], key: string, value: any, childenKey?: string) @param {tree[]} treeList 源树形数组，@param {string} key 对比的key，@param {any} value 值，@param {string} childenKey children属性key，默认为children，@returns {tree[]} 筛选后的树形数组 根据key在主树截断不符合的子元素

About

操作树形的方法

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages