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编写统计玩家总数的程序_JAVA程序:输出一组数后如何统计特定数的总数

题目:定义一个int型的一维数组,包含40个元素,用来存储每个学员的成绩,循环产生40个0~100之间的随机整数,将它们存储到一维数组中,然后统计成绩低于平均分的学员的人数,并输出出...题目&#xff…

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 系统框架图-------------------------------------…

java字节流转字符流的步骤_字节流-java入门基础笔记-51CTO博客

[14]字节流一.字节流1.什么是字节流是IO流中的一种, 可以用来读写字节数据.2.字节流和字符流的区别计算机中存储任何数据都是以字节的形式, 所以字节流可以读写任意类型的数据.在读写的数据是字符的时候, 用字符流更方便.3.什么时候用字节流, 什么时候用字符流当从一个文本文件…

java c s是什么_Java在C/S

随着Java语言的日益流行,特别是Java与InternetWeb的密切结合,使它在全球取得了巨大的成功。Java语言以其独立于平台、面向对象、分布式、多线索及完善的安全机制等特色,成为现代信息系统建设中的良好的开发平台和运行环境。一、Java网络应用模…

java质数判断程序_java判断一个数是否为素数/质数

质数(prime number)又称素数,定义为一个大于1的自然数,除了1和它本身外,不能被其他自然数整除,换句话说就是该数除了1和它本身以外不再有其他的因数。第一个思路假如我们需要判断数字是33,因为所有的数都可以被1整除&a…

selenium java po模式_selenium + java po模式

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

条件队列java_Java并发系列(4)AbstractQueuedSynchronizer源码分析之条件队列

AbstractQueuedSynchronizer内部维护了一个同步状态和两个排队区,这两个排队区分别是同步队列和条件队列。我们还是拿公共厕所做比喻,同步队列是主要的排队区,如果公共厕所没开放,所有想要进入厕所的人都得在这里排队。而条件队列…

java调用打印机打印需要进行什么操作_Java调用打印机程序有什么特点?

import java。awt。*;import java。awt。event。*;import java。awt。font。*;import java。awt。geom。*;import java。awt。print。*;import java。util。*;import javax。print。*;import javax。print。attribute。*;import javax。swing。*;/**This program demonstrates …

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

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

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

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

svn php改客户端密码_记录VisualSVNServer配置在线密码修改功能

VisualSVN Server使用的是64位版查看对应的apache版本号是 2.2.32.这个版本需要使用php5.5以下的,且需要使用64位的php。下载php 5.4 的64位版本。配置Visual SVN Server支持php1. 将下载的php解压缩到VisualSVNServer的目录中C:Program FilesVisualSVN Serverphp2.…

java大量浮点数如何作比较,Java如何正确比较浮点数

看下面这段代码,将 d1 和 d2 两个浮点数进行比较,输出的结果会是什么?double d1 .1 * 3;double d2 .3;System.out.println(d1 d2);按照正常逻辑来看,d1经过计算之后的结果应该是0.3,最后打印的结果应该是 true&…

文本留言 php,一个php作的文本留言本的例子(一)

一个php作的文本留言本的例子(一)更新时间:2006年10月09日 00:00:00 作者:大家知道,数据库对于网络来说的重要性.由于cgi的复杂,现在asp和phpmysql已经成为主流.几乎所有的个人网页都要用到留言本,可是申请的留言本很不稳定.这为网上的交流带来了诸多不…

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

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

php cookie 二级域名,php如何设置cookie对整个域名有效及二级域名

昨天获取cookie老是失败,各种查原因,然后测试只能在生成的目录下共享cookie,然后后面想起了这个原因。默认情况下的cookie仅对该域名(例如www.example.com)本身有效,出了该域名(例如test.example.com),cookie便会失效&…

ubuntu安装python_Linux下的Python开发配置鸭

linxu下python环境的开发配置前言linux是目前为止最好上手的系统也是最适合新手学习的系统而python是可以最快让大家知道怎么写出东西的语言,简单的几十个小时的学习之后就只需要看懂库的文档就可以很快地写出很好用的东西,于是很多人自然很喜欢这个组合…

java 里面write,java 中 System.out.println()和System.out.write()的区别

java 中 System.out.println()和System.out.write()的区别.这两个函数一个是System.out.write()输出字符流,System.out.println()是输出字节流,很简单。看下面这个程序就明白了。//import java.util.*;public class Test {public static void main(Strin…

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

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

java编程规范每行代码窄字符,wiki/0xFE_编程规范.md at master · islibra/wiki · GitHub

0xFE_编程规范使用UTF-8编码使用空格缩进命名清晰表达意图, 少用缩写(行业通用除外, 如: requestreq, responseresp, messagemsg), 不应使用特殊前缀或后缀用复数形式代表集合\w{2,64}, 除循环变量i, j, k, 异常e外类型命名风格包全小写, 点号分割, 允许数字, 无下划线类, 接口…