Ant Design Editable Table

Online Demo

https://guozhaolong.github.io/antd-etable/

Usage

import React, {useContext, useState} from "react";
import EditableTable from 'antd-etable';
import {Button} from 'antd';
import styles from './index.css';

const data = [
  {id:1,name:'测试1',title:'哈哈',status:0,desc:'描述1描述1描述1描述1',type:0,created_time:'2019-5-2'},
  {id:2,name:'测试2',title:'呵呵',status:1,desc:'描述2描述2描述2描述2',type:1,created_time:'2019-5-3'},
  {id:3,name:'测试3',title:'嘻嘻',status:2,desc:'描述3描述3描述3描述3',type:0,created_time:'2019-5-4'}
];
const type = ['类型一','类型二'];
const status = ['正常','异常','停止'];
const cols = [
  {
    title: '名称',
    dataIndex: 'name',
    editable:true,
    editor: {
      required: true,
    },
  },
  {
    title: '类型',
    dataIndex: 'type',
    editable:true,
    editor: {
      type: 'select',
      options: [
        {key: 1, value: '类型一'},
        {key: 2, value: '类型二'},
      ]
    },
    render: (text, record) => (
      type[text]
    ),
  },
  {
    title: '日期',
    dataIndex: 'created_time',
    editable:true,
    editor: {
      type: 'datetime'
    }
  },
];
const allCols = [
  ...cols.slice(0,2),
  {
    title: '标题',
    dataIndex: 'title',
    editable:true,
    width: 120,
  },
  ...cols.slice(2),
  {
    title: '状态',
    dataIndex: 'status',
    editable:true,
    width: 120,
    editor: {
      type: 'select',
      options: status.map((value,key) => ({key,value}))
    },
    render: (text, record) => (
      status[text]
    ),
  }
];
export default function() {
  const [changedData,setChangedData] = useState([]);
  const fetch = (pager,filter,sorter) => {
    // Do Remote Fetch
  };
  return (
    <div className={styles.root}>
      <div style={{textAlign:'right',marginBottom:16}}><Button type="primary">保存</Button></div>
      <EditableTable
        title=""
        loading={false}
        data={data}
        changedData={changedData}
        pageSize={10}
        total={100}
        cols={cols}
        allCols={allCols}
        onFetch={()=>fetch()}
        onChangedDataUpdate={(d)=>{setChangedData(d)}}
      />
    </div>
  );
}

API

EditableTable

属性

| 名称 | 描述 | 类型 | 默认值 | |:---|:---|:---:|:---:| | data | 初始化数据 | Array | [ ] | | changedData | 用于保存增删改的更新数据 | Array | [ ] | | cols | 表格列 | Array | [ ] | | allCols | 可显示表格列（格式同cols属性） | Array | [ ] | | rowKey | 唯一标识 | String | 'id' | | newRowKeyPrefix | 新增数据唯一标识的前缀 | String | 'new_' | | title | 标题 | String或Component | '' | | loading | 读取状态 | Boolean | false | | pageSize | 每页记录数 | Number | 10 | | total | 记录总数 | Number | 0 | | multiSelect | 可多选 | Boolean | false | | showHeader | 是否显示顶栏 | Boolean | true | | showFooter | 是否显示底栏 | Boolean | true | | showToolbar | 是否显示顶部工具栏 | Boolean | true | | showSelector | 是否显示选择按钮 | Boolean | false | | showAddBtn | 是否显示添加按钮 | Boolean | true | | showOpBtn | 是否显示编辑和删除按钮 | Boolean | true | | showTopPager | 是否显示顶部分页器 | Boolean | true | | showBottomPager | 是否显示底部分页器 | Boolean | false | | buttons | 自定义操作按钮组 | Component | 无 | | style | 样式 | Object | null | | expandedRowRender | 展开行时的渲染内容 | ReactNode | null | | expandedFirstRow | 默认展开第一行 | Boolean | false | | editOnSelected | 点击一行时编辑 | Boolean | false | | parentForm | 传入form | FormInstance | null |

事件

| 名称 | 描述 | 参数 | 返回值 | |:---|:---|:---:|:---:| | canEdit | 每行是否可编辑 | record | Boolean | | canRemove | 每行是否可删除 | record | Boolean | | beforeEdit | 编辑数据前触发 | 无 | 无 | | afterEdit | 编辑数据后触发 | 无 | 无 | | onAdd | 新增数据的默认对象 | 无 | Object | | onFetch | 请求数据事件 | pager,filter,sorter | 无 | | onChangedDataUpdate | 更新数据变化时触发 | arr | 无 | | onSelectRow | 每页记录数 | rows | 无 | | onDownload | 每页记录数 | filter,sorter | 无 | | onExpandedRow | 展开一行时触发 | record | 无 |

方法

| 名称 | 描述 | 参数 | 返回值 | |:---|:---|:---:|:---:| | resetTable | 重置表格页码 | 无 | 无 |

Config

changedData

数组，用于保存变更后的数据，每条数据中会使用isNew、isUpdate、isDelete来标识该数据是新增、更新还是删除

cols

参数例子

[{
   title: 'ID',
   dataIndex: 'id',
   editable:false,
},{
   title: '名称',
   dataIndex: 'name',
   sorter: true,
   editable:true,
   editor: {
     required: true,
     type: 'select',
     options: [
       {key: 1, value: '类型一'},
       {key: 2, value: '类型二'},
     ],
     validator: (rule,value,callback) => {
       if(data.find(d => d.name === value))
         callback('名称已存在!');
       else
         callback();
     },
   },
}]

editable：设置可编辑状态

editor：对象默认类型为text，支持的类型包括select、number、datetime、checkbox，如果为select需传入options参数

rowKey

数据的唯一标识，必须唯一，用于判断编辑状态和匹配数据

onAdd

当点击新增时，可配置初始化数据的方法用于返回一个新数据对象，可用来设置一些默认值

onChangedDataUpdate

每次新增、更新、删除都会触发该方法，并传入更新后的数组

onSelectRow

该方法会传入一个已选对象的数组，如果为单选模式，该数组只包含当前点击行的对象

onDownload

点击工具栏下载时触发，如果配置了方法，则该方法会接到filter和sorter两个参数，如果没有配置方法则默认生成当页的excel下载