# js.tree
**Repository Path**: wzlee/js.tree
## Basic Information
- **Project Name**: js.tree
- **Description**: 一个循环解决行转树的问题，快速，轻量，无依赖。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 15
- **Created**: 2021-05-31
- **Last Updated**: 2022-07-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# @zhengxs/js.tree
[](https://www.typescriptlang.org/)
[](https://github.com/prettier/prettier)
[](https://www.npmjs.com/package/%40zhengxs%2Fjs.tree)
[](https://www.npmjs.com/package/%40zhengxs%2Fjs.tree)
[](https://www.npmjs.com/package/%40zhengxs%2Fjs.tree)
[](https://unpkg.com/@zhengxs/js.tree/dist/js.tree.min.js)
[](https://codecov.io/gh/zhengxs2018/js.tree)
[](https://david-dm.org/zhengxs2018/js.tree?type=dev)
[](https://david-dm.org/zhengxs2018/js.tree?type=dev)
[](https://dashboard.cypress.io/projects/dtcor7/runs)
[](https://github.com/zhengxs2018/js.tree/actions/workflows/tests.yaml)
[](#typescript)
[国内镜像](https://gitee.com/zhengxs2018/js.tree)
---
快速，轻量，无依赖的树结构数据处理函数库。
- 一个循环解决行转树的问题
- 转树除了添加 `children` 属性，不会修改任何数据
- 支持任意关系字段，如：非 id，parentId, children 字段支持
- 支持接管插入行为，如：自定义插入顺序
- 支持动态导出树节点
- 内置 `filter/map` 函数
## 快速开始
### 文档
- 转换
- [toTree 行转树](./docs/transform/toTree.md)
- [toRows 树转行](./docs/transform/toRows.md)
- 操作
- [map 修改内容](./docs/operators/map.md)
- [each 循环内容](./docs/operators/each.md)
- [filter 过滤内容](./docs/operators/filter.md)
- [exclude 排除内容](./docs/operators/exclude.md)
- [二次封装](./docs/advanced/custom.md)
### 安装
```shell
$ npm i @zhengxs/js.tree --save
```
### 使用
```js
import { toTree } from '@zhengxs/js.tree'
toTree([
{ id: 10000, parentId: null, title: '标题 1' },
{ id: 20000, parentId: null, title: '标题 2' },
{ id: 11000, parentId: 10000, title: '标题 1-1' },
])
// ->
// [
// {
// id: 10000,
// parentId: null,
// title: '标题 1',
// children: [
// { id: 11000, parentId: 10000, title: '标题 1-1', children: [] }
// ]
// },
// { id: 20000, parentId: null, title: '标题 2', children: [] },
// ]
```
支持任意关系字段的数据
```js
import { toTree, ROOT_ID } from '@zhengxs/js.tree'
const data = [
{ uid: 10000, pid: null, title: '标题 1', sort: 1 },
{ uid: 20000, pid: null, title: '标题 2', sort: 2 },
{ uid: 11000, pid: 10000, title: '标题 1-1', sort: 3 },
]
const result = toTree(data, {
// 如果 parentId 为 null 或 undefined 会合并一起
// 使用 ROOT_ID 作为 key 保存
// 支持函数，动态返回
root: ROOT_ID,
// lodash 版本，支持 path, 如: nested.id
idKey: 'uid', // 可选，默认: id
// lodash 版本，支持 path, 如: nested.parentId
parentKey: 'pid', // 可选，默认：parentId
// 挂载子级的属性名称，默认：children
childrenKey: 'items',
// 接管插入行为
insert(siblings, node) {
// ps: 任意层级的数据都是这样处理的
const index = siblings.findIndex((n) => n.sort > node.sort)
if (index === -1) {
siblings.push(node)
} else {
siblings.splice(index, 0, node)
}
},
// 数据添加进 children 数组前的处理，默认：undefined
transform(data) {
// 通过浅拷贝避免修改原始数据
// 可以在这里动态添加属性
return { ...data, checked: false }
},
})
// ->
// [
// {
// uid: 10000,
// pid: null,
// title: '标题 1',
// sort: 1,
// checked: false,
// items: [
// {
// uid: 11000,
// pid: 10000,
// title: '标题 1-1',
// sort: 3,
// checked: false,
// items: []
// }
// ]
// },
// {
// uid: 20000,
// pid: null,
// title: '标题 2',
// sort: 2,
// checked: false,
// items: []
// }
// ]
```
## TypeScript
内置 ts 类型
```ts
import { toTree } from '@zhengxs/js.tree'
// 转换前的数据
type MenuItem = {
id: string
parentId: string
text: string
url?: string
}
// 转换后的数据
interface Nav extends MenuItem {
items: Nav[]
}
// 如果修改了 childrenKey
// 为了让类型提示正确，可以传入正确的类型
toTree