Skip to content

guozhaolong/antd-etable

Repository files navigation

Ant Design Editable Table

NPM Version NPM Downloads

image

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