专栏首页菜鸟前端工程师react-开发经验分享-树形结构的解析与运用(二)

react-开发经验分享-树形结构的解析与运用(二)

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

ant框架里,tree结构的剖析 承接上文 问题:ant的异步树形结构,当渲染下级结构完成后,再次在主干新建一个新的下级结构时,不会实时渲染出新增加的那条下级结构,必须刷新整个页面,重新后端请求数据,并进行渲染,这是一个不好的体验 3.根据ant的tree结构,自定义实时渲染tree结构页面 思路:使用递归模式

// 实时显示下级页面的变化实例
// 封装函数:新增下级结构
/*
tree为当前已经被渲染出来的所有tree结构(根据ant框架自带的onLoadData方法实时获取)
id为新增的treeChildren的上级id属性(根据ant框架自带的onSelect方法的参数info获取)
addData为新增的treeChildren的属性(根据新增时填写的form表单获取)
*/
const add = (tree = [], id = '', addData = {}) => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          const children = tree[index].children || []
          children.push(addData)
        } else {
          add(item.children, id, addData)
        }
      })
    }
// 封装函数:修改下级结构
/*
tree为当前已经被渲染出来的所有tree结构(根据ant框架自带的onLoadData方法实时获取)
id为修改的treeChildren的id属性(根据ant框架自带的onSelect方法的参数info获取)
editData为修改的treeChildren的属性(根据修改时填写的form表单获取)
*/
const edit = (tree = [], id = '', editData = {}) => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          tree[index] = {...item, ...editData}
        } else {
          edit(item.children, id, editData)
        }
      })
    }
// 封装函数:删除下级结构
/*
tree为当前已经被渲染出来的所有tree结构(根据ant框架自带的onLoadData方法实时获取)
id为新增的treeChildren的id属性(根据ant框架自带的onSelect方法的参数info获取)
*/
const del = (tree = [], id = '') => {
      tree.forEach((item, index) => {
        if (item.id === id) {
          tree.splice(index, 1);
        } else {
          del(item.children, id);
        }
      })
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-开发经验分享-Steps横竖业务进度条的具体使用方法

    Mr. 柳上原
  • react-开发经验分享-树形结构的解析与运用(一)

    Mr. 柳上原
  • html+css学习笔记020-结业(静态网站布局-京东)

    Mr. 柳上原
  • 使用Oracle with内嵌视图优化一例

    用户1148526
  • 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    发布的信息还要携带上发布者的身份识别码、昵称 和 头像 , 可以选择性的带上位置信息(不需要要进行功能拓展的话就不用加上该字段)。

    Kindear
  • Django model 自定义指定主键

    我最近在做一个新项目,数据工程师在数据库中已经新建了一些表,并且数据表中已经填充了数据,但是我用 django 写的项目中需要用到这些数据表,开发中我使用了 d...

    用户4945346
  • 为什么纽约的创业企业正在超越硅谷?

    上周,我坐在硅谷的一家咖啡馆里和一家早期企业软件公司创始人聊天,讨论该公司的融资计划。问题是:他募集了400万美元,投前估值1000万美元,投后估值为1400...

    点滴科技资讯
  • mac搭建简单的hls推流服务器遇到的问题(待更新)

    mcq
  • mac搭建简单的hls推流服务器遇到的问题(待更新)

    mcq
  • 远程RPC溢出EXP编写实战之MS06-040

    0x01 前言 MS06-040算是个比较老的洞了,在当年影响十分之广,基本上Microsoft大部分操作系统都受到了影响,威力不亚于17年爆出的”永恒之蓝”漏...

    FB客服

扫码关注云+社区

领取腾讯云代金券