antd-etable

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下载