0.0.7 • Published 1 year ago

void-tree v0.0.7

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

void-tree

npm (scoped)

一个简陋的树型数据工具

只是个人项目,整体较为随便,作为开发途中的经验总结,如有相似的需求,推荐copy或阅读源码,不建议将该包在实际项目中使用

如有幸被实际使用在项目内,不胜荣幸

灵感是treemate

初衷

围绕树状数据解析,总结使用一些组件库的tree组件时的通用业务

一开始想到了使用 naiveui 团队开源的 treemate

treemate无法做到在递归时自定义一些行为

并且个人需求只是围绕树状数据解析

这个简陋至极的包也因此孕育而生

使用

/**
 *  一个占位,返回空空如也的模型
 */
createInitVoidTree()

/**
 * 通过一个单层列表构造树状结构
 * [{
 *    id: 0,
 *    parentId: -1
 * }]
 * 需拥有类似的数据结构
 */
createVoidTreeByList()

/**
 * 构造树状模型
 */
createVoidTree()

数据模型

interface TreeNode<Raw extends Record<string, any>> {
  key: Key;
  label: string;
  raw: Raw;
  level: number;
  index: number;
  parent?: TreeNode<Raw>;
  disabled: boolean;
  isLeaf: boolean;
  path: Key[];
  siblings: Array<TreeNode<Raw>>;
  children?: Array<TreeNode<Raw>>;
  [key: string]: any;
}

declare class VoidTree<Raw> {
  /**
   * 处理后对外展示的数据
   */
  treeNodes: TreeNode<Raw>[];
  /**
   * 自定义的一些缓存
   */
  cache: TreeCache<Raw>;
  /**
   * 选择的key值
   */
  checkKeys: Key[];
  constructor(treeNodes: TreeNode<Raw>[], cache: TreeCache<Raw>);
  /**
   * 获取某项缓存
   * @param key
   */
  getCache(key: string): any;
  /**
   * 获取key-node 结构的Map数据
   */
  get treeNodeMap(): Map<Key, TreeNode<Raw>>;
  /**
   * 通过key获取单个节点信息
   * @param key
   */
  getNode(key: Key): TreeNode<Raw> | undefined;
  /**
   * 通过多个key获取多个节点信息
   * @param key
   * @param ignoreEmpty
   */
  getNodes(key: Key | Key[], ignoreEmpty?: boolean): TreeNode<Raw>[];
  /**
   * 获取子节点
   * @param key
   */
  getChild(key: Key): TreeNode<Raw>[] | undefined;
  /**
   * 获取父节点
   * @param key
   */
  getParent(key: Key): TreeNode<Raw> | undefined;
  /**
   * 选择
   * @param key
   */
  check(key: Key | Key[]): void;
  /**
   * 选择
   * @param key
   */
  uncheck(key: Key | Key[]): void;
  /**
   * 选择
   * @param key
   */
  updateCheckKeys(key: Key | Key[]): void;
  /**
   * 自定义选择
   * @param fn
   */
  customUpdateCheckKeys(fn: (self: VoidTree<Raw>) => Key | Key[]): void;
  /**
   * 搜索
   * 解决一些组件库tree搜索不会筛选数据,而是加下划线
   * 方法改写自naiveui
   * @param keyword
   * @param filter
   */
  search(keyword: string, filter?: (pattern: string, v: string) => boolean): void;
}
0.0.5

2 years ago

0.0.7

1 year ago

0.0.6

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.4

2 years ago

0.0.1

2 years ago

0.0.1-beta.3

2 years ago

0.0.1-beta.2

2 years ago

0.0.1-beta.1

2 years ago