zoukankan      html  css  js  c++  java
  • Egg.js 实现一维的对象数组转化为树形数组

    方式一:后端处理

    1.增加 tools service

    app/service/tools.js

    /**
     * 构建树形结构数据
     * @param {*} data
     */
    buildTree(data) {
      const res = [];
      // 找出所有根节点
      for(let item of data){
        if(!item.pid){
          item.children = getNode(item.id);
          res.push(item);
        }
      }
    
      // 传入根节点id 递归查找所有子节点
      function getNode(id) {
        const node = [];
        for(const item of data){
          if(item.pid === id){
            item.children = getNode(item.id);
            node.push(item);
          }
        }
        if(node.length === 0) return;
        return node;
      }
      return res;
    }

    2.获取 数据库 一维的对象数组

    app/service/food.js

    return await app.model.Food.findAll({
      raw: true // 设置为 true,即可返回源数据
    });

    3.处理后返回前端

    app/controller/food.js

    async lists() {
      const { ctx } = this;
      const data = await ctx.service.food.lists();
      if(data){
        ctx.body = {
          code: 200,
          message: '列表查询成功',
          data: ctx.service.tools.buildTree(data)
        }
      }else{
        ctx.body = {
          code: 500,
          message: '列表查询失败',
          data: {}
        }
      }
    }

    方式二:前端处理

    async componentDidMount() {
      let { data } = await axios.get(`${BaseUrl}/food/lists`);
      this.listData = data.data;
      this.setState({
        list: this._buildTree(0) // 一级pid为0
      });
    }
    
    // 实现一维的对象数组转化为树形数组
    _buildTree = (id) => {
      const data = this.listData.filter((item) => item.pid === id);
    
      data.forEach(item => {
        item.children = this._buildTree(item.id);
      });
    
      return data;
    }
    

    效果图

  • 相关阅读:
    弹性盒模型的实际应用
    大图滚动--这是精髓实例
    三级联动
    sql
    jsp2
    marquee
    人机五子棋(AI算法有瑕疵)
    Jsp1
    倒计时
    时间
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12485441.html
Copyright © 2011-2022 走看看