react+antd实现动态编辑表格数据

本文实例为大家分享了react+antd动态编辑表格数据的具体代码，供大家参考，具体内容如下

在项目中，我们会遇到一种需求，为用户提供一份表格去编辑，而且表格中各个单元格是相关影响的，因此在一个单元格中编辑过会影响另外一个单元格。

小需求

在一个表格中：

1.有两行数据，一行是数据1，一行是数据2；
2.而且只能数据1的单元格可以进行编辑;
3.只能输入数字，要是输入其他的，则显示编辑之前的数值
4. 当数据1的那行数据发生改变的时候，数据2对应的单元格的数据也会自动加1

例子图片

示例代码

import React, { useState } from 'react';
import {Table, Typography, message} from 'antd'
const { Paragraph } = Typography;
function Index(props){

  // 判断是否时数字
  function isNumber(val){
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if(regPos.test(val) || regNeg.test(val)){
          return true;
      }else{
          return false;
      }
  }
  // 表格数据源
  const [ data , setData ] = useState([
    {
      'num1':1
    },
    {
      'num1':2
    },
    {
      'num1':3
    },
    {
      'num1':4
    },
    {
      'num1':5
    }
  ])
  // 定义表头
  const columns = [
    {
      title: '数据1',
      dataIndex: 'num1',
      key: 'num1',
      render: (text, record, index) => (
          <Paragraph editable={{onChange:(value)=>{
            let date = 0
            // 这里是:只能输入数字，要是输入其他的值，则提示并且显示编辑之前的值
            if(isNumber(value)){
                date = value
            }else{
                if(value != ''){
                    message.warn('只能输入数字')
                }
                date = data[index]['num1']
            }
            // 处理表格中的值，使得动态更新表格中的值
            let obj = [...data]
            setData([])
            obj[index]['num1'] = parseInt(date)
            setData(obj)
          }}} value={text}>{text}</Paragraph>
      ),
    },
    {
      title: '数据2',
      dataIndex: 'num2',
      key: 'num2',
      render: (text, record, index) => (
          <span>{record['num1'] + 1}</span>
      ),
    },
  ]

  return (
    <div>
        <Table dataSource={data} columns={columns} />
    </div>
  )

}

export default Index

总结

这篇博文就简单的分享到这里，这里只是一个基础。学会了这个还可以根据这个属性造很多自己的轮子。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React+Antd 实现可增删改表格的示例

    React+Antd 实现可增删改表格的示例

    最近写了一个小东西,模仿自己原先用vue写的项目改成react语法.写了一个可编辑的表格,期间磕磕碰碰的,打算把bug记录下.先把效果图和代码贴上去,主要用的是react+antd table表格,点击编辑,打开弹窗,弹窗内是tab切换显示不同的form表单+可编辑表格,表格内操作栏"+",表格内新增一行可编辑的数据,编辑,保存,删除这些操作就不细说也不贴效果图了 Table/index.js import React, { useState }from 'react' import

  • React Ant Design树形表格的复杂增删改操作

    最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.

  • React 全自动数据表格组件——BodeGrid的实现思路

    React 全自动数据表格组件——BodeGrid的实现思路

    表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑 想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么Ajax提交.后台有无数个新增和编辑的视图页,现在想想真是恐怖啊,看着都

  • react中useState使用:如何实现在当前表格直接更改数据

    react中useState使用:如何实现在当前表格直接更改数据

    目录 如何实现在当前表格直接更改数据 需求 效果如下 具体做法 useState修改对象的字段 如何实现在当前表格直接更改数据 需求 用户点击修改按钮时直接在弹出框的当前页面内直接再次修改点击行相关信息: 效果如下 点击修改当事人信息时,直接将当前改为输入框,并将信息展示,同时操作栏内的内容变为保存和取消; 具体做法 我这里是使用的antd组件内的可编辑表格;当然原生的也可以做,以前也做过; 这里的关键是点击修改按钮时,令当前行的表格变为输入框,并展示数据; 给数据每一项加上 editable:

  • react antd表格中渲染一张或多张图片的实例

    使用antd table中显示一张图片,代码如下: const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽 可不设 fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片

  • react+antd实现动态编辑表格数据

    react+antd实现动态编辑表格数据

    本文实例为大家分享了react+antd动态编辑表格数据的具体代码,供大家参考,具体内容如下 在项目中,我们会遇到一种需求,为用户提供一份表格去编辑,而且表格中各个单元格是相关影响的,因此在一个单元格中编辑过会影响另外一个单元格. 小需求 在一个表格中: 1.有两行数据,一行是数据1,一行是数据2:2.而且只能数据1的单元格可以进行编辑;3.只能输入数字,要是输入其他的,则显示编辑之前的数值4. 当数据1的那行数据发生改变的时候,数据2对应的单元格的数据也会自动加1 例子图片 示例代码 impo

  • react antd实现动态增减表单

    react antd实现动态增减表单

    之前写动态表单遇到过坑,就是用index下标做key会导致bug,而且很严重! 今天有空写下文章记录下:怎么处理和逻辑 我用的是antd3的版本,3和4的表单有点不一样,不过差别应该不大. 需求: 1.选择类型切换展示固定的模板 2.通过新增字段可以动态增减表单里面的每一行 3.控制每一行的字段是否需要必填 4.编辑时候回填参数 效果图: 部分关键代码: import React, { Component } from 'react'; import styles from './index.l

  • js动态添加表格数据使用insertRow和insertCell实现

    js动态添加表格数据使用insertRow和insertCell实现

    效果图: 代码: js动态添加表格数据_2.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2

  • javascript动态添加表格数据行(ASP后台数据库保存例子)

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

  • Layui表格行内动态编辑数据

    Layui表格行内动态编辑数据

    目录 前言 样式功能说明 初始化代码 添加监听事件 监听头工具栏 监听表格行工具栏 监听单元格 结尾 前言 今天向大家分享一些关于经典前端框架 layui 中的动态表格数据操作,结合 JQuery 动态编辑单元格中的数据,希望能帮助到有需要的人,加油,共勉! 样式功能说明 初始化代码 根据 Layui 开发文档,我们能很容易写出如下代码,加载内置组件,动态表格数据填充: layui.use(function () { let layer = layui.layer, element = layu

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • 基于jQuery实现表格数据的动态添加与统计的代码

    基于jQuery实现表格数据的动态添加与统计的代码

                                                              图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

  • javascript动态创建表格及添加数据实例详解

    本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

随机推荐