java实现table可编辑_动态渲染可编辑单元格的Table

一、问题描述

问题是这样的,后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组,前端要渲染出表格并且可以填写每个单元格的值,然后按照一定数据结构保存并传给后台,并且再次获取这个数据结构和数组xArr、yArr可以自己渲染出这个表?实现新增和修改的功能。大致界面效果如下图所示:

649bc07d43e4fa852170e11dcc7b67d7.png

y1, y2,...,yn作为列名,x1,x2, ..., xn作为第一列数据,此业务模型是一种常见的表格,只不过要求行列都不固定,由后台数据提供并且动态生成。还要能够实现修改功能。本质上是一个动态渲染可编辑Table的问题。难点在于动态构建表格并且实现数据展示和保存。

二、解决思路

(1)数据转换成表格后,处理起来就简单了,如果以常见的Table组件为例,只需要构建columns和dataSource两个数组数据即可渲染出表格;

(2)渲染出表格后,表格每一个余下的单元格都要可输入,可以考虑单元格利用render渲染出Input组件,通过Input的操作onChange或onBlur去改变数据并存储。

(3)数组是引用类型,可以利用引用类型只要没有深拷贝或改变指针指向内存地址就不变的原理,方便记录操作后的数据。

三、解决方法(以React结合ant design UI的Table组件为例):

(1)动态构建columns(表格列数据)和dataSource(表格数据源)渲染出表格。(Table可参考 https://ant.design/components/table-cn/#header)

1 const xArr = ['x1', 'x2', 'x3', 'x4'];2 const dataSource = xArr.map((v, i) =>({3 key: String(i),//此处自定义表格每一行的唯一key,如果没有设置唯一标志会报错4 y0: v,//第一列数据即显示X1-Xn的那一列5 }));6

7 const yArr = ['y1', 'y2', 'y3', 'y4', 'Y5'];8 const columns =[{9 title: ' ',10 dataIndex: 'y0',//第一列y0为列的dataIndex,用于显示x1-xn11 }, ...yArr.map(item =>({//其他列通过yArr循环得到,并用...解构直接合并为columns12 title: item,13 dataIndex: item,14 }))];

这样就得到形如dataSource = [{ key: '0', y0:'x1'}, { key: '0', y0:'x1'},...];  columns = [{ title: '', dataIndex: 'y0'},{ title: 'y1', dataIndex: 'y1'},...];的表格数据,将此数据源传入表格组件Table,即可渲染出表格如下:

48a95a61c6bd0717cbdffb3519c5519e.png

(2)表格添加Input并且根据onChange/onBlur事件动态记录dataSource的变化。

1 const columns =[{2 title: ' ',3 dataIndex: 'y0',4 }, ...yArr.map(item =>({5 title: item,6 dataIndex: item,7 render: (text, record) =>(8 { record[item] = e.target.value; }} />

9 ),10 }))];

渲染效果如下:

89aadd891b7f47616af7103b9d34119b.png

四、完整代码

/**

* @author xiao-pengyou

* @create date 2019-03-27

* @desc 动态可编辑表格

* */

import React, { PureComponent } from 'react';

import { Table, Input } from 'antd';

export default class Demo extends PureComponent {

state = { dataSource: [] };

componentDidMount() {

const xArr = ['x1', 'x2', 'x3', 'x4'];

const dataSource = xArr.map((v, i) => ({key: String(i),y0: v}));

this.setState({ dataSource });//dataSource不能在render里面构建,在render里面构建每次重新渲染的时候dataSource会被重新构建,指针指向变化导致先前的修改不能被跟踪

}

render() {

const yArr = ['y1', 'y2', 'y3', 'y4', 'y5'];

const that = this;//定义中间量that=this确保columns内部onChange事件作用域为当前组件,方便调用forceUpdate()强制渲染表格

const columns = [{

title: ' ',

dataIndex: 'y0',

}, ...yArr.map(item => ({

title: item,

dataIndex: item,

render: (text, record) => (

{ record[item] = e.target.value; that.forceUpdate(); }} />

),

}))];//最终的dataSource就是我们想要的数据结构,修改时直接把这个dataSource传给构建的表格就可以渲染

return

;//bordered设置边框,pagination=false取消分页功能,可以不用在意此参数

}

}

最终效果(控制台输出为提交给后台的dataSource数组):

dc9a87cd115f1bf8ed736637653c16b1.png

以上就是一个动态列的可编辑表格的React实现方式。如有问题欢迎留言批评指正,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java包裹邮费计算_GitHub - honghailiang/FreightSystem: 基于Java Swing编写的简易运费计算工具...

FreightSystem基于java Swing编写的运费计算系统初始化数据从excel中读取数据,转化为对象(只保存基础数据:序列号、始发站、目的站、省份、100kg以下(元/kg)、100kg以上(元/kg)、到货(元/kg)、自提(元/kg)、补贴里程、公路里程、单价(元/吨公里))并保存到…

java需求设计_JavaWeb期末设计---需求分析文档. stage1

影院活动管理系统—需求分析文档目录第2章 需求分析2.1 用户需求2.1.1 业务需求2.1.2 商业需求2.1.3 特殊需求2.2 可行性分析2.2.1 技术可行性2.2.2 经济可行性2.3 系统功能2.3.1 功能概述2.3.2 E-R图2.3.4 Domian logic2.3.5 系统框架图-------------------------------------…

selenium java po模式_selenium + java po模式

po模式大概介绍,大家也可以自己百度看看Page Object模式主要是将每个页面设计为一个类class,这个类包含页面中需要测试的元素(按钮、输入框、URL、标题等)和实际操作方法,这样在写测试用例时可以通过调用页面类的方法和属性来获取页面元素和操…

java基础语法实例教程_Java 基础语法

一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作面向对象中的一些概念下表列出了 面向对象 编程中的一些概念名词说明对象对象是类的一个实例,有状态和行为。例如,一条狗是一个对象,它的状态有…

python3软件怎么使用_python3怎么使用pip

pip 是 Python 包管理工具,该工具提供了对Python 包的查找、下载、安装、卸载的功能。目前如果你在 python.org 下载最新版本的安装包,则是已经自带了该工具。Python 2.7.9 或 Python 3.4 以上版本都自带 pip 工具。pip 官网:https://pypi.o…

深度学习图像融合_基于深度学习的图像超分辨率最新进展与趋势【附PDF】

因PDF资源在微信公众号关注公众号:人工智能前沿讲习回复“超分辨”获取文章PDF1、主题简介图像超分辨率是计算机视觉和图像处理领域一个非常重要的研究问题,在医疗图像分析、生物特征识别、视频监控与安全等实际场景中有着广泛的应用。随着深度学习技术的…

高通cpu排行_安卓手机芯片排行:麒麟990 5G仅排第三,980还输给了765G?

众所周知,在移动端芯片行业,高通多年来都保持着一种舍我其谁的劲头,但随着科技的不断发展,其他厂商也开辟了自己的新天地,截至目前,全球主流的智能手机搭载的处理器主要来自于华为海思、高通骁龙、三星、联…

keil4怎么移植其他人的程序_简单和你聊聊造血干细胞移植!

造血干细胞是个什么“鸟”?造血干细胞,人体血细胞的老祖宗。它的分裂方式也十分独特,由一个细胞分裂为两个细胞时,其中一个细胞会慢慢长大,增殖分化为红细胞、白细胞和血小板等等;另一个细胞仍然保持干细胞…

怎么在电脑上任意截屏_草地上打滚、墙上任意涂鸦,幼儿园让孩子“想怎么玩就怎么玩”...

(图为孩子们开心地在“山坡”上打滚。 学校供图)长江日报-长江网10月26日讯 10月26日,汉阳区玉龙幼儿园的孩子们冲上小山坡滑草,草地上打滚,滚筒里钻来钻去,墙上任意涂鸦,在梯子搭建的木桥上自由行走……孩子们自发地三…

pyaudio usb playback_苹果安卓手机充电器USB接口PSD源文件psd素材

分类:详情页类目:数码家电格式:psd体积:尺寸:790*12168编号:13182638软件: Photoshop CS6(.psd)颜色模式 : RGB图像类型:位图版权:独家版权LOGO/ 实景图/人物/字体/产品 …

horizon client 无法识别域_iText for Mac(OCR识别图中文字工具)

itext mac中文特别版是一款从图片中识别文字的OCR(光学字符识别)工具。通过截图、拖拽图片,即可以从扫描版的PDF等任意图片中识字,并且可以很好的解决摘抄和批注需求。而且itext mac版使用腾讯、Google 双引擎,识别效果惊人地准确。iText for…

mysql 操作表的例子,mysql中库和表的简单操作总结(附示例)

本篇文章给大家带来的内容是关于mysql中库和表的简单操作总结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一. 库的操作1.创建数据库创建数据库:create database 库名 charset utf8; charset uft8 可选项1.2 数据…

.net 5 正式版_iOS14.1正式版和14.2 Beta 4测试版一同发布 附16张内置新壁纸下载

今天凌晨,苹果同时推送了 iOS 14.1 正式版 和 iOS 14.2 Beta 4 测试版 系统更新,对于正式版和开发者用户来说,今天均可以将手中的 iPhone 升级到最新的系统版本。iOS 14.1 正式版更新了什么?先来看下 iOS 14.1 正式版,…

自适应均衡器 matlab程序,基于lms自适应均衡器matlab仿真

基于lms自适应均衡器matlab仿真 毕 业 设 计 (2014 届) 题 目 一种基于 OpenCV 的摄像机标定方 法学 院 物理电气信息学院 专 业 电子信息工程 年 级 2010 学生学号 12010245348 学生姓名 李 鑫 指导教师 车 进 2014 年 5 月 6 日摘要摄像机标定是在机器视觉和工业测量等领域中…

bloomberg用法 固定收益_干货 | 日语高考高频考点:助词を的用法

在日语高考题中,第二大题综合知识运用板块,16-20题固定考察日语的助词的使用。很多同学反映说:高考日语最难学的部分就是助词了。因为中文的结构中是没有助词成分,同时助词的用法也挺多,所以经常容易搞混。日语是黏着语…

php+new+mysqli+utf+8,MySQL和PHP:utf-8带有西里尔字符

HUH函数你在这里混合API,mysql_*和mysqli_*不会混在一起。你应该坚持mysqli_(看起来你无论如何都是),mysql_*函数被弃用,并在PHP 7中完全删除。你的实际问题是某个地方的字符集问题。这里有几个指针,可以帮助您为您的应用程序获得…

arduinojson 转 string_安德胜工作室发来本周五嗨唱转起来第二季首秀的嘉宾剧透...

湖南卫视全民音乐综艺互动秀《嗨唱转起来2》10月2日超燃回归,在金秋十月为观众带来新一季的惊喜。近日,官方微博官宣大玩家阵容:“太阳女神”谢娜、“节奏先生”潘玮柏、“行走的造梗机”大张伟。她是热情女神,点燃全场&#xff0…

二元置信椭圆r语言_r语言二元期权barrier option实现案例

原文链接:http://tecdat.cn/?p4051​tecdat.cnDouble-no-touch(DNT)选项是二元期权,在到期时支付固定金额的现金。我们将展示两种不同的方式来定价包含两种不同定价方法的DNT。​​​首先,我们将尝试使用正常参数&…

vscode emmet默认模板_从零开始配置 vscode

我们在进行开发工作时,选择一个顺手好用的编辑器是必不可免的, 其中 vscode 就是一个很好的选择。它能让你大部分的工作都在编辑器内完成, 大大的提高开发效率~概述vscode 内置了前端相关的基础环境,如emmet扩展。另外的环境则可以通过它自己的插件商城来…

djano 字段不重复_Java 14 发布了,不使用quot;classquot;也能定义类了?还顺手要干掉Lombok!...

2020年3月17日发布,Java正式发布了JDK 14 ,目前已经可以开放下载。在JDK 14中,共有16个新特性,本文主要来介绍其中的一个特性:JEP 359: Records官方吐槽最为致命早在2019年2月份,Java 语言架构师 Brian Goe…