jstree数据格式利用Map处理使用示例

最新推荐文章于 2024-03-22 10:06:36 发布

双击空格001

最新推荐文章于 2024-03-22 10:06:36 发布

阅读量516

点赞数 1

分类专栏： ES6 文章标签： js

本文链接：https://blog.csdn.net/weixin_42815873/article/details/121104190

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

改变之前的数据like：

let data3 = [
{ 
  "id": 23,
  "createdAt": "1613701572",
  "updateAt": "1622515678",
  "name": "vmhost",
  "config": { "-k8s": "no" },
  "desc": "",
  "type": [{ "id": 72, "createdAt": "1632906358", "updateAt": "1632906358", "name": "bxdev.node", "config": {}, "roleId": 0, "desc": "" }] 
}, 
{ 
  "id": 30, 
  "createdAt": "1613778066", 
  "updateAt": "1613778066", 
  "name": "base", "config": { "-k8s": "yes" }, 
  "desc": "", 
  "type": [{ "id": 71, "createdAt": "1632906358", "updateAt": "1632906358", "name": "bxdev.node", "config": {}, "roleId": 0, "desc": "" }] 
}, 
{ "id": 31, "createdAt": "1613778073", "updateAt": "1613778073", "name": "cph", "config": {}, "desc": "", "type": [] }, 
{ "id": 32, "createdAt": "1613778089", "updateAt": "1622515686", "name": "kubernetes", "config": { "-k8s": "no" }, "desc": "", "type": [{ "id": 73, "createdAt": "1632906358", "updateAt": "1632906358", "name": "bxdev.node", "config": {}, "roleId": 0, "desc": "" }] }, 
{ "id": 34, "createdAt": "1613788589", "updateAt": "1613788589", "name": "jumpbox", "config": {}, "desc": "", "type": [] }, { "id": 44, "createdAt": "1633923106", "updateAt": "1634528941", "name": "test", "config": {}, "desc": "newDesc", "type": [] }
]

改变之后的数据like：

treeData = [
  {
    'text': 'root',
    'icon': 'fa fa-tree',
    'state': {
      'opened': true,
      'selected': true
    },
    'children': [
      {
        'text': 'vmhost',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      },
      {
        'text': 'base',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      },
      {
        'text': 'cph',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      },
      {
        'text': 'kubernetes',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      },
      {
        'text': 'jumpbox',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      },
      {
        'text': 'test',
        'icon': 'fa fa-tree',
        'state': {
          'opened': false
        },
        'children': [
          {
            'text': 'bxdev.node',
            'icon': 'fa fa-leaf'
          }
        ]
      }
    ]
  }
]

在这里插入图片描述

代码：

const dataChild1 = data.map((x) => ({
  'text': x.name,
  'icon': 'fa fa-tree',
  'state': {
    'opened': false
  },
  'children': (x.type.map(x => ({
    'icon': 'fa fa-leaf',
    'text': x.name
  })))
}))
const result = dataNodeRoot.map(x => ({
  'text': 'root',
  'icon': 'fa fa-tree',
  'state': {
    'opened': true,
    'selected': true
  },
  children: dataChild1
}))