Editable table

demo链接：http://git.lianjia.com/react/Table

概览

• data [Object<Object>] 表格的数据结构，作为表格的渲染依据，主要逻辑
• onChange [Function](event, map, 'head'/'body',x, y)表格在编辑状态发生改变时触发的函数（表头没有x，head和body的坐标是独立的）
• onClick [Function](event, map, 'head'/'body',x, y)|表格在被点击时触发的函数
• map [String] 作为onChange/onClick的参数，可不设置，通过bind传

data

• editing [Bool] |false| 表格是否处于编辑状态
• loading [Bool] |false|表格是否处于加载中状态（可作为浮层显示在已有数据上）
• error [Bool]false|表格是否显示错误信息
• errorMsg[String]|undefined|错误信息，可用于动态请求数据后error处理
• title [String]|undefined|表格标题
• head [Array<Object>] |[]| 表头，一维数组，是一组对象的集合，每个对象作为表头的一个cell（具体对象格式在cell中给出）
• body [Array<Obejct>]|[]|表格主体，一维数组，父数组决定表格有几行，每个对象的data为子数组，决定每个cell的具体内容(具体对象格式在cell中给出)，对象的isShow决定子数组是否显示

cell

object

表格每个单元的数据结构

• editable [Bool]|false|此单元是否是可编辑的，若为可编辑的，将在表格处于编辑状态时渲染为可编辑组件
• fastEdit [Bool]|false|当为true，无论表格处于什么状态，此单元格将被置为可编辑状态|
• value/text [String/Array/Object] |''|表格单元显示的内容，优先取value，同时若是在editable为true时，value作为值传给input或select
• key [String]|''|可以作为单元的标识
• props [Object]|undefined|传给editable为true的cell的props，可以灵活运用，可以传任何属性给可editable为true的组件，样式等，甚至是onClick，onChange，onBlur这类的函数
• renderCell [Function]|undefined|返回值必须是组件，可替代原有的渲染方式，有两个默认的参数，arg1为此cell，arg2(bool)为表格是否处于编辑状态，可用此方法灵活更改单元格的渲染方式

注：cell中可以自定义key用来保存后端数据，此对象将作为data传给底层的单元

event

表格暴露给外部两个事件：onClick 和onChange 两个事件的参数一样onChange函数主要可以用于表格处于可编辑状态时，进行状态更新（使用renderCell渲染的组件没有这两个事件）。 参数如下：

1.event：默认的event事件，可以从event.target中取得input和select改变的值；

2.map： 传给组件的map属性的值，可用来标识表格；

3.type：'caption'或'head'或'body'区分事件源为标题或表头和表格主体；

4.arg4：若type为表头，表示点击的是第几列，若type为表格body，表示事件源处于是第几行（0表示head中的第一列或body中的第一行）

5.arg5：只有当type是'body'时，才有值，为事件源处于第几列

注：click事件是在整个table上捕获的，change事件是在具体单元上捕获的

附1

数据结构实例：

let data = {
  editing: false,
loading: false,
error: false,
errorMsg: '异常',
title: '表格1',
head: [
  {
    value: '头1',
    key: 'head1',
    props: {
      style: {
        color: 'lightblue'
      }
    }
  },{
    value: 'tou2',
    key: 'head2',
    renderCell: (data, editing) => <span>{data.value}</span>
  }
],
body: [
  {
    isShow: true,
    data: [
      {value: '0行0列', key: 'head1'},
      {value: '0行1列', key: 'head2'}
    ]
  },
  {
    isShow: false,
    data: [
      {value: '1行0列', key: 'head1'},
      {value: '1行1列', key: 'head2'}
    ]
  },
]

}