基于AntDesign实现的React.js自定义可编辑表格，带翻译功能

最新推荐文章于 2024-08-06 10:11:55 发布
最新推荐文章于 2024-08-06 10:11:55 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： React 实用代码片段
本文为博主原创文章，转载无需注明出处。水平有限，错误百出，望谨慎转载
本文链接：https://blog.csdn.net/qq_27574367/article/details/106421996
版权

基于React+AntDesign实现的一个自定义的可编辑表格，主要用于数据库表字段的编辑、带翻译功能，稍作修改后也可复用到其他地方。
主要包括三个文件：index.js,EditableTable.js,EditableTable.less，其中图标是使用的阿里巴巴矢量图标库上面的，接入了百度翻译的API.

效果图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

具体代码如下
index.js:

import React, { Component } from "react";
import EditableTable from "./EditableTable";

class EditTable extends Component {

  onDataSourceChanged = data => {

  };

  render() {
    const selectData = [
      { label: '常用', options: ['VARCHAR', 'CHAR', 'INT', 'DATE'] },
      { label: '整数', options: ['INT', 'BIGINT', 'BIT', 'TINYINT'] },
      { label: '实数', options: ['DECIMAL', 'DOUBLE', 'FLOAT'] },
      { label: '字符串', options: ['VARCHAR', 'CHAR'] },
      { label: '二进制', options: ['BLOB', 'BINARY'] },
      { label: '日期时间', options: ['DATE', 'TIMESTAMP', 'DATETIME'] },
      { label: '空间几何', options: ['POINT', 'LINESTRING'] },
      { label: '其他', options: ['ENUM', 'SET'] },
    ];

    const columns = [
      {
        editable: '1',
        dataIndex: 'chName',
        title: '中文名',
        type: 'input',
        width: 150,
        required: true
      }, {
        editable: '2',
        dataIndex: 'name',
        title: '字段名',
        type: 'input',
        width: 150,
        required: true
      },
      {
        editable: '3',
        dataIndex: 'type',
        title: '字段类型',
        type: 'select',
        data: selectData,
        width: 200,
        required: true
      },
      {
        editable: '4',
        dataIndex: 'primaryKey',
        title: '主键',
        type: 'checkbox',
        width: 50,
      }, {
        editable: '5',
        dataIndex: 'foreignKey',
        title: '外键',
        type: 'checkbox',
        width: 50
      }, {
        editable: '6',
        dataIndex: 'notNull',
        title: '非空',
        type: 'checkbox',
        width: 50
      }
    ];

    return <div style={{ display: 'flex', margin: '100px 200px' }}>
      <EditableTable columns={columns} rowKey={'name'} onDataSourceChanged={this.onDataSourceChanged}/>
    </div>;
  }

}

export default EditTable;

EditableTable.js：

import React from 'react';
import { Checkbox, Form, Input, message, Select, Table, Tooltip } from 'antd';
import styles from './EditableTable.less';
import md5 from "md5";
import fetchJsonp from "fetch-jsonp";


const EditableContext = React.createContext();
const { Option, OptGroup } = Select;

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  state = {
    editing: false,
    checkboxes: {}
  };

  toggleEdit = () => {
    const editing = !this.state.editing;
    this.setState({ editing }, () => {
      if (editing) {
        this.input.focus();
      }
    });
  };

  save = (e, dataIndex) => {
    const { record, handleSave } = this.props;
    this.form.validateFields((error, values) => {
      if (error && error[e.currentTarget.id]) {
        return;
      }
      this.toggleEdit();
      const value = values;
      //中英互译，如不需要翻译，可移除此if分支
      if (dataIndex === 'chName') {
        const q = value.chName;
        if (q.trim().length === 0) {
          return;
        }
        const appid = '12345678';
        const salt = '1435660288';
        const sign = md5(appid + q + salt + '12345678');
        const url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${q}&from=zh&to=en&appid=${appid}&salt=1435660288&sign=${sign}`;
        fetchJsonp(url)
          .then(response => response.json())
          .then(data => {
              if (data && data.trans_result) {
                const result = data.trans_result[0].dst;
                if (result) {
                  value.name = result.split(' ').join('_');
                }
                handleSave({ ...record, ...value });
              }
            }
          );
      } else {
        handleSave({ ...record, ...value });
      }
    });
  };

  onCheckboxChange = (e, record) => {
    const { checkboxes } = this.state;
    checkboxes[record.editable_row_key] = e.target.checked;
    this.setState({
      checkboxes
    });
  };

  renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title, type, data = [], required } = this.props;

    const optGroups = [];
    if (type === 'select' && data.length > 0) {
      data.map((item, index) => {
        const optGroup = <OptGroup label={item.label} key={index}>
          {item.options.map((option, index2) => {
            return <Option value={option} key={index2}>{option}</Option>;
          })}
        </OptGroup>;
        optGroups.push(optGroup);
      });
    }

    const { editing } = this.state;
    return !editing && type === 'input' ?
      (<div
        className={styles['editable-cell-value-wrap']}
        style={{ paddingRight: 24, minHeight: '30px' }}
        onClick={this.toggleEdit}
      >
        {children}
      </div>)
      : (
        <Form.Item style={{ margin: 0 }}>
          {form.getFieldDecorator(dataIndex, {
            rules: [
              {
                required: required !== undefined && required === true,
                message: `${title} 必填`,
              },
            ],
            //默认值，如果是下拉框则设置默认值为下拉项第一项
            initialValue: type === 'select' ? data[0].options[0] : record[dataIndex],
          })(
            type === 'select' ?
              <Select
                style={{ width: '200px' }}
                ref={node => (this.input = node)}
                onPressEnter={this.save}
                onBlur={this.save}
              >
                {optGroups}
              </Select>
              : type === 'checkbox' ?
              <Checkbox
                ref={node => (this.input = node)}
                onChange={(e) => this.onCheckboxChange(e, record)}
                checked={this.state.checkboxes[record.editable_row_key]}
              />
              : <Input
                maxLength={dataIndex === 'describe' ? 100 : 40}
                ref={node => (this.input = node)}
                onPressEnter={this.save}
                onBlur={e => this.save(e, dataIndex)}
              />
          )}
        </Form.Item>
      );
  };

  render() {
    const {
      editable,
      dataIndex,
      title,
      type,
      data,
      width,
      required,
      record,
      index,
      handleSave,
      children,
      ...restProps
    } = this.props;
    return (
      <td {...restProps}>
        {editable ? (
          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
        ) : (
          children
        )}
      </td>
    );
  }
}

class EditableTable extends React.Component {
  constructor(props) {
    super(props);

    const dataSource = (props.dataSource || []).map((data, idx) => {
      return {
        ...data,
        editable_row_key: idx + '_' + props.rowKey,
      };
    });

    this.state = {
      dataSource,
      count: dataSource.length,
    };
  }

  handleDelete = key => {
    const dataSource = [...this.state.dataSource];
    let newData = dataSource.filter(item => item.editable_row_key !== key);
    this.setState({ dataSource: newData });
  };

  handleAdd = () => {
    const { dataSource, count } = this.state;
    const newData = {
      'editable_row_key': count + '_' + this.props.rowKey,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });

  };

  handleSave = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.editable_row_key === item.editable_row_key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });

    if (this.props.onDataSourceChanged) {
      this.props.onDataSourceChanged(newData);
    }
  };

  delete = () => {
    const { selectRows = [] } = this.state;
    const dataSource = [...this.state.dataSource];

    selectRows.forEach((selectRow) => {
      dataSource.forEach((item, index) => {
        if (selectRow === item.editable_row_key) {
          dataSource.splice(index, 1);
        }
      });
    });

    this.setState({
      dataSource,
      selectRows: []
    });
  };

  /**
   * 百度在线翻译
   */
  translate = () => {
    const { selectRows = [], dataSource = [] } = this.state;
    if (selectRows.length === 0) {
      message.error('请先选中需要翻译的行！');
      return;
    }
    const q = [];
    selectRows.forEach((selectRow) => {
      dataSource.forEach((item) => {
        if (item.editable_row_key === selectRow && item.chName !== undefined && item.chName.trim() !== '') {
          q.push(item.chName);
        }
      });
    });
    if (q.length === 0) {
      return;
    }
    const appid = '12345678';
    const salt = '1435660288';
    const sign = md5(appid + q + salt + '12345678');


    const url = `http://api.fanyi.baidu.com/api/trans/vip/translate?q=${q}&from=zh&to=en&appid=${appid}&salt=1435660288&sign=${sign}`;

    let result;
    fetchJsonp(url)
      .then(response => response.json())
      .then(data => {
          if (data && data.trans_result) {
            result = data.trans_result[0];
            if (result) {
              const src = result.src.split(',');
              const dst = result.dst.split(',');
              dataSource.forEach((item) => {
                const index = src.findIndex(item2 => {
                  return item.chName === item2;
                });
                if (dst[index]) {
                  item.name = dst[index].split(' ').join('_');
                }
              });
              this.setState(dataSource);
            }
          }
        }
      );
  };

  render() {
    const { dataSource } = this.state;

    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

    const columns = this.props.columns.map((col) => {

      if (!col.editable) {
        return col;
      }

      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          type: col.type,
          data: col.data,
          required: col.required,
          ellipsis: true,
          width: col.width,
          handleSave: this.handleSave,
        }),
      };
    });

    columns.push(
      {
        title: '操作',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <a onClick={() => {
              this.handleDelete(record['editable_row_key']);
            }}>
              删除
            </a>
          ) : null,
      },
    );

    const title = (
      <div>
        <a onClick={this.handleAdd}>
          <Tooltip title={'添加字段'}>
            <img src={'/img/add.png'} width={30}/>
          </Tooltip>
        </a>
        <a onClick={this.delete} style={{ marginLeft: '10px' }}>
          <Tooltip title={'删除字段'}>
            <img src={'/img/delete.png'} width={25}/>
          </Tooltip>
        </a>
        <a onClick={this.translate} style={{ marginLeft: '10px' }}>
          <Tooltip title={'翻译'}>
            <img src={'/img/translate.png'} width={23}/>
          </Tooltip>
        </a>
        <a onClick={this.handleAdd} style={{ marginLeft: '10px' }}>
          <Tooltip title={'添加新单词'}>
            <img src={'/img/word.png'} width={30}/>
          </Tooltip>
        </a>
      </div>
    );

    const rowSelection = {
      onChange: record => {
        this.setState({
          selectRows: record
        });
      }
    };

    return (
      <Table
        rowSelection={rowSelection}
        rowKey="editable_row_key"
        title={() => title}
        components={components}
        rowClassName={() => styles['editable-row']}
        size="middle"
        pagination={false}
        dataSource={dataSource}
        columns={columns}
      />
    );
  }
}

export default EditableTable;

EditableTable.less:

.editable-cell {
  position: relative;
}

.editable-cell-value-wrap {
  padding: 5px 12px;
  cursor: pointer;
}

.editable-row:hover .editable-cell-value-wrap {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 11px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

用到了百度翻译API，如果不用可以直接移除相关代码，需要使用的话去百度翻译开放平台申请，拿到appid和密钥，安装antd，md5等所需依赖，就可以直接使用了

初学者↑
关注
专栏目录
react+AntDesign 之 pc端零到一
Jasmin博客
01-04 1581
react pc端项目案例
React Admin 前端脚手架之ant-design-pro
西京刀客
01-04 2635
Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
react-translate:无需任何麻烦，也无需任何设置即可翻译您的React应用！
03-18
React翻译 无需任何麻烦，也无需任何设置即可翻译您的React应用！ 特征 翻译功能 翻译组件 允许嵌套翻译 基于计数的单数，复数和零 轻量级（〜3KB） 使用TypeScript构建 约99％的代码覆盖率 正在安装 npm install @federico.moretti/react-translate # or yarn add @federico.moretti/react-translate 例子 基本用法： import React from 'react' ; import ReactDOM from 'react-dom' ; import { TranslateProvider , useTranslate , } from '@federico.moretti/react-translate' ; const translations = { pear
React.js项目中配合Ant Design实现动态面包屑导航
m0_57523336的博客
10-05 4304
1.获取后台返回的路由和匹配文字的映射关系，如： // 将路由和匹配文字映射在一起 const breadcrumbNameMap = { '/home': '首页', '/user': '用户管理', '/role': '角色管理', '/product': '商品管理', '/product/category': '品种管理', '/product/list': '商品列表', '/chart': '信息统计', '/chart/bar
探索高性能的可编辑表格：antd-editabletable
最新发布
gitblog_00420的博客
08-06 566
探索高性能的可编辑表格：antd-editabletable editable-table项目地址:https://gitcode.com/gh_mirrors/ed/editable-table 在现代Web开发中，表格组件是数据展示和交互的核心。antd-editabletable 是一个基于 antd 4.x 的高性能可编辑表格组件，它提供了丰富的功能和灵活的配置选项，使得开发者能够轻松地...
ant-design-vue 可编辑表格的应用
cdd140477的博客
03-29 3342
ant-design-vue 可编辑表格的应用可编辑表格 可编辑表格 <a-table ref="table" size="default" :pagination="false" :columns="inspectionColumns" :dataSource="inspectionData" > <template slot="tourSection" slot-scope="t
reactjs antd（ant-design）安装、基本使用及css样式的按需引入
学亮编程手记
02-04 580
reactjs antd（ant-design）安装、基本使用及css样式的按需引入
vue ant-design table转译数据
stone10086的博客
04-18 3773
利用 customRender这个数据来处理 <template> <a-table :columns="columns" :dataSource="list" > </a-table> </template> <script> export default { name: "Financi...
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
05-31
然而，这个项目中并没有直接使用React，而是选择了与Vue2.x兼容的Ant Design Vue，它是Ant Design的一个Vue版本，同样提供了丰富的UI组件，如按钮、表格、表单等，用于构建前端应用的界面。 AntV X6 是阿里云AntV...
Ant Design 5.0.0 Beta.1版本发布：企业级UI与React组件库新体验
资源摘要信息:"ant-design-5.0.0-beta.1.zip是一个包含了Ant Design最新版本的压缩包文件，Ant Design是由阿里巴巴前端团队开发和维护的一套企业级UI设计语言和React组件库。它旨在提炼和封装企业级中后台产品的交互...
React 自定义表单实现
sinat_40628756的博客
04-05 1256
引言 我在使用react写web前端，React UI组件库是使用Ant Design。我的项目有一个功能要求是：可以自定义表单的item(选择自己需要的数据进行录入，并且可以删除不想要的item)并提交。 效果 自定义表单： 如图的Custom Config表单，鼠标点击空白选择框，会自动弹出来所有的item选项，点击对应的item选项，可以添加到Custom Config中： 每个item旁边的有Θ选项，点击Θ，Custom Config会删除此item。完成自定义。 实现 导入需要的组件与包
react-在React项目中添加复杂翻译i18n的简单方法
08-14
在React项目中添加复杂翻译(i18n)的简单方法
探索强大的翻译工具：react-translated
gitblog_00053的博客
06-02 437
探索强大的翻译工具：react-translated react-translatedA dead simple way to add complex translations (i18n) in a React (DOM/Native) project ????????????项目地址:https://gitcode.com/gh_mirrors/re/react-translated 项目简介 在React应...
antd 设置表头属性,使用表数据自定义React Antd表头
weixin_32340083的博客
12-21 1211
In my React project, I need to customize antd table header as followsI have added sample code bellow.I need to have Sum of the amount in the header of the Amount columnSample Code:解决方案You can use titl...
React + TSX + Ant Design 实现表格内嵌搜索框
weixin_58346650的博客
07-22 879
React + TSX + Ant Design 实现表格内嵌搜索框
react ant可编辑表格实现拖拽排序EditableProTable实现拖拽排序
dawnStart的博客
06-19 380
【代码】react ant可编辑表格实现拖拽排序EditableProTable实现拖拽排序。
wumu-edit-table：一个轻量的无依赖的react可编辑表格（react edit-table）
weixin_44197210的博客
05-24 171
a simple react edit table
react EditableProTable 表格内联动
datouniao1的博客
03-11 2037
想实现一个可以编，因为对EditableProTable比较初次使用，所以在编写的时候也遇到的很多的问题，中途也跑了弯路，但是功夫不负有心人，最终问题得到解决辑的表格，并且表格内的数据可以实现联动，自动的计算
React 实现table内单元格可编辑 （hooks）
HHaox_x的博客
10-27 5204
双击可编辑 失去焦点或者键盘回车事件保存，自己封装组件 并调用 拿走即用 自己封装的组件： import React, { useContext, useState, useEffect, useRef } from "react"; import { Table, Input, Form } from "antd"; import { FormInstance } from "antd/lib/form"; import styled from "@emotion/styled"; import C
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值