导出

FlexTree支持将树导出为Json和List格式。

下面以下面的树为例，说明如何导出树。

Root
- A
- B
- C

toJson

FlexTree和FlexTreeNode均支持toJson方法，用于将树导出为Json格式。

toJson(
    options?: FlexTreeExportJsonOptions<Fields, KeyFields>
): FlexTreeExportJsonFormat<Fields, KeyFields>

interface FlexTreeExportJsonOptions<
    Fields extends Record<string, any> = object,
    KeyFields extends CustomTreeKeyFields = DefaultTreeKeyFields,
> {
    childrenField?: string
    level?: number // 限定导出的级别
    fields?: (keyof IFlexTreeNode<Fields, KeyFields>)[]
    includeKeyFields?: boolean
}

参数

参数	类型	默认	描述
`options`	`FlexTreeExportJsonOptions`	无	导出选项
`options.childrenField`	`string`	`'children'`	子节点字段名
`options.level`	`number`	无	限定导出的级别
`options.fields`	`(keyof IFlexTreeNode<Fields, KeyFields>)[]`	无	导出的字段
`options.includeKeyFields`	`boolean`	`false`	是否导出关键字段

返回一个JSON对象，子节点字段名默认为children，可以通过options.childrenField参数自定义。

type FlexTreeExportJsonFormat<
    Fields extends Record<string, any> = object,
    KeyFields extends CustomTreeKeyFields = DefaultTreeKeyFields,
    TreeNode extends IFlexTreeNode<Fields, KeyFields> = IFlexTreeNode<Fields, KeyFields>,
    NodeId = NonUndefined<KeyFields['id']>[1],
> = TreeNode & {
    children?: FlexTreeExportJsonFormat<Fields, KeyFields, TreeNode, NodeId>[]
}

示例

import type { FlexTreeOptions, IFlexTreeNode } from 'flextree'
import { FlexTreeManager,FlexTree, FlexTreeVerifyError } from 'flextree'

import SqliteAdapter from 'flextree-sqlite-adapter' 
const sqliteDriver = new SqliteAdapter()
await sqliteDriver.open()

const tree = new FlexTree('tree', {
    adapter: sqliteDriver,
})
await tree.load()

tree.toJson()

输出的结果如下：

json

{
    "id":1,
    "name": "root",
    "children":[
        {
            "id":2,
            "name": "A",
            "children":[
                { "id":3, "name": "A1" },
                { "id":4, "name": "A2" },
                { "id":5, "name": "A3" }
            ]
        },
        {
            "id":6,
            "name": "B",
            "children":[
                { "id":7, "name": "B1" },
                { "id":8, "name": "B2" },
                { "id":9, "name": "B3" }
            ]
        },
        {
            "id":10,
            "name": "C",
            "children":[
                { "id":11, "name": "C1" },
                { "id":12, "name": "C2" },
                { "id":13, "name": "C3" }
            ]
        }    
    ]
}

说明
- toJson方法会将树导出为Json格式，可以通过options.level参数限定导出的级别。
- toJson方法可以在FlexTree和FlexTreeNode中调用。
- 可以通过options.fields参数指定导出的字段
- 默认情况下不会导出leftValue和rightValue字段,可以通过options.includeKeyFields参数指定是否导出关键字段
- 可以通过options.childrenField参数指定子节点字段名

toList

FlexTree和FlexTreeNode均支持toList方法，用于将树导出为带pid字段的list节点数组格式。

toList(
    options?: FlexTreeExportListOptions<Fields, KeyFields>
): FlexTreeExportListFormat<Fields, KeyFields>
interface FlexTreeExportListOptions<
    Fields extends Record<string, any> = object,
    KeyFields extends CustomTreeKeyFields = DefaultTreeKeyFields,
> {
    pidField?: string
    level?: number // 限定导出的级别
    fields?: (keyof IFlexTreeNode<Fields, KeyFields>)[]
    includeKeyFields?: boolean
}

参数

参数	类型	默认	描述
`options`	`FlexTreeExportListOptions`	无	导出选项
`options.pidField`	`string`	`'pid'`	父节点字段名
`options.level`	`number`	无	限定导出的级别
`options.fields`	`(keyof IFlexTreeNode<Fields, KeyFields>)[]`	无	导出的字段
`options.includeKeyFields`	`boolean`	`false`	是否导出关键字段

返回一个list节点数组，父节点字段名默认为pid，可以通过options.pidField参数自定义。

export type FlexTreeExportListFormat<
    Fields extends Record<string, any> = object,
    KeyFields extends CustomTreeKeyFields = DefaultTreeKeyFields,
    TreeNode extends IFlexTreeNode<Fields, KeyFields> = IFlexTreeNode<Fields, KeyFields>,
    NodeId = NonUndefined<KeyFields['id']>[1],
    OPTIONS extends FlexTreeExportListOptions<Fields, KeyFields> = FlexTreeExportListOptions<Fields, KeyFields>,
> = (
        (OPTIONS['fields'] extends string[] ? Extract<TreeNode, OPTIONS['fields'][number]> : TreeNode)
        & { [P in OPTIONS['pidField'] & string]: NodeId }
    )[]

示例

import type { FlexTreeOptions, IFlexTreeNode } from 'flextree'
import { FlexTreeManager,FlexTree, FlexTreeVerifyError } from 'flextree'
import SqliteAdapter from 'flextree-sqlite-adapter'
const sqliteDriver = new SqliteAdapter()
await sqliteDriver.open()

const tree = new FlexTree('tree', {
    adapter: sqliteDriver,
})
await tree.load()

tree.toList()

输出的结果如下：

json

[
    { "id":1, "name": "root", "pid":0 },
    { "id":2, "name": "A", "pid":1 },    
    { "id":3, "name": "A1","pid":2 },
    { "id":4, "name": "A2", "pid":2 },
    { "id":5, "name": "A3", "pid":2 },
    { "id":6, "name": "B", "pid":1 },
    { "id":7, "name": "B1", "pid":6 },
    { "id":8, "name": "B2", "pid":6 },
    { "id":9, "name": "B3", "pid":6 },
    { "id":10, "name": "C", "pid":1 },
    { "id":11, "name": "C1", "pid":10 },
    { "id":12, "name": "C2", "pid":10 },
    { "id":13, "name": "C3", "pid":10 }    
]

提示

toList和toJson方法均支持level参数，用于限定导出的级别。可以在FlexTree和FlexTreeNode中调用。

导出 ​

toJson ​

toList ​

导出

toJson

toList