forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增table编辑校验，增加示例和文档

This commit is contained in:
huyueb 2017-11-02 14:01:03 +08:00
parent 83e92a7b52
commit 6e10d2c42f
11 changed files with 166 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
build/Table.css
View File

@ -83,8 +83,6 @@
background: #f7f7f7; }
.u-table tr.u-table-expanded-row:hover {
background: #f7f7f7; }
.u-table tr.u-table-expanded-row .u-table {
padding: 0 40px 0 20px; }
.u-table-column-hidden {
display: none; }
.u-table-prev-columns-page, .u-table-next-columns-page {
@ -185,3 +183,23 @@
transform-origin: 0 0;
transform: translateX(-30px);
opacity: 0; } }
.formItem-style {
height: unset;
min-height: unset;
padding: 0; }
.errMessage-style {
display: none;
border: none;
/* margin-top: 5px; */
/* margin-bottom: 5px; */
background: transparent;
color: #F22C1D;
/* padding-left: 12px; */
/* padding-right: 12px; */
margin: 0;
position: absolute;
padding: 0;
top: 3px;
right: 0; }

8
build/lib/sum.js
View File

@ -10,10 +10,6 @@ var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _lodash = require("lodash.clonedeep");
var _lodash2 = _interopRequireDefault(_lodash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -24,6 +20,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
// import clonedeep from "lodash.clonedeep";
//创建新列存放 “合计” 字段
var columns2 = {
title: "合计",
@ -43,7 +41,7 @@ var sum = function sum(Table) {
_this.currentFooter = function () {
var data_2 = _this.props.data;
var columns_sum = (0, _lodash2["default"])(_this.props.columns);
var columns_sum = _this.props.columns.concat();
var sumCol_index = void 0;
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
for (var i = 0; i < columns_sum.length; i++) {

106
build/render/InputRender.js
View File

@ -16,6 +16,18 @@ var _beeFormControl = require("bee-form-control");
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
var _beeForm = require("bee-form");
var _beeForm2 = _interopRequireDefault(_beeForm);
var _beeTooltip = require("bee-tooltip");
var _beeTooltip2 = _interopRequireDefault(_beeTooltip);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -26,6 +38,16 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
check: _propTypes2["default"].func
};
var defaultProps = {
check: function check() {
return "";
}
};
var InputRender = function (_Component) {
_inherits(InputRender, _Component);
@ -45,10 +67,17 @@ var InputRender = function (_Component) {
var value = e;
_this.setState({ value: value });
}, _this.check = function () {
_this.setState({ editable: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.value);
if (typeof _this.flag === "undefined" || _this.flag) {
_this.props.check(_this.flag, _this.obj);
_this.setState({ editable: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.value);
}
_this.flag = undefined;
}
}, _this.checkValidate = function (flag, obj) {
_this.flag = flag;
_this.obj = obj;
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
@ -79,29 +108,71 @@ var InputRender = function (_Component) {
value = _state.value,
editable = _state.editable;
var _props = this.props,
name = _props.name,
placeholder = _props.placeholder,
isclickTrigger = _props.isclickTrigger,
format = _props.format;
format = _props.format,
formItemClassName = _props.formItemClassName,
mesClassName = _props.mesClassName,
isRequire = _props.isRequire,
check = _props.check,
method = _props.method,
errorMessage = _props.errorMessage,
reg = _props.reg,
htmlType = _props.htmlType;
var cellContent = "";
if (editable) {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeFormControl2["default"], {
onChange: this.handleChange,
onKeyDown: this.handleKeydown,
onBlur: this.check,
autoFocus: true,
value: value
})
_react2["default"].createElement(
_beeForm2["default"].FormItem,
{
className: "formItem-style " + formItemClassName,
mesClassName: "errMessage-style " + mesClassName,
isRequire: isRequire,
change: this.handleChange,
blur: this.check,
htmlType: htmlType,
method: method,
errorMessage: errorMessage,
reg: reg,
check: this.checkValidate
},
_react2["default"].createElement(_beeFormControl2["default"], {
name: name,
placeholder: placeholder,
onKeyDown: this.handleKeydown,
autoFocus: true,
value: value
})
)
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeFormControl2["default"], {
value: value,
onChange: this.handleChange,
onKeyDown: this.handleKeydown
}),
_react2["default"].createElement(
_beeForm2["default"].FormItem,
{
className: "formItem-style " + formItemClassName,
mesClassName: "errMessage-style " + mesClassName,
isRequire: isRequire,
change: this.handleChange,
blur: this.check,
htmlType: htmlType,
method: method,
errorMessage: errorMessage,
reg: reg,
check: this.checkValidate
},
_react2["default"].createElement(_beeFormControl2["default"], {
name: name,
placeholder: placeholder,
onKeyDown: this.handleKeydown,
autoFocus: true,
value: value
})
),
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-correct",
className: "editable-cell-icon-check",
@ -138,4 +209,7 @@ var InputRender = function (_Component) {
}(_react.Component);
exports["default"] = InputRender;
InputRender.PropTypes = propTypes;
InputRender.defaultProps = defaultProps;
module.exports = exports["default"];

4
demo/demolist/Demo14.js
View File

@ -87,8 +87,6 @@ class Demo14 extends React.Component {
isclickTrigger={true}
check={this.check}
onChange={this.onInputChange(index, "name")}
formItemClassName="formItem-style"
mesClassName="errMessage-style"
isRequire={true}
method="blur"
errorMessage={
@ -114,8 +112,6 @@ class Demo14 extends React.Component {
isclickTrigger={true}
check={this.check}
onChange={this.onInputChange(index, "name")}
formItemClassName="formItem-style"
mesClassName="errMessage-style"
isRequire={true}
method="blur"
errorMessage={

33
demo/demolist/Demo15.js
View File

@ -1,33 +0,0 @@
/**
*
* @title 编辑态表格（包含校验）
* @description 块级布局
*
*/
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Form from "bee-form";
import FormControl from "bee-form-control";
import Label from "bee-label";
import FormGroup from "bee-form-group";
class Demo15 extends Component {
check = (flag, obj) => {
console.log(flag);
console.log(obj);
};
render() {
return (
<Form.FormItem
mesClassName="mesclassname"
labelName="姓名"
isRequire={true}
method="blur"
reg={/^[0-9]+$/}
check={this.check}
>
<FormControl name="age" placeholder="请输入数字" />
</Form.FormItem>
);
}
}
export default Demo15;

1
demo/demolist/Demo16.js
View File

@ -53,7 +53,6 @@ class Demo16 extends Component {
<Table
columns={columns16}
data={data16}
expandIconAsCell="true"
expandedRowRender={this.expandedRowRender}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -37,6 +37,7 @@
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
| expandedRowRender | 额外的展开行 | Function | - |
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
### Column

41
docs/rendertype.md
View File

@ -1,15 +1,25 @@
## rendertype
在表格中提供了多种rendertype可以供选择，比如下拉框，单选框，复选框，日期等
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
## 如何引用
import InputRender from "bee-table/render/DateRender.js"
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
```js
import InputRender from "bee-table/render/InputRender.js"
```
## 安装依赖包
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
### InputRender
输入框类型render
#### 依赖的组件
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
@ -28,4 +38,29 @@ import InputRender from "bee-table/render/DateRender.js"
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
### DateRender
日期类型render
#### 依赖的组件
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
注:其他参数参见bee-datepicker组件参数配置
### SelectRender
输入框类型render
#### 依赖的组件
该render依赖于`bee-icon`,`bee-select`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
注:其他参数参见bee-select组件参数配置

3
src/Table.scss
View File

@ -145,7 +145,7 @@ $table-move-in-color: $bg-color-base;
background: #f7f7f7;
}
.u-table{
padding: 0 40px 0 20px;
// padding: 0 40px 0 20px;
}
}
&-column-hidden {
@ -301,6 +301,7 @@ $table-move-in-color: $bg-color-base;
.formItem-style{
height: unset;
min-height: unset;
padding: 0;
}
.errMessage-style{

25
src/render/InputRender.js
View File

@ -103,8 +103,8 @@ export default class InputRender extends Component {
/>
*/}
<Form.FormItem
className={formItemClassName}
mesClassName={mesClassName}
className={"formItem-style " + formItemClassName}
mesClassName={"errMessage-style " + mesClassName}
isRequire={isRequire}
change={this.handleChange}
blur={this.check}
@ -131,23 +131,20 @@ export default class InputRender extends Component {
onKeyDown={this.handleKeydown}
/> */}
<Form.FormItem
className="formItem-style"
mesClassName="errMessage-style"
isRequire={true}
className={"formItem-style " + formItemClassName}
mesClassName={"errMessage-style " + mesClassName}
isRequire={isRequire}
change={this.handleChange}
blur={this.check}
method="blur"
errorMessage={
<Tooltip overlay={"错误提示"}>
<Icon type="uf-exc-c" className="" />
</Tooltip>
}
reg={/^[0-9]+$/}
htmlType={htmlType}
method={method}
errorMessage={errorMessage}
reg={reg}
check={this.checkValidate}
>
<Input
name="age"
placeholder="请输入数字"
name={name}
placeholder={placeholder}
onKeyDown={this.handleKeydown}
autoFocus
value={value}