element-tree-js v3.7.11

element-tree-js v3.7.11

The element-tree-js library support esm and cjs module

Installation

npm install element-tree-js
//or
yarn add element-tree-js

Usage

let tree = [
  {
    id: 32,
    name: 'level-1',
    key: '2',
    children: [
      {
        id: 79,
        name: 'level-1-1',
        key: '1',
      },
      {
        id: 77,
        name: 'level-1-2',
        key: '2',
        children: [
          {
            id: 179,
            name: 'level-1-2-1',
            key: '2',
          },
        ],
      },
    ],
  },
];

let tree1 = [
  {
    id: 32,
    name: 'level-1',
    key: '2',
    children: [
      {
        id: 79,
        name: 'level-1-1',
        key: '1',
      },
      {
        id: 77,
        name: 'level-1-2',
        key: '2',
        children: [
          {
            id: 32,
            name: 'level-1-2-1',
            key: '2',
          },
        ],
      },
    ],
  },
];

import treeJs from 'element-tree-js';

//设置默认的 子节点 字段名，因为有的人在element中定义成了chidren，有的人定义成了son
//Set the default child node field name，like 'chidren' or 'son'.
treeJs.setDefaultChildName('child');
//let tree = [
//    {
//      id: 32,
//      name: "level-1",
//      key: "2",
//      son: []
//    }
//];

//In your function or method

// 获取 树 的 最大深度.
// Gets the maximum depth of the tree,
treeJs.getTreeMaxDeep(tree); // 3

// 获取 树中节点 的 深度.
// Gets the depth of the node in the tree,
treeJs.getNodeLevel(tree, 'id', 3); // 3

// 查找 树 中id等于179的节点。
// Find the node in the tree when id is '179'. return the node.
treejs.getTreeNodeByField(tree, 'id', 179);
//{id: 179, name: "level-1-2-1", key: "2"}

//将树中id为179的节点的 name 修改为 hello world, 返回修改后的整棵 树
//Change the name of the node in the tree when id is '179' to 'hello world', return the new tree.
treejs.modifyTreeNodeByField(tree, 'id', 179, 'name', 'hello world');

//将树中id为["179",'77'] 的节点的 设置为禁用, 返回修改后的整棵 树
//Set the node in the tree when id belong to ["179", "77"] to disabled, return the new tree
treejs.modifyTreeNodeDisabled(tree, 'id', ['179', '77'], true); //最后一位为是否禁用，如果为false，则表示取消禁用

//禁用整颗树， 最后一位如果为false， 则表示启用整颗树. 返回修改后的整颗树。
// Disable the whole tree, enable the whole tree when last param is "false", return the new tree.
treejs.modifyAllTreeDisabled(tree, true);

// 查找 树中id为179所对应的节点的 父节点
// Find the parent node when id is '179' in the tree.  return the parent node.
treejs.getTreeParentNode(tree, 'id', 179);
//{
//  id: 77,
//  name: 'level-1-2,
//  key: "2",
//  children: [
//    {
//      id: 179,
//      name: "level-1-2-1",
//      key: "2"
//    }
//  ]
//}

// 查找 树中id为[79,32]时，分别对应的 name 的列表.  默认只查叶子节点
// Find the list of names in the tree when the id belong to [79,32].  default the node is leaf.
treejs.getTreeDestList(tree1, 'id', [79, 32], 'name');
//["level-1-1", "level-1-2-1"]

//遍历所有的节点
// search all node of the tree.
treejs.getTreeDestList(tree1, 'id', [79, 32], 'name', false);
//["level-1", "level-1-1", "level-1-2-1"]

// 向 树中 id为179的节点，添加一个  子节点（添加的子节点在所有子节点的最后一位） ，返回整颗树
// add a child node when id is '179' in the tree. return the new tree.
treejs.addNodeToTree(tree, 'id', 179, {
  id: 120,
  name: 'hello world',
  key: 'd1',
});

// 向 树中 id为179的节点，添加一个兄弟节点（添加的节点在目标节点的相邻位置） ，返回整颗树
treejs.addNodeToTargetAfter(tree, 'id', 179, {
  id: 120,
  name: 'hello world',
  key: 'd1',
});

// 将 树中 id为179的节点，替换为另一个节点 {id: 120,name: "hello world",key: "d1",}，并返回整颗树
// replace a child node that id is '179' in the tree. return the new tree.
treejs.replaceNodeFromTree(tree, 'id', 179, {
  id: 120,
  name: 'hello world',
  key: 'd1',
});

// 获取节点id为179的下一级节点，返回下一级的节点数组。类似于文件夹中的子文件夹或者文件
treejs.getChildLevel(tree, 'id', 179);

// 获取当id为179的上一级节点，返回上一级的节点数组。类似于从子文件夹返回上一层文件夹
treejs.getParentLevel(tree, 'id', 179);

//删除 树 中id为77的 子节点(子节点的后代也会被全部删除), 返回修改后的树
// Delete the child node in the tree when id is '77', the offspring of child node will be deleted. return the new tree.
treejs.removeNodeFromTree(tree, 'id', 77);

//获取 叶子节点的isWho属性值为0的树
treeJs.getFiltersTreeLeaf(tree, 'isWho', 0);