siwi-tree

无限级分类 生成菜单

Usage no npm install needed!

<script type="module">
  import siwiTree from 'https://cdn.skypack.dev/siwi-tree';
</script>

README

node Build Status npm npm Github file size

siwi-tree

无限级分类 家谱树 子孙树 生成菜单 提供递归和迭代两种方式实现

install

use npm

npm install siwi-tree

use yarn

yarn add siwi-tree

Example

实例化参数

参数 类型 是否必选 默认值 含义
id_index String id 指定id下标
parent_index String parent_id 指定parent_id下标
sub_index String children 指定sub下标

默认

默认情况下 数据如下

const data = [{
        id: 1,
        name: '中国',
        parent_id: 0
    },
    {
        id: 2,
        name: '台湾',
        parent_id: 1
    },
    {
        id: 3,
        name: '台北',
        parent_id: 2
    },
    {
        id: 4,
        name: '钓鱼岛',
        parent_id: 3
    },
    {
        id: 5,
        name: '日本',
        parent_id: 0
    },
    {
        id: 6,
        name: '东京',
        parent_id: 5
    },
]
const Tree = require('siwi-tree')
const tree = new Tree() // 这里不用传入参数

class Example {
    constructor() {
        this.init()
    }
    async init() {
        const familyTree = await tree.familyTree(data, 4)
        console.log(familyTree)
        const subTree = await tree.subTree(data, 2)
        console.log(subTree)
        const res = await tree.getTree(data)
        console.log(JSON.stringify(res))
    }
}

module.exports = new Example()

自定义下标

通常情况下 树的数据源是多样的 可以通过传入 id_index parent_index sub_index 指定数据源的对应下标

const data = [{
        id: 1,
        name: '中国',
        pid: 0
    },
    {
        id: 2,
        name: '台湾',
        pid: 1
    },
    {
        id: 3,
        name: '台北',
        pid: 2
    },
    {
        id: 4,
        name: '钓鱼岛',
        pid: 3
    },
    {
        id: 5,
        name: '日本',
        pid: 0
    },
    {
        id: 6,
        name: '东京',
        pid: 5
    },
]
const Tree = require('siwi-tree')
const id_index = 'id'
const parent_index = 'pid'
const sub_index = 'sub'
const tree = new Tree(id_index, parent_index, sub_index)

class Example {
    constructor() {
        this.init()
    }
    async init() {
        const familyTree = await tree.familyTree(data, 4)
        console.log(familyTree)
        const subTree = await tree.subTree(data, 2)
        console.log(subTree)
        const res = await tree.getTree(data)
        console.log(JSON.stringify(res))
    }
}

module.exports = new Example()

迭代方式

目前迭代实现 家谱树 子孙树

const data = [{
        id: 1,
        name: '中国',
        parent_id: 0
    },
    {
        id: 2,
        name: '台湾',
        parent_id: 1
    },
    {
        id: 3,
        name: '台北',
        parent_id: 2
    },
    {
        id: 4,
        name: '钓鱼岛',
        parent_id: 3
    },
    {
        id: 5,
        name: '日本',
        parent_id: 0
    },
    {
        id: 6,
        name: '东京',
        parent_id: 5
    },
]
const Tree = require('siwi-tree')
const tree = new Tree() // 这里不用传入参数

class Example {
    constructor() {
        this.init()
    }
    async init() {
        const familyTree = await tree.familyTreeIteration(data, 4)
        console.log(familyTree)
        const subTree = await tree.subTreeIteration(data, 2)
        console.log(subTree)
    }
}

module.exports = new Example()