5 Star 12 Fork 3

WangXinXin / react-antd-admin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
test.dataSchema.js 4.67 KB
一键复制 编辑 原始数据 按行查看 历史
WangXinXin 提交于 2017-05-04 16:34 . first init
import React from 'react';
import {Icon} from 'antd';
// 定义某个表的dataSchema, 结构跟querySchema很相似, 见下面的例子
// 注意: 所有的key不能重复
// 这个配置不只决定了table的schema, 也包括用于新增/删除的表单的schema
module.exports = [
{
key: 'id', // 传递给后端的key
title: 'ID', // 前端显示的名字
// 其实dataType对前端的意义不大, 更重要的是生成后端接口时要用到, 所以要和DB中的类型一致
// 对java而言, int/float/varchar/datetime会映射为Long/Double/String/Date
dataType: 'int', // 数据类型, 目前可用的: int/float/varchar/datetime
// 这一列是否是主键?
// 如果不指定主键, 不能update/delete, 但可以insert
// 如果指定了主键, insert/update时不能填写主键的值;
// 只有int/varchar可以作为主键, 但是实际上主键一般都是自增id
primary: true,
// 可用的showType: normal/radio/select/checkbox/multiSelect/textarea/image/file/cascader
showType: 'normal', // 默认是normal, 就是最普通的输入框
showInTable: true, // 这一列是否要在table中展示, 默认true
disabled: false, // 表单中这一列是否禁止编辑, 默认false
// 扩展接口, 决定了这一列渲染成什么样子
render: (text, record) => text,
},
{
key: 'name',
title: '用户名',
dataType: 'varchar', // 对于普通的input框, 可以设置addonBefore/addonAfter
placeholder: '请输入用户名',
addonBefore: (<Icon type="user"/>),
addonAfter: '切克闹',
defaultValue: 'foolbear', // 默认值, 只在insert时生效, update时不生效
},
{
key: 'weight',
title: '体重(千克)',
dataType: 'int',
min: 10,
defaultValue: 70, // 默认值
disabled: true,
showInForm: false, // 这一列是否要在表单中展示, 默认true. 这种列一般都是不需要用户输入的, DB就会给一个默认值那种
},
{
key: 'gender',
title: '性别',
dataType: 'int',
showType: 'radio',
options: [{key: '1', value: ''}, {key: '2', value: ''}],
defaultValue: '1',
disabled: true,
},
{
key: 'marriage',
title: '婚否',
dataType: 'varchar',
showType: 'select',
options: [{key: 'yes', value: '已婚'}, {key: 'no', value: '未婚'}],
// 对于dataSchema可以设置校验规则, querySchema不能设置
// 设置校验规则, 参考https://github.com/yiminghe/async-validator#rules
validator: [{type: 'string', required: true, message: '必须选择婚否!'}],
},
{
key: 'interest',
title: '兴趣爱好',
dataType: 'int',
showType: 'checkbox',
options: [{key: '1', value: '吃饭'}, {key: '2', value: '睡觉'}, {key: '3', value: '打豆豆'}],
defaultValue: ['1', '2'],
validator: [{type: 'array', required: true, message: '请至少选择一项兴趣'}],
width: 120, // 指定这一列的宽度
},
{
key: 'good',
title: '优点',
dataType: 'varchar',
showType: 'multiSelect',
options: [{key: 'lan', value: ''}, {key: 'zhai', value: ''}],
validator: [{type: 'array', required: true, message: '请选择优点'}],
},
{
key: 'pic1',
title: '头像',
dataType: 'varchar',
showType: 'image', // 后端必须提供图片上传接口
showInTable: false,
},
{
key: 'desc',
title: '个人简介',
dataType: 'varchar',
showType: 'textarea', // 用于编辑大段的文本
showInTable: false,
defaultValue: '个人简介个人简介个人简介',
validator: [{type: 'string', max: 20, message: '最长20个字符'}],
},
{
key: 'score',
title: '分数',
dataType: 'int',
max: 99,
min: 9,
},
{
key: 'gpa',
title: 'GPA',
dataType: 'float',
max: 9.9,
placeholder: '哈哈',
width: 50,
},
{
key: 'birthday',
title: '生日',
// 对于日期类型要注意下, 在js端日期被表示为yyyy-MM-dd HH:mm:ss的字符串, 在java端日期被表示为java.util.Date对象
// fastjson反序列化时可以自动识别
// 序列化倒是不用特别配置, 看自己需求, fastjson会序列化为一个字符串, 前端原样展示
dataType: 'datetime',
// 对于datetime而言, 配置showType是无意义的
placeholder: 'happy!',
},
{
key: 'xxday',
title: 'xx日期',
dataType: 'datetime',
defaultValue: '2017-01-01 11:22:33',
showInTable: false,
showInForm: false, // 这个只是测试下...如果一列在table和form中都不出现, 那就不如直接去掉.
// 另外showInForm=false时, 很多针对form的字段都没意义了, 比如defaultValue/placeholder/validator等等
},
];
1
https://gitee.com/winer632/react-antd-admin.git
git@gitee.com:winer632/react-antd-admin.git
winer632
react-antd-admin
react-antd-admin
master

搜索帮助