@3mcode/tree-helper 中文文档教程

Question

tree-util

一些有用的树函数

1. data structure

每个树节点必须有三个字段：id,name 和children。eg:

[
  {
    id: '1',
    name: 'menuA',
    children: [
      { id: '21', name: 'menuA-1', menuCode: '21', children: [] },
      { id: '22', name: 'menuA-2', menuCode: '22', children: [] },
    ]
  },
  {
    id: '2',
    name: 'menuB',
    children: []
  }
]

2.install

method1:

npm i @3mcode/tree-helper -S

method2:

<script src='dist/index-browser.js'></script>
<script>
 treeHelper.methodXXX(); 
</script>

注意：如果要在IE浏览器中使用，版本应该是>; = 9

3. methods

function flattenTree(items);

@description: flatten the nested tree into a normal array
@param:
[{id:'1',name:'1',children:[{id:'1-1',name:'1-1',children:[]}]}]
@returns:
[{id:'1',name:'1',parentId:null,depth:0,index:0,visitPath:'1,'},{id:'1-1',name:'1-1',parentId:'1',depth:1,index:0,visitPath:'1,1-1,'}]

function buildTree(flattenedItems);

@description: convert flattened array to nested tree array
@param:[{id:'1',name:'1',parentId:null,depth:0,index:0,visitPath:'1,'},{id:'1-1',name:'1-1',parentId:'1',depth:1,index:0,visitPath:'1,1-1,'}]
@returns [{id:'1',name:'1',children:[{id:'1-1',name:'1-1',children:[]}]}]

function visitTree(items, action);

@description: traversing the tree node
@param: 
items: tree nodes
action: This function is called when traversing the tree node, and the tree node can be operated in the function

function findItem(items, itemId);

@description: shallow search
@params:
  items:tree nodes,
  itemId:node id to search
@returns: treeNode or undefined

function findItemDeep(items, itemId);

@description: deep search
@params:
  items:tree nodes,
  itemId:node id to search
@returns: tree node or undefined

function removeItem(items, id);

@description: remove tree node
@params:
  items:tree nodes,
  id:node id to remove
@returns: return newtree nodes which not contains param id

function setProperty(items, id, propertyName, setter);

@description: set tree node
@params:
  items:tree nodes,
  id:node id to search,
  propertyName: property name
  setter: (treeNode) => newValue
@returns: return newtree nodes, and not change  original tree nodes

function getChildCount(items, id);

@description: count the number of all descendant nodes
@params:
  items:tree nodes,
  id:node id to search,
@returns: number of all descendant nodes