zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    如何使用 js 实现一个树组件

    tree component

    
    
    
    const arr = [
      {
        id: 1,
        value: 1,
        level: 1,
        parentId: 0,
      },
      {
        id: 2,
        value: 2,
        level: 1,
        parentId: 0,
      },
      {
        id: 3,
        value: 3,
        level: 2,
        parentId: 1,
      },
      {
        id: 4,
        value: 4,
        level: 2,
        parentId: 1,
      },
      {
        id: 5,
        value: 5,
        level: 3,
        parentId: 2,
      },
    ];
    
    const obj = {
      root: {
        id: 0,
        value: 0,
        level: 0,
        parentId: 0,
        children: null,
      },
    }
    
    const json = {
      root: {
        id: 0,
        value: 0,
        level: 0,
        parentId: 0,
        children: [
          {
            id: 1,
            value: 1,
            level: 1,
            parentId: 1,
            children: [
              {
                id: 3,
                value: 3,
                level: 2,
                parentId: 2,
                children: [
                  {
                    id: 5,
                    value: 5,
                    level: 3,
                    parentId: 2,
                    children: null,
                  },
                ],
              },
              {
                id: 4,
                value: 4,
                level: 2,
                parentId: 2,
                children: null,
              },
            ],
          },
          {
            id: 2,
            value: 2,
            level: 1,
            parentId: 1,
            children: null,
          },
        ]
      }
    }
    
    
    const tree = {
      "root": {
        "id": null,
        "title": "root",
        "expanded": true,
        "folder": true,
        "selected": false,
        "children": [
            {
                "id": null,
                "title": "backend-publish/libs/layui-src/images/face/54.gif",
                "expanded": true,
                "folder": false,
                "selected": false,
                "children": null
            },
            {
              "id": null,
              "title": "backend-publish/libs/layui-src/images/face/54.gif",
              "expanded": true,
              "folder": false,
              "selected": false,
              "children": null
          },
        ],
      },
    }
    
    
    

    JSON.stringify

    JSON.stringify(value[, replacer[, space]])
    
    

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

    
    const log = console.log;
    
    const obj = {
      a: "a",
      b: {
        c: "c",
        d: {
          e: "e",
          f: {
            g: "g",
            h: {
              i: "i",
            },
          },
        },
      },
    };
    // ✅ OK
    log(`obj nested =
    `, JSON.stringify(obj, null, 2));
    // log(`obj nested =
    `, JSON.stringify(obj, null, 4));
    // ❌ 隐藏 bug
    // log(`obj nested =
    `, JSON.parse(JSON.stringify(obj)));
    
    
    

    refs



    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    PL/SQL编程基本概念
    oracle基本笔记整理及案例分析2
    oracle基本笔记整理及案例分析2
    oracle基本笔记整理及案例分析2
    oracle基本笔记整理及案例分析1
    oracle基本笔记整理及案例分析1
    oracle基本笔记整理及案例分析1
    oracle笔记整理2
    oracle笔记整理2
    oracle笔记整理2
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13836958.html
Copyright © 2011-2022 走看看