当前页面号

直接映射ReactBootstrap的属性 http://getbootstrap.com/css/#tables-bordered

表格模型，表头每一列的名称和类型，比如：

{
  id: 'code',
  type: 'string',
  label: '编码'
}

隐藏列

{
  hidden: true
}

自定义格式化

formatter: {
  type: 'custom',
  callback: value => `前缀_${value}_后缀`
}

直接映射ReactBootstrap的属性 http://getbootstrap.com/css/#tables-condensed

直接映射ReactBootstrap的属性 http://getbootstrap.com/css/#tables-hover-rows

是否显示搜索框

数据为空数组时 [] ，暂无数据

选择一个单元格

A callback fired when the table cell is clicked.

function (
  SyntheticEvent event,
  number colIdx,
  Object columnModel,
  number rowIdx,
  Object rowObj
)

(event: Object, colIdx: number, columnModel: Object, rowIdx: number, rowObj: Object) => any

单元格双击事件

function (
  SyntheticEvent event,
  number colIdx,
  Object columnModel,
  number rowIdx,
  Object rowObj
)

分页

行单击事件

行双击事件

当搜索框内容改变的时候

每一行是否显示操作按钮列 默认的操作按钮在最右侧的列中，如果需要指定在左侧，可以通过 align参数来设置

{
  align: 'left',
  className: 'operation',
  text: '操作'
}

注意：当操作列和选择列同时存在的时候，选择列会显示在操作列的左侧

自定义的操作列组件 除非指定了operationColumn参数，否则操作列不会显示出来

是否显示分页

行类名，比如

['first-row-class', 'second-row-class']

是否启用行选择，复选框/单选框 默认为null，不显示

{
  mode: 'checkbox',
  onBeforeSelect: () => (),
  onSelect: () => (),
  onSelectAll: () => ()
}

mode选项

checkbox复选，radio单选

onBeforeSelect()回调

当单行的复选框/单选框的值发生改变的时候触发，如果函数返回非true， 则不执行状态修改，也就是UI上复选框/单选框的选择状态不发生改变，也不执行onSelect() 回调。 参数：

• [Number] rowIdx 行index
• [Object] rowObj 行数据
• [boolean] isSelected 复选框/单选框选中状态true/false
• [Event] event Event对象
• [Array] selectedRowsObj 当前被选中的行的数据，比如：

  [ { id: '11', name: 'test11', note: 'foo' },
    { id: '22', name: 'test22', note: 'bar' } ]
  

  onSelect()回调

  当单行的复选框/单选框的值发生改变的时候触发 参数同onBeforeSelect()回调

onSelectAll()回调

function onSelectAll(
  Object tableData, // 所有行的数据
  boolean isSelected, // 复选框/单选框选中状态true/false
  Event event, // Event对象
)

当点击表头复选框值发生改变的时候触发， 当行被选中的时候，组件会自动往被选中的行添加selected类名

直接映射ReactBootstrap的属性 http://getbootstrap.com/css/#tables-striped

表格内部样式名

表格填充数据 type: boolean，数据类型是 boolean literal或者是 Boolean类型 （注意和Boolean全局对象区分） type: ref，参照的值比较特殊，是一个object:

pk_org: {
  id: '22EA0EB9-FABA-4224-B290-5D041A1DF773',
  code: '0403',
  name: '委外部'
}

页面数量

取消按钮文本
默认值:取消

填充表单值
时间类型比较特殊，请先转成 ISO 8601格式的字符串 之后，再传进来。

defaultData = {
  date: new Date('2017-02-14').toISOString()
}

表单中的数据 fieldsModel数据举例：

[
  {
    type: 'string',
    id: 'formValidationEmail',
    label: '邮箱地址',
    validators: [
      {type: 'email'}
    ]
  },
  {
   type: 'custom',
   component: <CustomComponent>
  }
]

schema为

fieldsModel = [ fieldModel, fieldModel, ... ];

type字段

字段类型type:

• 0 string 字符类型
• 1 double 数值类型
• 3 date 日期类型
• 4 boolean 布尔类型
• 5 ref 参照类型
• 6 enum 枚举型
• custom 自定义类型

string字符型

{
  type: 'string',
  id: 'formValidationEmail',
  label: '邮箱地址',
  validators: [
    { type: 'email' }
  ]
}

• date日期类型

  字段定义举例：

  {
  type: 'date',
  dateConfig: {
    locale: 'en_US',
    todayButton:'Today'
  }
  

custom 自定义类型

{
   type: 'custom',
   component: <CustomComponent>
}

对于自定义类型，需要调用者传入一个组件，表单在回调该组件的时候，传入如下属性：

propTypes: {
  customFieldModel: PropTypes.object,
  customFieldValue: PropTypes.string,
  onCustomFieldChange: PropTypes.func,
}

enum枚举型

{
  type: 'enum',
  id: 'accountProperty',
  label: '账户性质',
  data: [
    { key: 'BASE', value: '基本' },
    { key: 'NORMAL', value: '一般' },
    { key: 'TEMPORARY', value: '临时' },
    { key: 'SPECIAL', value: '专用' },
  ],
}

ref参照型

字段定义举例：

{
  type: 'ref',
  referConfig: {
    referConditions: {
      refCode: 'org',
      refType: 'tree',
      rootName: '组织'
    },
    referDataUrl: 'http://172.20.4.220/ficloud/refbase_ctr/queryRefJSON',
    renderMenuItemChildren: (option, props, index) => ([
      <div>{option.code + ' ' + option.name}</div>
    ])
    labelKey: 'name',
    referExtend: {
           showDisabledBtnText: 'Display Disabled',
           showDisabledBtnText_Not: 'Hide Disabled'
         },
  },
  multiple:false
}

所有referConfig下的属性直接向下传递给Refers组件， 比如referConfig = { foo: 'bar' }，那么就相当于

<Refers
  foo="bar"
/>

关于Refers组件的属性定义，详见ssc-refer

validators字段

校验类型，比如

validators: [
  { type: 'required' },
  { type: 'length', min: 3, max: 6,
    helpText: '字符串长度应该大于等于3小于等于6' }
]

schema为：

validators = [ validator, validator, ... ];

type字段支持如下类型：

• email 邮件地址
• decimal 数字，比如0.1, .3, 1.1, 1.00003, 4.0
• int 整数
• mobilePhone 手机号
• custom 自定义格式

helpText字段是错误提示。如果不提供，则使用默认错误提示。 如果是自定义类型，则通过matchFunc参数传递校验函数

{
  type: 'custom',
  helpText: value => '请输入正确的XX格式',
  matchFunc: value => {}
}

当matchFunc返回值为true的时候，认为校验通过 对于自定义类型，如果不提供helpText，则默认不显示错误提示。

disabled字段

当值为true的时候禁用该字段，其他值都是不禁用该字段。

自定义布局（bootstrap列布局） 具体参照：https://react-bootstrap.github.io/components.html#grid-props-col

[
  ['id', 'name', 'code'],
  ['src_system']
]

确定按钮文本
默认值:完成

当控件的值发生改变的时候触发

• 参数1 {String} fieldId 也就是传入组件中fieldsModel中的id
  
• 参数2 {String} value 改变之后的值
  
• 参数3 {Object} opt 可选参数，当type为string/boolean/enum等简单类型的时候，可以

        通过opt.event获取Event对象。<br>
        当type为date类型的时候，可以通过opt.formattedValue获取格式化
        之后的时间值。<br>
  

当点击“重置”按钮的时候

当表单被提交的时候触发
当用户使用了自定义提交按钮的时候不会调用该回调
参数1. formData, 整个表单中所有控件的值，是一个JSON对象，结构和传入参数 defaultData保持一致。

是否显示提交按钮

是否禁用输入框

当光标离开输入框

当文本框内容被修改时候调用

当文本框被聚焦

文本框占位字符

文本框中显示的值 TODO value应该改为defaultValue，类似于默认的input组件区分value和 defaultValue一样，使用defaultValue说明该组件是uncontrolled

日期格式，支持如下集中格式

'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'

value

日历悬浮窗自定义类名 https://hacker0x01.github.io/react-datepicker/#example-3

文本框自定义类名 https://hacker0x01.github.io/react-datepicker/#example-2

日期格式
遵循moment.js格式
Moment.js文档

参数：

• value {String}: ISO 8061格式时间字符串
• formattedValue {String}: 按照用户指定格式进行了格式化后的字符串
• momentDate {Object}: moment.js对象

value 请使用ISO 8061格式

日期格式 请参照Moment.js文档中的日期格式 比如：

YYYY年MM月

参数

• value {String} 年月字符串，比如2017-02
• formattedValue {String} 按照用户要求进行格式化之后的字符串，比如2017年02月

月份 格式：2017-02

参数

• value 年月字符串，比如"2017"
• formattedValue 按照用户要求进行格式化之后的字符串，比如"2017年"

年 格式：2017

日期格式 请参照Moment.js文档中的日期格式 比如：

YYYY年MM月

生成树所需要的JSON数据

[
  {
    "title": "0-0-label",
    "key": "0-0-key",
    "children": [
      {
        "title": "0-0-0-label",
        "key": "0-0-0-key"
      }
    ]
  }
]

填充下拉菜单的数据

[
  {id: 'zh_CN', name: '简体中文'},
  {id: 'en_US', name: '英文美国'}
]

当从下拉菜单选择一项的时候

To ensure accessibility, set controlId on https://react-bootstrap.github.io/components.html#forms

是否禁用输入框

当光标离开输入框

当文本框内容被修改时候调用

当文本框被聚焦

文本框占位字符

带有校验功能的输入框 场景1：使用内置校验（定义在src/utils/validation.js） 比如email为校验邮件地址格式

{
  type: 'email'
}

type可以是：

• currency 货币金额格式
• decimal 十进制数字格式
• email 电子邮件格式
• int 整数类型
• length 输入文本的长度
• mobilePhone 手机号码格式，比如18911112222
• required 必输字段 场景2：使用自定义校验 比如校验用户输入数字的范围

  {
  type: 'custom',
  matchFunc: (value, validator) => parseInt(value, 10) <= 100 && parseInt(value, 10) >= 0,
  helpText: (value, validator) => '残值率不能大于100%，小于0%'
  }
  

  回调函数matchFunc(string, Object) => boolean用于对文本框中的文字进行校验，返回false则校验失败，显示helpText定义的错误信息 回调函数helpText(string, Object) => string用于显示校验错误时候的错误提示信息

文本框中显示的值 注意：由于文本框是完全自由输入的，所以value的类型，以及在matchFunc回调函数的value参数的类型 都是string，具体参照https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement 文档中关于value属性的定义

To ensure accessibility, set controlId on https://react-bootstrap.github.io/components.html#forms

是否禁用输入框

请参照参照文档https://ssc-refer.github.io/

是否多选

当光标离开输入框

当文本框内容被修改时候调用

当文本框被聚焦

文本框占位字符

参照配置参数

referConfig = {
  referConditions: {"refCode":"dept","refType":"tree","rootName":"部门"};
}

referDataUrl: "http://172.20.4.220/ficloud/refbase_ctr/queryRefJSON";

自定义参照下拉列表

参照初始值

带有校验功能的输入框

To ensure accessibility, set controlId on https://react-bootstrap.github.io/components.html#forms

是否禁用输入框

校验错误时候提示信息

当文本框为空的显示的提示信息

当光标离开输入框

当文本框内容被修改时候调用

当文本框被聚焦

文本框占位字符

Required field

文本框中显示的值 注意：由于文本框是完全自由输入的，所以value的类型，以及在matchFunc回调函数的value参数的类型 都是string，具体参照https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement 文档中关于value属性的定义