Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
jonyshi
commit
c7f1418297
44
CHANGELOG.md
44
CHANGELOG.md
|
|
@ -1,10 +1,46 @@
|
|||
<a name="2.0.2"></a>
|
||||
## [2.0.2](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.2) (2019-03-02)
|
||||
<a name="2.0.6"></a>
|
||||
## [2.0.6](https://github.com/tinper-bee/bee-table/compare/v2.0.5...v2.0.6) (2019-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.5"></a>
|
||||
## [2.0.5](https://github.com/tinper-bee/bee-table/compare/v2.0.4...v2.0.5) (2019-03-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
|
||||
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.4"></a>
|
||||
## [2.0.4](https://github.com/tinper-bee/bee-table/compare/v2.0.3...v2.0.4) (2019-03-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 含有右侧固定列场景中，内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.3"></a>
|
||||
## [2.0.3](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.3) (2019-03-05)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.0"></a>
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01)
|
||||
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.44...v2.0.0) (2019-03-01)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.44"></a>
|
||||
## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26)
|
||||
|
||||
|
||||
|
||||
|
|
@ -299,7 +335,7 @@
|
|||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ var FilterDropDown = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
|
|
@ -140,7 +140,7 @@ var FilterDropDown = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
|
|
@ -160,7 +160,7 @@ var FilterDropDown = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
|
|
@ -198,7 +198,7 @@ var FilterDropDown = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
|
|
|
|||
|
|
@ -179,7 +179,8 @@
|
|||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold; }
|
||||
font-weight: bold;
|
||||
text-align: left; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
|
|
@ -187,19 +188,19 @@
|
|||
.u-table td {
|
||||
border-bottom: 1px solid rgb(233,233,233); }
|
||||
.u-table td a {
|
||||
color: rgb(245, 60, 50); }
|
||||
color: #2196F3; }
|
||||
.u-table td a:hover {
|
||||
color: rgb(230, 0, 18); }
|
||||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: rgb(230, 0, 18); }
|
||||
color: #1565c0; }
|
||||
.u-table tr:hover td .uf-eye {
|
||||
visibility: visible !important; }
|
||||
.u-table tr tr a {
|
||||
color: rgb(245, 60, 50); }
|
||||
color: #2196F3; }
|
||||
.u-table tr tr a:hover {
|
||||
color: rgb(230, 0, 18); }
|
||||
color: #1565c0; }
|
||||
.u-table tr tr a:active {
|
||||
color: rgb(230, 0, 18); }
|
||||
color: #1565c0; }
|
||||
.u-table tr.tr-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table th,
|
||||
|
|
@ -473,7 +474,8 @@
|
|||
pointer-events: none; }
|
||||
.u-table .u-checkbox {
|
||||
height: 16px;
|
||||
line-height: 16px; }
|
||||
line-height: 16px;
|
||||
margin: 0px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -569,7 +571,8 @@
|
|||
display: none; }
|
||||
|
||||
.editable-cell-input-wrapper .u-input-group .u-form-control {
|
||||
height: 26px; }
|
||||
height: 26px;
|
||||
font-size: 12px; }
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ var Table = function (_Component) {
|
|||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
|
||||
_this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -8,15 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
|
||||
exports["default"] = multiSelect;
|
||||
|
||||
var _react = require('react');
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _beeCheckbox = require('bee-checkbox');
|
||||
|
||||
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||
|
||||
var _util = require('./util');
|
||||
var _util = require("./util");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
|
|
@ -27,6 +23,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
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 Checkbox from 'bee-checkbox';
|
||||
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
|
|
@ -134,7 +132,8 @@ function multiSelect(Table, Checkbox) {
|
|||
|
||||
return NewMultiSelect;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
prefixCls: "u-table-mult-select",
|
||||
getSelectedDataFunc: function getSelectedDataFunc() {}
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
|
|
@ -218,7 +217,7 @@ function multiSelect(Table, Checkbox) {
|
|||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, _extends({
|
||||
className: 'table-checkbox'
|
||||
className: "table-checkbox"
|
||||
}, checkAttr, {
|
||||
disabled: disabledCount == dataLength ? true : false,
|
||||
onChange: _this2.onAllCheckChange
|
||||
|
|
@ -232,7 +231,7 @@ function multiSelect(Table, Checkbox) {
|
|||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
className: "table-checkbox"
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this2.handleClick,
|
||||
|
|
@ -244,4 +243,4 @@ function multiSelect(Table, Checkbox) {
|
|||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -8,15 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
|
||||
exports["default"] = newMultiSelect;
|
||||
|
||||
var _react = require('react');
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _beeCheckbox = require('bee-checkbox');
|
||||
|
||||
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||
|
||||
var _util = require('./util');
|
||||
var _util = require("./util");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
|
|
@ -27,6 +23,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
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 Checkbox from 'bee-checkbox';
|
||||
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
|
|
@ -166,7 +164,7 @@ function newMultiSelect(Table, Checkbox) {
|
|||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
className: "table-checkbox",
|
||||
checked: checkedAll
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
, onChange: _this2.onAllCheckChange
|
||||
|
|
@ -180,7 +178,7 @@ function newMultiSelect(Table, Checkbox) {
|
|||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
className: "table-checkbox"
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this2.handleClick,
|
||||
|
|
@ -192,4 +190,4 @@ function newMultiSelect(Table, Checkbox) {
|
|||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -1,25 +1,25 @@
|
|||
@import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
@import "../node_modules/bee-panel/src/Panel.scss";
|
||||
@import "../node_modules/bee-layout/src/Layout.scss";
|
||||
@import "../node_modules/bee-button/src/Button.scss";
|
||||
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
@import "../node_modules/bee-select/src/Select.scss";
|
||||
@import "../node_modules/bee-form/src/Form.scss";
|
||||
@import "../node_modules/bee-popover/src/Popover.scss";
|
||||
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
@import "../node_modules/bee-message/build/Message.css";
|
||||
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
@import "../node_modules/bee-modal/build/Modal.css";
|
||||
// @import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
// @import "../node_modules/bee-panel/src/Panel.scss";
|
||||
// @import "../node_modules/bee-layout/src/Layout.scss";
|
||||
// @import "../node_modules/bee-button/src/Button.scss";
|
||||
// @import "../node_modules/bee-transition/src/Transition.scss";
|
||||
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
// @import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
// @import "../node_modules/bee-select/src/Select.scss";
|
||||
// @import "../node_modules/bee-form/src/Form.scss";
|
||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
// @import "../node_modules/bee-message/build/Message.css";
|
||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
//引入日期控件样式文件
|
||||
@import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||
// @import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||
|
||||
.selected{
|
||||
background: rgb(227,242,253);
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@ class Demo14 extends React.Component {
|
|||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
size="sm"
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@ class Demo19 extends React.Component {
|
|||
onChange={this.onSelectChange(index, "address")}
|
||||
onFocus={this.handFocus}
|
||||
onBlur={this.onBlur}
|
||||
size="sm"
|
||||
autofocus
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
|
|
|
|||
|
|
@ -183,6 +183,7 @@ class Demo2 extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Button
|
||||
colors="secondary"
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ class Demo35 extends Component {
|
|||
this.currentRecord = record;
|
||||
}
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button colors="primary" size="sm" onClick={this.delFun}>删除</Button> </div>
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.delFun}>删除</Button> </div>
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
.opt-btns{
|
||||
.u-button{
|
||||
background-color: #505F79;
|
||||
border-color: #505F79;
|
||||
color: #fff;
|
||||
&:hover, &:active{
|
||||
background-color: #344563;
|
||||
border-color: #344563;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
281
docs/api.md
281
docs/api.md
|
|
@ -1,16 +1,22 @@
|
|||
# Table
|
||||
|
||||
## 何时使用
|
||||
表格是以结构化的方式来展示大量的信息最佳方法，使信息更易于阅读与理解。
|
||||
表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据，小量的信息，静态数据以及不断地变动的数据。
|
||||
|
||||
## 如何使用
|
||||
```
|
||||
import { Table } from 'tinper-bee';
|
||||
|
||||
or
|
||||
|
||||
import Table from 'bee-table';
|
||||
import bee-table/build/Table.css;
|
||||
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
## 引入机制
|
||||
|
||||
import Table from "bee-table";
|
||||
import 'bee-table/build/Table.css';
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Table
|
||||
|
|
@ -106,13 +112,268 @@ import 'bee-table/build/Table.css';
|
|||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
{% include "mixin.md"%}
|
||||
## mixin
|
||||
|
||||
Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
||||
```js
|
||||
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
选中功能组件
|
||||
|
||||
<font color="#ccc">
|
||||
|
||||
#### <font color="#ccc">multiSelect 废弃部分的API</font>
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| multiSelect | 全选功能的配置对象，属性参见下面 | obj | {} |
|
||||
| multiSelect.type | 全选功能的类型，多选或单选（暂时只支持多选） | string | checkbox |
|
||||
| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' |
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
|
||||
</font>
|
||||
|
||||
#### multiSelect 新增API
|
||||
|
||||
data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
|
||||
{% include "rendertype.md"%}
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import multiSelect from "tinper-bee/lib/multiSelect.js";
|
||||
import { Table, Checkbox } from 'tinper-bee';
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
```
|
||||
|
||||
### sort
|
||||
|
||||
排序功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import sort from "tinper-bee/lib/sort.js";
|
||||
import { Table, Icon } from 'tinper-bee';
|
||||
|
||||
const SortTable = sort(Table, Icon);
|
||||
|
||||
```
|
||||
|
||||
### sum
|
||||
|
||||
合计功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import sum from "tinper-bee/lib/sum.js";
|
||||
import { Table } from 'tinper-bee';
|
||||
|
||||
const SumTable = sum(Table);
|
||||
|
||||
```
|
||||
|
||||
### dragColumn
|
||||
|
||||
拖拽列功能
|
||||
|
||||
#### dragColumn新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| dragborder | 拖拽调整列宽度 | boolean | false |
|
||||
| draggable | 拖拽交换列 | boolean | false |
|
||||
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
|
||||
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
|
||||
|
||||
|
||||
### 使用注意
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import dragColumn from "tinper-bee/lib/dragColumn.js";
|
||||
import { Table } from 'tinper-bee';
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
```
|
||||
|
||||
### filterColumn
|
||||
|
||||
过滤功能
|
||||
|
||||
#### filterColumn新增参数
|
||||
|
||||
无
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import filterColumn from "tinper-bee/lib/filterColumn.js";
|
||||
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';
|
||||
|
||||
const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||
|
||||
```js
|
||||
import renderInput from "tinper-bee/lib/InputRender.js";
|
||||
|
||||
```
|
||||
|
||||
### InputRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
|
||||
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
|
||||
| placeholder | 输入框的提示信息 | string | - |
|
||||
| value | 输入框中的显示值 | string | 无 |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
||||
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
|
||||
| formItemClassName | FormItem的class | string | - |
|
||||
| mesClassName | 校验错误信息的class | string | - |
|
||||
| isRequire | 是否必填 | bool | false |
|
||||
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
||||
| method | 校验方式，change/blur | string | - |
|
||||
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
||||
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
||||
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import renderInput from "tinper-bee/lib/InputRender.js";
|
||||
import { Icon, Form , FormControl } from 'tinper-bee';
|
||||
const InputRender = renderInput(Form, FormControl, Icon);
|
||||
|
||||
```
|
||||
|
||||
### DateRender
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`moment`, `Datepicker`, `Icon`
|
||||
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见Datepicker组件参数配置
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import renderDate from "tinper-bee/lib/DateRender.js";
|
||||
import Datepicker from "tinper-bee/lib/Datepicker";
|
||||
import { Icon } from 'tinper-bee';
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
|
||||
```
|
||||
|
||||
|
||||
### SelectRender
|
||||
下拉框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`Icon`,`Select`
|
||||
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见Select组件参数配置
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import renderSelect from "tinper-bee/lib/SelectRender.js";
|
||||
import { Icon, Select } from 'tinper-bee';
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
```
|
||||
|
||||
### CheckboxRender
|
||||
复选框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`Icon`,`Checkbox`
|
||||
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| onChange | 修改后触发回调函数 | function | () => {} |
|
||||
| value | 设置是否选中值 | boolean | false |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见Checkbox组件参数配置
|
||||
|
||||
#### 使用
|
||||
|
||||
```js
|
||||
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
|
||||
import { Icon, Checkbox } from 'tinper-bee';
|
||||
const CheckboxRender = renderCheckbox(Checkbox, Icon);
|
||||
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 如果使用了固定列，请给固定的列设定固定宽度既width属性。
|
||||
|
||||
|
|
@ -121,3 +382,5 @@ import 'bee-table/build/Table.css';
|
|||
|
||||
|
||||
> 当表格场景比较复杂时，可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
|
||||
|
||||
## 更新日志
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<title>tinper-bee demo</title>
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
|
||||
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body style="background: #eceff1">
|
||||
|
|
@ -13,9 +14,9 @@
|
|||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<script src="./node_modules/console-polyfill/index.js"></script>
|
||||
<script src="./node_modules/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.5-beta.0",
|
||||
"version": "2.0.6",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ class FilterDropDown extends Component {
|
|||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
onClick={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
{
|
||||
|
|
@ -102,7 +102,7 @@ class FilterDropDown extends Component {
|
|||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
onClick={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
{
|
||||
|
|
@ -118,7 +118,7 @@ class FilterDropDown extends Component {
|
|||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
onClick={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="LIKE">{locale['include']}</Item>
|
||||
|
|
@ -130,7 +130,7 @@ class FilterDropDown extends Component {
|
|||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
onClick={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
<Item key="GT">{locale['greater_than']}</Item>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ class Table extends Component {
|
|||
let rows = [...props.data];
|
||||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth);
|
||||
this.store = createStore({ currentHoverKey: null });
|
||||
|
||||
this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = rows[i];
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ $checkbox-height:16px;
|
|||
th {
|
||||
// background: $table-head-background-color;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
// transition: background 0.3s ease;
|
||||
&[colspan] {
|
||||
text-align: center;
|
||||
|
|
@ -57,12 +58,12 @@ $checkbox-height:16px;
|
|||
td {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
a{
|
||||
color: $brand-primary;
|
||||
color: #2196F3;
|
||||
&:hover{
|
||||
color: $brand-primary-hover;
|
||||
color: #1565c0;
|
||||
}
|
||||
&:active{
|
||||
color: $brand-primary-active;
|
||||
color: #1565c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -78,12 +79,12 @@ $checkbox-height:16px;
|
|||
}
|
||||
}
|
||||
tr a{
|
||||
color: $brand-primary;
|
||||
color: #2196F3;
|
||||
&:hover{
|
||||
color: $brand-primary-hover;
|
||||
color: #1565c0;
|
||||
}
|
||||
&:active{
|
||||
color: $brand-primary-active;
|
||||
color: #1565c0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -521,6 +522,7 @@ $checkbox-height:16px;
|
|||
.u-checkbox {
|
||||
height: $checkbox-height;
|
||||
line-height: $checkbox-height;
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
.u-table:focus{
|
||||
|
|
@ -641,6 +643,7 @@ $checkbox-height:16px;
|
|||
}
|
||||
.u-input-group .u-form-control{
|
||||
height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ export default function multiSelect(Table, Checkbox) {
|
|||
|
||||
return class NewMultiSelect extends Component {
|
||||
static defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
prefixCls: "u-table-mult-select",
|
||||
getSelectedDataFunc:()=>{}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue