Compare commits
18 Commits
| Author | SHA1 | Date |
|---|---|---|
liushaozhen
|
ce4a4b8085 | |
|
liushaozhen
|
4db0400451 | |
|
liushaozhen
|
ad6f572d79 | |
yangchch6
|
d4cfee746a | |
|
yangchch6
|
3d3585f217 | |
yangchch6
|
04fd93bc4b | |
|
yangchch6
|
c805b95e7e | |
|
yangchch6
|
525852ca6e | |
|
yangchch6
|
d3e9cb128f | |
|
yangchch6
|
35dd46006e | |
|
yangchch6
|
9a40f28b16 | |
|
yangchch6
|
4ddf9cbae1 | |
|
yangchch6
|
cc103f4e69 | |
|
yangchch6
|
4b4bdcd588 | |
|
yangchch6
|
5fc440cd04 | |
|
yangchch6
|
26a6b94041 | |
jonyshi
|
41d077f9b8 | |
|
jonyshi
|
734bc74794 |
|
|
@ -26,3 +26,8 @@ sea-modules
|
|||
spm_modules
|
||||
.cache
|
||||
coverage
|
||||
demo
|
||||
docs
|
||||
test
|
||||
dist
|
||||
.npmignore
|
||||
|
|
@ -1,176 +1,3 @@
|
|||
<a name="2.1.3"></a>
|
||||
## [2.1.3](https://github.com/tinper-bee/bee-table/compare/v2.1.2...v2.1.3) (2019-06-12)
|
||||
|
||||
|
||||
|
||||
<a name="2.1.2"></a>
|
||||
## [2.1.2](https://github.com/tinper-bee/bee-table/compare/v2.1.1...v2.1.2) (2019-06-06)
|
||||
|
||||
|
||||
|
||||
<a name="2.1.1"></a>
|
||||
## [2.1.1](https://github.com/tinper-bee/bee-table/compare/v2.1.0...v2.1.1) (2019-06-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 多列排序时sorter规则优先安置用户传入的sorter方法,如果不传走默认 ([b90ab5e](https://github.com/tinper-bee/bee-table/commit/b90ab5e))
|
||||
|
||||
|
||||
|
||||
<a name="2.1.0"></a>
|
||||
# [2.1.0](https://github.com/tinper-bee/bee-table/compare/v2.0.25...v2.1.0) (2019-06-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 纵向滚动条动态显示 ([c0167c3](https://github.com/tinper-bee/bee-table/commit/c0167c3))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.25"></a>
|
||||
## [2.0.25](https://github.com/tinper-bee/bee-table/compare/v2.0.24...v2.0.25) (2019-05-24)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.24"></a>
|
||||
## [2.0.24](https://github.com/tinper-bee/bee-table/compare/v2.0.22...v2.0.24) (2019-05-22)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.22"></a>
|
||||
## [2.0.22](https://github.com/tinper-bee/bee-table/compare/v2.0.21...v2.0.22) (2019-05-22)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.21"></a>
|
||||
## [2.0.21](https://github.com/tinper-bee/bee-table/compare/v2.0.20...v2.0.21) (2019-05-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 数据没有时,表头列过多时,后面的列被隐藏 ([74f5400](https://github.com/tinper-bee/bee-table/commit/74f5400))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.20"></a>
|
||||
## [2.0.20](https://github.com/tinper-bee/bee-table/compare/v2.0.19...v2.0.20) (2019-05-21)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.19"></a>
|
||||
## [2.0.19](https://github.com/tinper-bee/bee-table/compare/v2.0.18...v2.0.19) (2019-05-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bee-table:** ie11下removeEventListener报错bug ([59d03c3](https://github.com/tinper-bee/bee-table/commit/59d03c3))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.18"></a>
|
||||
## [2.0.18](https://github.com/tinper-bee/bee-table/compare/v2.0.16...v2.0.18) (2019-05-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Refs Must Have Owner Warning ([90853f0](https://github.com/tinper-bee/bee-table/commit/90853f0))
|
||||
* 固定列多出一行导致滚动错位问题 ([d884483](https://github.com/tinper-bee/bee-table/commit/d884483))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.16"></a>
|
||||
## [2.0.16](https://github.com/tinper-bee/bee-table/compare/v2.0.15...v2.0.16) (2019-04-26)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.15"></a>
|
||||
## [2.0.15](https://github.com/tinper-bee/bee-table/compare/v2.0.14...v2.0.15) (2019-04-25)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.14"></a>
|
||||
## [2.0.14](https://github.com/tinper-bee/bee-table/compare/v2.0.13...v2.0.14) (2019-04-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* filterColumn内容超出8个字显示省略号 ([2878e39](https://github.com/tinper-bee/bee-table/commit/2878e39))
|
||||
* 过滤列遮挡行线 ([bc07ab3](https://github.com/tinper-bee/bee-table/commit/bc07ab3))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 在固定列中使用图片时增加注意事项 ([6ac9f76](https://github.com/tinper-bee/bee-table/commit/6ac9f76))
|
||||
* **drag row:** drag row ([81bd1cc](https://github.com/tinper-bee/bee-table/commit/81bd1cc))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **drag row:** drag row
|
||||
|
||||
|
||||
|
||||
<a name="2.0.13"></a>
|
||||
## [2.0.13](https://github.com/tinper-bee/bee-table/compare/v2.0.12...v2.0.13) (2019-04-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 全选表格含有disabled状态并且是勾选状态bug ([162dec5](https://github.com/tinper-bee/bee-table/commit/162dec5))
|
||||
* 页面尺寸改变时，重新计算表格宽度 ([7e997b7](https://github.com/tinper-bee/bee-table/commit/7e997b7))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* filterColumn 中item字体为12px，点击文字checkbox也可以选中 ([f8f983f](https://github.com/tinper-bee/bee-table/commit/f8f983f))
|
||||
* 增加表格内容是否显示在一行 ([df755b9](https://github.com/tinper-bee/bee-table/commit/df755b9))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.12"></a>
|
||||
## [2.0.12](https://github.com/tinper-bee/bee-table/compare/v2.0.11...v2.0.12) (2019-04-11)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.11"></a>
|
||||
## [2.0.11](https://github.com/tinper-bee/bee-table/compare/v2.0.10...v2.0.11) (2019-04-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* headerScrol=true数据量大时，表头和表体滚动条长度不一致 ([4198316](https://github.com/tinper-bee/bee-table/commit/4198316))
|
||||
* table表头字体加粗、固定表头border粗问题、过滤列弹出框宽度自适应超出8个字显示省略号、表头下增加border下划线 ([3a6c718](https://github.com/tinper-bee/bee-table/commit/3a6c718))
|
||||
* **Table.js:** 表头样式调整，修改多选实例，增加回调函数说明，headerScrol=true数据量大时，表头和表体滚动条长度不一致 ([8d33036](https://github.com/tinper-bee/bee-table/commit/8d33036))
|
||||
|
||||
|
||||
|
||||
<a name="2.0.10"></a>
|
||||
## [2.0.10](https://github.com/tinper-bee/bee-table/compare/v2.0.9...v2.0.10) (2019-03-29)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.9"></a>
|
||||
## [2.0.9](https://github.com/tinper-bee/bee-table/compare/v2.0.8...v2.0.9) (2019-03-27)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.8"></a>
|
||||
## [2.0.8](https://github.com/tinper-bee/bee-table/compare/v2.0.7...v2.0.8) (2019-03-25)
|
||||
|
||||
|
||||
|
||||
<a name="2.0.7"></a>
|
||||
## [2.0.7](https://github.com/tinper-bee/bee-table/compare/v2.0.6...v2.0.7) (2019-03-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Table 拖拽后同步表格整体宽度 ([ee40deb](https://github.com/tinper-bee/bee-table/commit/ee40deb))
|
||||
* 表格key警告问题 ([6977e2f](https://github.com/tinper-bee/bee-table/commit/6977e2f))
|
||||
|
||||
|
||||
|
||||
<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)
|
||||
|
||||
|
|
@ -508,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)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,336 +1,333 @@
|
|||
# bee-table
|
||||
|
||||
[](https://www.npmjs.com/package/bee-table)
|
||||
[](https://travis-ci.org/tinper-bee/bee-table)
|
||||
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
||||
[](https://david-dm.org/tinper-bee/bee-table)
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
|
||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||
* 动态设置过滤列
|
||||
* 排序合计
|
||||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
||||
## 使用方法
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||
{
|
||||
title: '操作', dataIndex: '', key: 'd', render() {
|
||||
return <a href="#">一些操作</a>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||
];
|
||||
|
||||
class Demo extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Table
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 列的配置表，具体配置见下表 | array | - |
|
||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||
| style | 添加到table上的style | object | {} |
|
||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
||||
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
||||
| showHeader | 是否显示表头 | bool | true |
|
||||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number / 百分比, y: number }` | {} |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
### Column
|
||||
|
||||
|参数|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|key|列的键|string|-|
|
||||
|className|传入列的classname|String |-|
|
||||
|colSpan|该列的colSpan|Number|-|
|
||||
|title|列的标题|node|-|
|
||||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
||||
* 在tinper-bee中引用
|
||||
|
||||
```js
|
||||
|
||||
import {Table} from 'tinper-bee'
|
||||
|
||||
```
|
||||
|
||||
* 单独安装bee-table 方式
|
||||
|
||||
```js
|
||||
|
||||
import Table from 'bee-table'
|
||||
|
||||
```
|
||||
|
||||
## 如何引用增强功能(multiSelect,sort,sum)
|
||||
|
||||
|
||||
```js
|
||||
|
||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
|
||||
#### data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
### sort
|
||||
|
||||
排序功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
|
||||
|
||||
|
||||
### sum
|
||||
|
||||
合计功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
|
||||
### filterColumn
|
||||
|
||||
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
||||
|
||||
|
||||
### dragColumn
|
||||
|
||||
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
||||
|
||||
#### dragColumn新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的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;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| 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 | - |
|
||||
|
||||
### DateRender
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见bee-datepicker组件参数配置
|
||||
|
||||
|
||||
### SelectRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-select`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见bee-select组件参数配置
|
||||
|
||||
|
||||
## 开发调试
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/tinper-bee/bee-table
|
||||
$ cd bee-table
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
|
||||
# bee-table
|
||||
|
||||
[](https://www.npmjs.com/package/bee-table)
|
||||
[](https://travis-ci.org/tinper-bee/bee-table)
|
||||
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
||||
[](https://david-dm.org/tinper-bee/bee-table)
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
|
||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||
* 动态设置过滤列
|
||||
* 排序合计
|
||||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
||||
## 使用方法
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||
{
|
||||
title: '操作', dataIndex: '', key: 'd', render() {
|
||||
return <a href="#">一些操作</a>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||
];
|
||||
|
||||
class Demo extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Table
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 列的配置表，具体配置见下表 | array | - |
|
||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||
| style | 添加到table上的style | object | {} |
|
||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
||||
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
||||
| showHeader | 是否显示表头 | bool | true |
|
||||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
### Column
|
||||
|
||||
|参数|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|key|列的键|string|-|
|
||||
|className|传入列的classname|String |-|
|
||||
|colSpan|该列的colSpan|Number|-|
|
||||
|title|列的标题|node|-|
|
||||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
||||
* 在tinper-bee中引用
|
||||
|
||||
```js
|
||||
|
||||
import {Table} from 'tinper-bee'
|
||||
|
||||
```
|
||||
|
||||
* 单独安装bee-table 方式
|
||||
|
||||
```js
|
||||
|
||||
import Table from 'bee-table'
|
||||
|
||||
```
|
||||
|
||||
## 如何引用增强功能(multiSelect,sort,sum)
|
||||
|
||||
|
||||
```js
|
||||
|
||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
|
||||
#### data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
### sort
|
||||
|
||||
排序功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
|
||||
|
||||
|
||||
### sum
|
||||
|
||||
合计功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
|
||||
### filterColumn
|
||||
|
||||
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
||||
|
||||
|
||||
### dragColumn
|
||||
|
||||
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
||||
|
||||
#### dragColumn新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的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;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| 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 | - |
|
||||
|
||||
### DateRender
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见bee-datepicker组件参数配置
|
||||
|
||||
|
||||
### SelectRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-select`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见bee-select组件参数配置
|
||||
|
||||
|
||||
## 开发调试
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/tinper-bee/bee-table
|
||||
$ cd bee-table
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ var _ColumnGroup = require('./ColumnGroup');
|
|||
|
||||
var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
|
||||
|
||||
var _beeIcon = require('bee-icon');
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
var _lodash = require('lodash');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
|
|
@ -29,27 +27,13 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
|
|||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
//行控制管理
|
||||
|
||||
var ColumnManager = function () {
|
||||
function ColumnManager(columns, elements, originWidth, rowDraggAble) {
|
||||
function ColumnManager(columns, elements, originWidth) {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
this._cached = {};
|
||||
|
||||
//判断是否使用行拖拽
|
||||
if (rowDraggAble) {
|
||||
var dragHandleColumn = [{
|
||||
className: "drag-handle-column",
|
||||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
fixed: "left",
|
||||
width: 49,
|
||||
render: function render() {
|
||||
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
|
||||
}
|
||||
}];
|
||||
columns = dragHandleColumn.concat(columns);
|
||||
}
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
|
@ -324,6 +308,13 @@ var ColumnManager = function () {
|
|||
return leafColumns;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.isIE = function isIE() {
|
||||
if (window) {
|
||||
if (!!window.ActiveXObject || "ActiveXObject" in window) return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
return ColumnManager;
|
||||
}();
|
||||
|
||||
|
|
|
|||
|
|
@ -56,27 +56,16 @@ var ExpandIcon = function (_Component) {
|
|||
needIndentSpaced = _props.needIndentSpaced,
|
||||
expanded = _props.expanded,
|
||||
record = _props.record,
|
||||
isHiddenExpandIcon = _props.isHiddenExpandIcon,
|
||||
expandedIcon = _props.expandedIcon,
|
||||
collapsedIcon = _props.collapsedIcon;
|
||||
isHiddenExpandIcon = _props.isHiddenExpandIcon;
|
||||
|
||||
if (expandable && !isHiddenExpandIcon) {
|
||||
var expandClassName = expanded ? 'expanded' : 'collapsed';
|
||||
var currentIcon = _react2["default"].createElement('span', {
|
||||
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName
|
||||
return _react2["default"].createElement('span', {
|
||||
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
|
||||
onClick: function onClick(e) {
|
||||
return onExpand(!expanded, record, e);
|
||||
}
|
||||
});
|
||||
if (expanded && expandedIcon) {
|
||||
currentIcon = expandedIcon;
|
||||
} else if (!expanded && collapsedIcon) {
|
||||
currentIcon = collapsedIcon;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ onClick: function onClick(e) {
|
||||
return onExpand(!expanded, record, e);
|
||||
}, className: 'expand-icon-con' },
|
||||
currentIcon
|
||||
);
|
||||
} else if (needIndentSpaced || isHiddenExpandIcon) {
|
||||
return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ var FilterDropDown = function (_Component) {
|
|||
_beeButton2["default"],
|
||||
{
|
||||
shape: 'border',
|
||||
style: { marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0 }
|
||||
style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }
|
||||
},
|
||||
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858' }, type: 'uf-filter' })
|
||||
)
|
||||
|
|
@ -293,7 +293,7 @@ var FilterDropDown = function (_Component) {
|
|||
{
|
||||
onClick: this.onClickClear,
|
||||
shape: 'border',
|
||||
style: { marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }
|
||||
style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }
|
||||
},
|
||||
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
|
||||
)
|
||||
|
|
|
|||
|
|
@ -248,7 +248,6 @@ var FilterType = function (_Component) {
|
|||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
|
||||
size: 'sm',
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeSelect
|
||||
})),
|
||||
|
|
|
|||
|
|
@ -173,9 +173,9 @@
|
|||
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #212121;
|
||||
color: #666;
|
||||
position: relative;
|
||||
line-height: 1.33;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
|
|
@ -191,25 +191,19 @@
|
|||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 16px; }
|
||||
text-align: left; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
line-height: 1.33; }
|
||||
border-bottom: 1px solid rgb(193, 199, 208); }
|
||||
.u-table td a {
|
||||
color: #2196F3; }
|
||||
.u-table td a:hover {
|
||||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table thead tr > th:last-child {
|
||||
border-right: none; }
|
||||
.u-table tr:hover td .uf-eye {
|
||||
visibility: visible !important; }
|
||||
.u-table tr tr a {
|
||||
|
|
@ -224,30 +218,11 @@
|
|||
.u-table td {
|
||||
padding: 12px 8px;
|
||||
word-break: break-all; }
|
||||
.u-table th.drag-handle-column .uf,
|
||||
.u-table td.drag-handle-column .uf {
|
||||
font-size: 12px;
|
||||
line-height: 12px; }
|
||||
.u-table th.text-center,
|
||||
.u-table td.text-center {
|
||||
text-align: center; }
|
||||
.u-table th.text-right,
|
||||
.u-table td.text-right {
|
||||
text-align: right; }
|
||||
.u-table th .expand-icon-con,
|
||||
.u-table td .expand-icon-con {
|
||||
cursor: pointer; }
|
||||
.u-table-sm td {
|
||||
padding: 8px 8px; }
|
||||
.u-table-lg td {
|
||||
padding: 16px 8px; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important; }
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px; }
|
||||
.u-table tr.filterable th .filterContext {
|
||||
height: 35px; }
|
||||
.u-table tr.filterable th .u-select-selection--single {
|
||||
height: 26px; }
|
||||
.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-scroll {
|
||||
|
|
@ -256,10 +231,6 @@
|
|||
border: 1px solid rgb(193, 199, 208);
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
.u-table-bordered .u-table-header > table {
|
||||
border-bottom: 0; }
|
||||
.u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {
|
||||
border-top: 0px; }
|
||||
.u-table-bordered th {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
box-sizing: border-box; }
|
||||
|
|
@ -269,14 +240,14 @@
|
|||
box-sizing: border-box; }
|
||||
.u-table-drag-border tr th.th-can-not-drag {
|
||||
overflow: hidden; }
|
||||
.u-table-drag-border tr th.th-can-not-drag .u-table-thead-th-drag-gap {
|
||||
display: none; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33); }
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
.u-table.fixed-header-height th {
|
||||
padding: 0px 8px; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
|
|
@ -312,48 +283,34 @@
|
|||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
.u-table-placeholder .table-nodata {
|
||||
font-size: 40px;
|
||||
line-height: 44px; }
|
||||
.u-table-placeholder .table-nodata + span {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
display: block; }
|
||||
.u-table-expand-icon-col {
|
||||
width: 10px; }
|
||||
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
|
||||
background: #fff; }
|
||||
.u-table-row .u-table tr.u-table-row-hover, .u-table-expanded-row .u-table tr.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 0px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
line-height: 16px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
margin-right: 10px; }
|
||||
.u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
|
||||
font-size: 12px;
|
||||
padding: 0; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
content: "."; }
|
||||
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
|
||||
content: "\e639";
|
||||
font-family: "uf"; }
|
||||
content: "-"; }
|
||||
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
|
||||
content: "\e61c";
|
||||
font-family: "uf"; }
|
||||
content: "+"; }
|
||||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #DFE1E6; }
|
||||
background: #f7f7f7; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #DFE1E6; }
|
||||
background: #f7f7f7; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
@ -426,18 +383,13 @@
|
|||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
height: 16px;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-top: -3px; }
|
||||
.u-table-thead th .bee-table-column-sorter i {
|
||||
padding: 0px;
|
||||
font-weight: 600;
|
||||
color: #505F79; }
|
||||
display: inline-block; }
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
|
||||
line-height: 16px;
|
||||
line-height: 6px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
cursor: pointer; }
|
||||
|
|
@ -497,45 +449,36 @@
|
|||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
margin: 0px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
color: #212121; }
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
height: 300px;
|
||||
overflow-y: scroll; }
|
||||
.u-table-filter-column-clear-setting {
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px; }
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-cont {
|
||||
position: relative; }
|
||||
.u-table-filter-column-filter-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
top: 3px;
|
||||
right: 18px;
|
||||
width: 22px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
z-index: 2;
|
||||
background: rgb(241, 242, 245);
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-filter-icon i.uf {
|
||||
padding: 0px;
|
||||
color: #505F79; }
|
||||
background: #f7f7f7; }
|
||||
.u-table-filter-column-filter-iconi.uf {
|
||||
padding: 0px; }
|
||||
.u-table-filter-column-pop-cont-item {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-pop-cont-item .u-checkbox {
|
||||
margin: 0px; }
|
||||
.u-table-filter-column-pop-cont-item span.drop-menu-title {
|
||||
margin-left: -3px;
|
||||
max-width: 132px;
|
||||
width: auto !important;
|
||||
min-width: 56px;
|
||||
.u-table-filter-column-pop-cont-item > span {
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
white-space: nowrap; }
|
||||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
|
|
@ -545,40 +488,7 @@
|
|||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
margin-left: 5px; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
|
||||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
.u-table ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
.u-table ::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
.u-table ::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
.u-table .row-dragg-able {
|
||||
cursor: move; }
|
||||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
height: 40px; }
|
||||
margin: 0px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
@ -768,23 +678,11 @@
|
|||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.filter-wrap .u-form-control {
|
||||
height: 26px; }
|
||||
|
||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
|
||||
height: 26px; }
|
||||
|
||||
.filter-wrap .calendar-picker .u-input-group-btn {
|
||||
line-height: 20px; }
|
||||
|
||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {
|
||||
line-height: 12px; }
|
||||
|
||||
.u-row-hover {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
|
|
@ -797,42 +695,43 @@
|
|||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
|
||||
.header-dispaly-in-row th {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
|
||||
.body-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
|
||||
.body-dispaly-in-row td {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
|
||||
.u-table-drag-hidden-cont {
|
||||
position: absolute;
|
||||
top: -1000px; }
|
||||
::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba; }
|
||||
.u-table-adjustSize-btn.u-button {
|
||||
min-width: 0;
|
||||
padding: 4px 12px; }
|
||||
.u-table-adjustSize-btn.u-button .uf {
|
||||
padding: 0; }
|
||||
.u-table-adjustSize-btn.u-button .uf:first-child {
|
||||
margin-right: 8px; }
|
||||
.u-table-adjustSize-btn.u-button .uf:last-child {
|
||||
font-size: 12px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper:focus {
|
||||
outline: none; }
|
||||
|
||||
.u-editable-table-tp .tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important; }
|
||||
|
||||
.u-editable-table-tp .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
height: 32px; }
|
||||
.u-table-adjustSize-menus.u-dropdown-menu > .u-dropdown-menu-item svg {
|
||||
margin-right: 4px; }
|
||||
|
|
|
|||
|
|
@ -48,15 +48,29 @@ var _beeLoading = require('bee-loading');
|
|||
|
||||
var _beeLoading2 = _interopRequireDefault(_beeLoading);
|
||||
|
||||
var _beeDropdown = require('bee-dropdown');
|
||||
|
||||
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
|
||||
|
||||
var _beeMenus = require('bee-menus');
|
||||
|
||||
var _beeMenus2 = _interopRequireDefault(_beeMenus);
|
||||
|
||||
var _beeButton = require('bee-button');
|
||||
|
||||
var _beeButton2 = _interopRequireDefault(_beeButton);
|
||||
|
||||
var _beeIcon = require('bee-icon');
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _i18n = require('./lib/i18n');
|
||||
var _svg = require('./svg');
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
var _svg2 = _interopRequireDefault(_svg);
|
||||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
var _Portal = require('bee-overlay/build/Portal');
|
||||
|
||||
var _Portal2 = _interopRequireDefault(_Portal);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
|
|
@ -111,9 +125,9 @@ var propTypes = {
|
|||
syncHover: _propTypes2["default"].bool,
|
||||
tabIndex: _propTypes2["default"].string,
|
||||
hoverContent: _propTypes2["default"].func,
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDropRow: _propTypes2["default"].func
|
||||
canConfigureTableSize: _propTypes2["default"].bool,
|
||||
getToolbarContainer: _propTypes2["default"].func,
|
||||
ieDefaultLeft: _propTypes2["default"].number
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -148,18 +162,25 @@ var defaultProps = {
|
|||
getBodyWrapper: function getBodyWrapper(body) {
|
||||
return body;
|
||||
},
|
||||
// emptyText: () => <div><Icon type="uf-nodata" className="table-nodata"></Icon><span>{locale["no_data"]}</span></div>,
|
||||
emptyText: function emptyText() {
|
||||
return 'No Data';
|
||||
},
|
||||
columns: [],
|
||||
minColumnWidth: 80,
|
||||
minColumnWidth: 80, //设置Column列最小宽度
|
||||
locale: {},
|
||||
syncHover: true,
|
||||
setRowHeight: function setRowHeight() {},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
size: 'md',
|
||||
rowDraggAble: false,
|
||||
onDropRow: function onDropRow() {}
|
||||
canConfigureTableSize: false,
|
||||
ieDefaultLeft: 20
|
||||
};
|
||||
|
||||
var tableSizeIcons = {
|
||||
'sm': _svg2["default"].compact,
|
||||
'md': _svg2["default"].moderate,
|
||||
'lg': _svg2["default"].easy
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -170,53 +191,6 @@ var Table = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.resize = function () {
|
||||
(0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
|
||||
_this.computeTableWidth();
|
||||
var renderFlag = _this.state.renderFlag;
|
||||
_this.setState({
|
||||
renderFlag: !renderFlag
|
||||
});
|
||||
};
|
||||
|
||||
_this.getTableUID = function () {
|
||||
var uid = "_table_uid_" + new Date().getTime();
|
||||
_this.tableUid = uid;
|
||||
var div = document.createElement("div");
|
||||
// div.className = "u-table-drag-hidden-cont";
|
||||
div.className = "u-table-drag-hidden-cont";
|
||||
div.id = uid;
|
||||
_this.contentTable.appendChild(div);
|
||||
};
|
||||
|
||||
_this.onDragRow = function (currentKey, targetKey) {
|
||||
var data = _this.state.data,
|
||||
currentIndex = void 0,
|
||||
targetIndex = void 0,
|
||||
record = void 0;
|
||||
data.forEach(function (da, i) {
|
||||
// tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
|
||||
var trKey = da.key ? da.key : _this.getRowKey(da, i);
|
||||
if (trKey == currentKey) {
|
||||
currentIndex = i;
|
||||
record = da;
|
||||
}
|
||||
if (trKey == targetKey) {
|
||||
targetIndex = i;
|
||||
}
|
||||
});
|
||||
data = _this.swapArray(data, currentIndex, targetIndex);
|
||||
_this.props.onDropRow && _this.props.onDropRow(data, record);
|
||||
_this.setState({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
_this.swapArray = function (arr, index1, index2) {
|
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
return arr;
|
||||
};
|
||||
|
||||
_this.renderDragHideTable = function () {
|
||||
var _this$props = _this.props,
|
||||
columns = _this$props.columns,
|
||||
|
|
@ -264,9 +238,85 @@ var Table = function (_Component) {
|
|||
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
|
||||
};
|
||||
|
||||
_this.getTableToolbar = function () {
|
||||
var clsPrefix = _this.props.clsPrefix;
|
||||
var tableSize = _this.state.tableSize;
|
||||
|
||||
var menu = _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{ className: clsPrefix + '-adjustSize-menus', onSelect: _this.onConfigMenuSelect, defaultSelectedKeys: ['md'] },
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'sm' },
|
||||
_svg2["default"].compact,
|
||||
'\u7D27\u51D1\u578B'
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'md' },
|
||||
_svg2["default"].moderate,
|
||||
'\u9002\u4E2D'
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
_beeMenus2["default"].Item,
|
||||
{ key: 'lg' },
|
||||
_svg2["default"].easy,
|
||||
'\u5BBD\u677E\u578B'
|
||||
)
|
||||
);
|
||||
return _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
trigger: ['hover'],
|
||||
overlay: menu,
|
||||
placement: 'bottomRight',
|
||||
animation: 'slide-up' },
|
||||
_react2["default"].createElement(
|
||||
_beeButton2["default"],
|
||||
{ bordered: true, className: clsPrefix + '-adjustSize-btn' },
|
||||
tableSizeIcons[tableSize],
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-arrow-down' })
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
_this.onConfigMenuSelect = function (_ref) {
|
||||
var key = _ref.key;
|
||||
var _this$state = _this.state,
|
||||
tableSizeConf = _this$state.tableSizeConf,
|
||||
tableSize = _this$state.tableSize;
|
||||
|
||||
if (key === 'sm') {
|
||||
tableSizeConf = {
|
||||
height: 30,
|
||||
headerHeight: 35,
|
||||
fontSize: 12
|
||||
};
|
||||
tableSize = 'sm';
|
||||
} else if (key === 'lg') {
|
||||
tableSizeConf = {
|
||||
height: 50,
|
||||
headerHeight: 50,
|
||||
fontSize: 14
|
||||
};
|
||||
tableSize = 'lg';
|
||||
} else if (key === 'md') {
|
||||
tableSizeConf = {
|
||||
height: 40,
|
||||
headerHeight: 40,
|
||||
fontSize: 12
|
||||
};
|
||||
tableSize = 'md';
|
||||
}
|
||||
_this.setState({
|
||||
tableSizeConf: tableSizeConf,
|
||||
tableSize: tableSize
|
||||
});
|
||||
};
|
||||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble);
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
_this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -284,7 +334,9 @@ var Table = function (_Component) {
|
|||
currentHoverKey: null,
|
||||
scrollPosition: 'left',
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: []
|
||||
fixedColumnsBodyRowsHeight: [],
|
||||
tableSizeConf: null, //实现表格动态缩放
|
||||
tableSize: 'md'
|
||||
};
|
||||
|
||||
_this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
|
||||
|
|
@ -314,12 +366,10 @@ var Table = function (_Component) {
|
|||
_this.handleRowHover = _this.handleRowHover.bind(_this);
|
||||
_this.computeTableWidth = _this.computeTableWidth.bind(_this);
|
||||
_this.onBodyMouseLeave = _this.onBodyMouseLeave.bind(_this);
|
||||
_this.tableUid = null;
|
||||
return _this;
|
||||
}
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
this.getTableUID();
|
||||
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||||
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
|
||||
setTimeout(this.resetScrollX, 300);
|
||||
|
|
@ -333,7 +383,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
|
||||
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -350,15 +400,15 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns);
|
||||
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
|
||||
this.scrollTop = this.bodyTable.scrollTop;
|
||||
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable) {
|
||||
this.scrollTop = this.refs.bodyTable.scrollTop;
|
||||
}
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children);
|
||||
}
|
||||
//适配lazyload
|
||||
if (nextProps.scrollTop > -1) {
|
||||
// this.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
// this.refs.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
this.scrollTop = nextProps.scrollTop;
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
|
|
@ -368,10 +418,6 @@ var Table = function (_Component) {
|
|||
if (nextProps.resetScroll) {
|
||||
this.resetScrollX();
|
||||
}
|
||||
// fix:模态框中使用table，计算的滚动条宽度为0的bug
|
||||
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||
}
|
||||
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
};
|
||||
|
|
@ -389,13 +435,12 @@ var Table = function (_Component) {
|
|||
if (this.scrollTop > -1) {
|
||||
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
|
||||
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
|
||||
this.bodyTable.scrollTop = this.scrollTop;
|
||||
this.refs.bodyTable.scrollTop = this.scrollTop;
|
||||
this.scrollTop = -1;
|
||||
}
|
||||
if (prevProps.data.length === 0 || this.props.data.length === 0) {
|
||||
this.resetScrollX();
|
||||
}
|
||||
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
};
|
||||
|
|
@ -452,22 +497,14 @@ var Table = function (_Component) {
|
|||
var props = this.props;
|
||||
var y = props.scroll && props.scroll.y;
|
||||
if (y) {
|
||||
var bodyH = this.bodyTable.clientHeight;
|
||||
var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
|
||||
var bodyH = this.refs.bodyTable.clientHeight;
|
||||
var bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight;
|
||||
var rightBodyTable = this.refs.fixedColumnsBodyRight;
|
||||
// const leftBodyTable = this.refs.fixedColumnsBodyLeft;
|
||||
var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
|
||||
this.bodyTable.style.overflowY = overflowy;
|
||||
|
||||
this.headTable.style.overflowY = overflowy;
|
||||
rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
|
||||
// 没有纵向滚动条时，表头横向滚动条根据内容动态显示 待验证
|
||||
// if(overflowy == 'auto'){
|
||||
// this.fixedHeadTable && (this.fixedHeadTable.style.overflowX = 'auto');
|
||||
// rightBodyTable && (rightBodyTable.style.overflowX = 'auto');
|
||||
// leftBodyTable && (leftBodyTable.style.overflowX = 'auto');
|
||||
// }
|
||||
|
||||
if (bodyContentH <= bodyH) {
|
||||
this.refs.bodyTable.style.overflowY = 'auto';
|
||||
this.refs.headTable.style.overflowY = 'auto';
|
||||
rightBodyTable && (rightBodyTable.style.overflowY = 'auto');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -525,6 +562,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed) {
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
onFilterChange = _props.onFilterChange,
|
||||
|
|
@ -561,7 +599,14 @@ var Table = function (_Component) {
|
|||
});
|
||||
}
|
||||
|
||||
var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
|
||||
// const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
|
||||
var trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : headerHeight ? { height: headerHeight } : null;
|
||||
if (tableSizeConf && tableSizeConf.headerHeight) {
|
||||
trStyle = {
|
||||
height: tableSizeConf.headerHeight,
|
||||
fontSize: tableSizeConf.fontSize
|
||||
};
|
||||
}
|
||||
var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
|
||||
var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey, onDropBorder: onDropBorder } : {};
|
||||
var contentWidthDiff = 0;
|
||||
|
|
@ -726,26 +771,9 @@ var Table = function (_Component) {
|
|||
indent: 1,
|
||||
expandable: false,
|
||||
store: this.store,
|
||||
dragborderKey: this.props.dragborderKey,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow
|
||||
dragborderKey: this.props.dragborderKey
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 行拖拽结束时触发
|
||||
* @param currentKey 当前拖拽目标的key
|
||||
* @param targetKey 拖拽结束时，目标位置的key
|
||||
*/
|
||||
|
||||
/**
|
||||
* 数组元素交换位置
|
||||
* @param {array} arr 数组
|
||||
* @param {number} index1 添加项目的位置
|
||||
* @param {number} index2 删除项目的位置
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
@ -758,6 +786,8 @@ var Table = function (_Component) {
|
|||
* @returns
|
||||
* @memberof Table
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
|
||||
var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
|
||||
|
||||
|
|
@ -765,7 +795,9 @@ var Table = function (_Component) {
|
|||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
var expandRowByClick = props.expandRowByClick;
|
||||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||||
var _state2 = this.state,
|
||||
fixedColumnsBodyRowsHeight = _state2.fixedColumnsBodyRowsHeight,
|
||||
tableSizeConf = _state2.tableSizeConf;
|
||||
|
||||
var rst = [];
|
||||
|
||||
|
|
@ -786,7 +818,6 @@ var Table = function (_Component) {
|
|||
}
|
||||
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
||||
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
||||
var lazyEndIndex = props.lazyLoad && props.lazyLoad.endIndex ? props.lazyLoad.endIndex : -1;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var isHiddenExpandIcon = void 0;
|
||||
var record = data[i];
|
||||
|
|
@ -819,6 +850,10 @@ var Table = function (_Component) {
|
|||
} else if (fixed || props.heightConsistent) {
|
||||
height = fixedColumnsBodyRowsHeight[fixedIndex];
|
||||
}
|
||||
// 如果切换了配置，以自定义配置的高度为准
|
||||
if (tableSizeConf && tableSizeConf.headerHeight) {
|
||||
height = tableSizeConf.height;
|
||||
}
|
||||
|
||||
var leafColumns = void 0;
|
||||
if (fixed === 'left') {
|
||||
|
|
@ -848,7 +883,7 @@ var Table = function (_Component) {
|
|||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
needIndentSpaced: needIndentSpaced,
|
||||
className: className + ' ' + (this.props.rowDraggAble ? ' row-dragg-able ' : ''),
|
||||
className: className,
|
||||
record: record,
|
||||
expandIconAsCell: expandIconAsCell,
|
||||
onDestroy: this.onRowDestroy,
|
||||
|
|
@ -879,15 +914,7 @@ var Table = function (_Component) {
|
|||
fixedIndex: fixedIndex + lazyCurrentIndex,
|
||||
rootIndex: rootIndex,
|
||||
syncHover: props.syncHover,
|
||||
bodyDisplayInRow: props.bodyDisplayInRow,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
onDragRow: this.onDragRow,
|
||||
contentTable: this.contentTable,
|
||||
tableUid: this.tableUid,
|
||||
expandedIcon: props.expandedIcon,
|
||||
collapsedIcon: props.collapsedIcon,
|
||||
lazyStartIndex: lazyCurrentIndex,
|
||||
lazyEndIndex: lazyEndIndex
|
||||
tableSizeConf: tableSizeConf
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -920,11 +947,11 @@ var Table = function (_Component) {
|
|||
var cols = [];
|
||||
var self = this;
|
||||
|
||||
var _state2 = this.state,
|
||||
_state2$contentWidthD = _state2.contentWidthDiff,
|
||||
contentWidthDiff = _state2$contentWidthD === undefined ? 0 : _state2$contentWidthD,
|
||||
_state2$lastShowIndex = _state2.lastShowIndex,
|
||||
lastShowIndex = _state2$lastShowIndex === undefined ? 0 : _state2$lastShowIndex;
|
||||
var _state3 = this.state,
|
||||
_state3$contentWidthD = _state3.contentWidthDiff,
|
||||
contentWidthDiff = _state3$contentWidthD === undefined ? 0 : _state3$contentWidthD,
|
||||
_state3$lastShowIndex = _state3.lastShowIndex,
|
||||
lastShowIndex = _state3$lastShowIndex === undefined ? 0 : _state3$lastShowIndex;
|
||||
|
||||
if (this.props.expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(_react2["default"].createElement('col', {
|
||||
|
|
@ -956,7 +983,7 @@ var Table = function (_Component) {
|
|||
if (!fixed && c.fixed) {
|
||||
fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body';
|
||||
}
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: _this3.props.minColumnWidth }, className: fixedClass });
|
||||
}));
|
||||
return _react2["default"].createElement(
|
||||
'colgroup',
|
||||
|
|
@ -990,11 +1017,10 @@ var Table = function (_Component) {
|
|||
_props3$scroll = _props3.scroll,
|
||||
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
|
||||
getBodyWrapper = _props3.getBodyWrapper,
|
||||
expandIconAsCell = _props3.expandIconAsCell,
|
||||
footerScroll = _props3.footerScroll,
|
||||
headerScroll = _props3.headerScroll;
|
||||
var _props4 = this.props,
|
||||
useFixedHeader = _props4.useFixedHeader,
|
||||
data = _props4.data;
|
||||
var useFixedHeader = this.props.useFixedHeader;
|
||||
|
||||
var bodyStyle = _extends({}, this.props.bodyStyle);
|
||||
var headStyle = {};
|
||||
|
|
@ -1056,12 +1082,7 @@ var Table = function (_Component) {
|
|||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
}
|
||||
} else {
|
||||
// 没有数据时，表头滚动条隐藏问题
|
||||
if (data.length == 0 && this.domWidthDiff < 0) {
|
||||
headStyle.marginBottom = '0px';
|
||||
} else {
|
||||
headStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
}
|
||||
headStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1092,7 +1113,7 @@ var Table = function (_Component) {
|
|||
var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
|
||||
return _react2["default"].createElement(
|
||||
'table',
|
||||
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
||||
{ id: 'bee-table-uid', className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
||||
_this4.getColGroup(columns, fixed),
|
||||
hasHead ? _this4.getHeader(columns, fixed) : null,
|
||||
tableBody
|
||||
|
|
@ -1106,9 +1127,7 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{
|
||||
className: clsPrefix + '-header',
|
||||
ref: function ref(el) {
|
||||
fixed ? _this4.fixedHeadTable = el : _this4.headTable = el;
|
||||
},
|
||||
ref: fixed ? null : 'headTable',
|
||||
style: headStyle,
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
|
|
@ -1122,9 +1141,7 @@ var Table = function (_Component) {
|
|||
{
|
||||
className: clsPrefix + '-body',
|
||||
style: bodyStyle,
|
||||
ref: function ref(el) {
|
||||
_this4.bodyTable = el;
|
||||
},
|
||||
ref: 'bodyTable',
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll,
|
||||
|
|
@ -1166,8 +1183,9 @@ var Table = function (_Component) {
|
|||
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
var parStyle = {};
|
||||
var expandIconWidth = expandIconAsCell ? 33 : 0;
|
||||
if (!fixed) {
|
||||
parStyle = { 'marginLeft': leftFixedWidth, 'marginRight': rightFixedWidth };
|
||||
parStyle = { 'marginLeft': this.columnManager.isIE() ? leftFixedWidth + expandIconWidth + Number(this.props.ieDefaultLeft) : leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1178,9 +1196,9 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getTitle = function getTitle() {
|
||||
var _props5 = this.props,
|
||||
title = _props5.title,
|
||||
clsPrefix = _props5.clsPrefix;
|
||||
var _props4 = this.props,
|
||||
title = _props4.title,
|
||||
clsPrefix = _props4.clsPrefix;
|
||||
|
||||
return title ? _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1190,9 +1208,9 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getFooter = function getFooter() {
|
||||
var _props6 = this.props,
|
||||
footer = _props6.footer,
|
||||
clsPrefix = _props6.clsPrefix;
|
||||
var _props5 = this.props,
|
||||
footer = _props5.footer,
|
||||
clsPrefix = _props5.clsPrefix;
|
||||
|
||||
return footer ? _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1202,26 +1220,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getEmptyText = function getEmptyText() {
|
||||
var _props7 = this.props,
|
||||
defaultEmptyText = _props7.emptyText,
|
||||
clsPrefix = _props7.clsPrefix,
|
||||
data = _props7.data;
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var emptyText = defaultEmptyText !== undefined ? defaultEmptyText : function () {
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
null,
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
locale["no_data"]
|
||||
)
|
||||
);
|
||||
};
|
||||
var _props6 = this.props,
|
||||
emptyText = _props6.emptyText,
|
||||
clsPrefix = _props6.clsPrefix,
|
||||
data = _props6.data;
|
||||
|
||||
return !data.length ? _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1246,15 +1248,15 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props8 = this.props,
|
||||
clsPrefix = _props8.clsPrefix,
|
||||
height = _props8.height,
|
||||
headerHeight = _props8.headerHeight,
|
||||
columns = _props8.columns,
|
||||
heightConsistent = _props8.heightConsistent;
|
||||
var _props7 = this.props,
|
||||
clsPrefix = _props7.clsPrefix,
|
||||
height = _props7.height,
|
||||
headerHeight = _props7.headerHeight,
|
||||
columns = _props7.columns,
|
||||
heightConsistent = _props7.heightConsistent;
|
||||
|
||||
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
||||
var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
|
||||
var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
||||
|
|
@ -1296,11 +1298,11 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.resetScrollX = function resetScrollX() {
|
||||
if (this.headTable) {
|
||||
this.headTable.scrollLeft = 0;
|
||||
if (this.refs.headTable) {
|
||||
this.refs.headTable.scrollLeft = 0;
|
||||
}
|
||||
if (this.bodyTable) {
|
||||
this.bodyTable.scrollLeft = 0;
|
||||
if (this.refs.bodyTable) {
|
||||
this.refs.bodyTable.scrollLeft = 0;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1334,14 +1336,15 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
|
||||
var headTable = this.headTable;
|
||||
var _props9 = this.props,
|
||||
_props9$scroll = _props9.scroll,
|
||||
scroll = _props9$scroll === undefined ? {} : _props9$scroll,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
handleScrollY = _props9.handleScrollY,
|
||||
handleScrollX = _props9.handleScrollX;
|
||||
var _props8 = this.props,
|
||||
_props8$scroll = _props8.scroll,
|
||||
scroll = _props8$scroll === undefined ? {} : _props8$scroll,
|
||||
clsPrefix = _props8.clsPrefix,
|
||||
handleScrollY = _props8.handleScrollY,
|
||||
handleScrollX = _props8.handleScrollX;
|
||||
var _refs = this.refs,
|
||||
headTable = _refs.headTable,
|
||||
bodyTable = _refs.bodyTable,
|
||||
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
|
||||
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
|
||||
// Prevent scrollTop setter trigger onScroll event
|
||||
|
|
@ -1352,10 +1355,10 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (e.target.scrollLeft !== this.lastScrollLeft) {
|
||||
var position = '';
|
||||
if (e.target === this.bodyTable && headTable) {
|
||||
if (e.target === bodyTable && headTable) {
|
||||
headTable.scrollLeft = e.target.scrollLeft;
|
||||
} else if (e.target === headTable && this.bodyTable) {
|
||||
this.bodyTable.scrollLeft = e.target.scrollLeft;
|
||||
} else if (e.target === headTable && bodyTable) {
|
||||
bodyTable.scrollLeft = e.target.scrollLeft;
|
||||
}
|
||||
if (e.target.scrollLeft === 0) {
|
||||
position = 'left';
|
||||
|
|
@ -1379,8 +1382,8 @@ var Table = function (_Component) {
|
|||
if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) {
|
||||
fixedColumnsBodyRight.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if (this.bodyTable && e.target !== this.bodyTable) {
|
||||
this.bodyTable.scrollTop = e.target.scrollTop;
|
||||
if (bodyTable && e.target !== bodyTable) {
|
||||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if (this.hoverDom) {
|
||||
this.hoverDom.style.display = 'none';
|
||||
|
|
@ -1397,10 +1400,10 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex) {
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
var _props10 = this.props,
|
||||
syncHover = _props10.syncHover,
|
||||
onRowHover = _props10.onRowHover,
|
||||
data = _props10.data;
|
||||
var _props9 = this.props,
|
||||
syncHover = _props9.syncHover,
|
||||
onRowHover = _props9.onRowHover,
|
||||
data = _props9.data;
|
||||
|
||||
var record = data[currentIndex];
|
||||
// 固定列、或者含有hoverdom时情况下同步hover状态
|
||||
|
|
@ -1417,8 +1420,8 @@ var Table = function (_Component) {
|
|||
if (td) {
|
||||
var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
|
||||
var top = td.offsetTop - scrollTop;
|
||||
if (this.headTable) {
|
||||
top = top + this.headTable.clientHeight;
|
||||
if (this.refs.headTable) {
|
||||
top = top + this.refs.headTable.clientHeight;
|
||||
}
|
||||
this.hoverDom.style.top = top + 'px';
|
||||
this.hoverDom.style.height = td.offsetHeight + 'px';
|
||||
|
|
@ -1431,12 +1434,19 @@ var Table = function (_Component) {
|
|||
onRowHover && onRowHover(currentIndex, record);
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义设置表格行高、字体大小
|
||||
*/
|
||||
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this6 = this;
|
||||
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
|
||||
var className = props.clsPrefix;
|
||||
if (props.className) {
|
||||
className += ' ' + props.className;
|
||||
|
|
@ -1449,14 +1459,11 @@ var Table = function (_Component) {
|
|||
}
|
||||
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
||||
//如果传入height说明是固定高度
|
||||
if (props.height) {
|
||||
if (props.height || tableSizeConf && tableSizeConf.height) {
|
||||
className += ' fixed-height';
|
||||
}
|
||||
if (props.bodyDisplayInRow) {
|
||||
className += ' body-dispaly-in-row';
|
||||
}
|
||||
if (props.headerDisplayInRow) {
|
||||
className += ' header-dispaly-in-row';
|
||||
if (props.headerHeight || tableSizeConf && tableSizeConf.headerHeight) {
|
||||
className += ' fixed-header-height';
|
||||
}
|
||||
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
|
||||
var loading = props.loading;
|
||||
|
|
@ -1465,19 +1472,22 @@ var Table = function (_Component) {
|
|||
show: loading
|
||||
};
|
||||
}
|
||||
if (props.size) {
|
||||
className += ' ' + clsPrefix + '-' + props.size;
|
||||
}
|
||||
if (hasFixedLeft) {
|
||||
className += ' has-fixed-left';
|
||||
}
|
||||
|
||||
var portal = props.canConfigureTableSize && typeof window !== 'undefined' && props.getToolbarContainer ? _react2["default"].createElement(
|
||||
_Portal2["default"],
|
||||
{ container: props.getToolbarContainer },
|
||||
this.getTableToolbar()
|
||||
) : this.getTableToolbar();
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this6.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
props.canConfigureTableSize && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-toolbar' },
|
||||
portal
|
||||
),
|
||||
this.getTitle(),
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1489,7 +1499,7 @@ var Table = function (_Component) {
|
|||
this.getEmptyText(),
|
||||
this.getFooter()
|
||||
),
|
||||
hasFixedLeft && _react2["default"].createElement(
|
||||
this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-fixed-left' },
|
||||
this.getLeftFixedTable()
|
||||
|
|
@ -1521,9 +1531,6 @@ var Table = function (_Component) {
|
|||
|
||||
Table.propTypes = propTypes;
|
||||
Table.defaultProps = defaultProps;
|
||||
Table.contextTypes = {
|
||||
beeLocale: _propTypes2["default"].object
|
||||
};
|
||||
|
||||
exports["default"] = Table;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -73,10 +73,7 @@ var TableCell = function (_Component) {
|
|||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column,
|
||||
fixed = _props2.fixed,
|
||||
showSum = _props2.showSum,
|
||||
bodyDisplayInRow = _props2.bodyDisplayInRow,
|
||||
lazyStartIndex = _props2.lazyStartIndex,
|
||||
lazyEndIndex = _props2.lazyEndIndex;
|
||||
showSum = _props2.showSum;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render;
|
||||
var _column$className = column.className,
|
||||
|
|
@ -86,14 +83,13 @@ var TableCell = function (_Component) {
|
|||
var text = _objectPath2["default"].get(record, dataIndex);
|
||||
var tdProps = void 0;
|
||||
var colSpan = void 0;
|
||||
var rowSpan = void 0,
|
||||
title = void 0;
|
||||
var rowSpan = void 0;
|
||||
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
||||
rowSpan = tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
|
|
@ -108,7 +104,7 @@ var TableCell = function (_Component) {
|
|||
className: clsPrefix + '-indent indent-level-' + indent
|
||||
}) : null;
|
||||
|
||||
if (lazyStartIndex !== index && (rowSpan === 0 || colSpan === 0)) {
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
if (tdProps && tdProps.mergeEndIndex && index < tdProps.mergeEndIndex && rowSpan === 0) {
|
||||
|
|
@ -122,18 +118,13 @@ var TableCell = function (_Component) {
|
|||
if (column.textAlign) {
|
||||
className = className + (' text-' + column.textAlign);
|
||||
}
|
||||
if (typeof text == 'string' && bodyDisplayInRow) {
|
||||
title = text;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
colSpan: colSpan,
|
||||
rowSpan: rowSpan,
|
||||
className: className,
|
||||
onClick: this.handleClick,
|
||||
title: title
|
||||
|
||||
onClick: this.handleClick
|
||||
},
|
||||
indentText,
|
||||
expandIcon,
|
||||
|
|
|
|||
|
|
@ -466,7 +466,7 @@ var TableHeader = function (_Component) {
|
|||
_this.drag = {
|
||||
option: ''
|
||||
};
|
||||
_this.minWidth = 80; //确定最小宽度就是80
|
||||
_this.minWidth = props.minColumnWidth ? props.minColumnWidth : 80; //确定最小宽度就是80
|
||||
_this.table = null;
|
||||
_this._thead = null; //当前对象
|
||||
_this.event = false; //避免多次绑定问题
|
||||
|
|
@ -515,7 +515,9 @@ var TableHeader = function (_Component) {
|
|||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
|
||||
if (contentTable.querySelector('.u-table-scroll .u-table-body')) {
|
||||
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
|
||||
}
|
||||
}
|
||||
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ var _propTypes = require('prop-types');
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require('./utils');
|
||||
|
||||
var _TableCell = require('./TableCell');
|
||||
|
||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||
|
|
@ -54,9 +52,7 @@ var propTypes = {
|
|||
indentSize: _propTypes2["default"].number,
|
||||
expandIconAsCell: _propTypes2["default"].bool,
|
||||
expandRowByClick: _propTypes2["default"].bool,
|
||||
store: _propTypes2["default"].object.isRequired,
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDragRow: _propTypes2["default"].func
|
||||
store: _propTypes2["default"].object.isRequired
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -69,9 +65,7 @@ var defaultProps = {
|
|||
onHover: function onHover() {},
|
||||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false
|
||||
// onDragRow:()=>{}
|
||||
setRowParentIndex: function setRowParentIndex() {}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -82,206 +76,6 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.initEvent = function () {
|
||||
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
|
||||
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
|
||||
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
|
||||
|
||||
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, '', _this.element);
|
||||
};
|
||||
|
||||
_this.removeDragAbleEvent = function () {
|
||||
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
|
||||
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
|
||||
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
|
||||
|
||||
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, 'remove', _this.element);
|
||||
};
|
||||
|
||||
_this.onDragStart = function (e) {
|
||||
if (!_this.props.rowDraggAble) return;
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
_this._dragCurrent = target;
|
||||
|
||||
//TODO 自定义图像后续需要增加。
|
||||
// let crt = this.synchronizeTableTrShadow();
|
||||
// document.getElementById(this.props.tableUid).appendChild(crt);
|
||||
// event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var _this$props = _this.props,
|
||||
rowDraggAble = _this$props.rowDraggAble,
|
||||
onDragRow = _this$props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
var currentKey = event.dataTransfer.getData("text");
|
||||
var targetKey = target.getAttribute("data-row-key");
|
||||
|
||||
if (!targetKey || targetKey === currentKey) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentKey, null);
|
||||
_this.synchronizeTableTr(targetKey, null);
|
||||
// target.setAttribute("style","");
|
||||
// this.synchronizeTrStyle(this.currentIndex,false);
|
||||
}
|
||||
onDragRow && onDragRow(currentKey, targetKey);
|
||||
};
|
||||
|
||||
_this.getTouchDom = function (event) {
|
||||
var currentLocation = event.changedTouches[0];
|
||||
var realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
|
||||
return realTarget;
|
||||
};
|
||||
|
||||
_this.onTouchStart = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
};
|
||||
|
||||
_this.onTouchMove = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
var touchTarget = _this.getTouchDom(event),
|
||||
target = touchTarget.parentNode,
|
||||
targetKey = target.getAttribute("data-row-key");
|
||||
if (!targetKey || targetKey === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
if (_this.cacheCurrentIndex !== targetKey) {
|
||||
//模拟 touchenter toucheleave 事件
|
||||
_this.cacheCurrentIndex && _this.synchronizeTableTr(_this.cacheCurrentIndex, null); //去掉虚线
|
||||
_this.synchronizeTableTr(targetKey, true); //添加虚线
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.onTouchEnd = function (e) {
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
currentKey = _this.currentIndex,
|
||||
//拖拽行的key
|
||||
touchTarget = _this.getTouchDom(event),
|
||||
//当前触摸的DOM节点
|
||||
target = touchTarget.parentNode,
|
||||
//目标位置的行
|
||||
targetKey = target.getAttribute("data-row-key"); //目标位置的行key
|
||||
if (!targetKey || targetKey === currentKey) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentKey, null);
|
||||
_this.synchronizeTableTr(targetKey, null);
|
||||
}
|
||||
|
||||
onDragRow && onDragRow(currentKey, targetKey);
|
||||
};
|
||||
|
||||
_this.synchronizeTableTrShadow = function () {
|
||||
var _this$props2 = _this.props,
|
||||
contentTable = _this$props2.contentTable,
|
||||
index = _this$props2.index;
|
||||
|
||||
|
||||
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
trs = cont.getBoundingClientRect(),
|
||||
fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
|
||||
fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
|
||||
|
||||
var div = document.createElement("div");
|
||||
var style = "wdith:" + (trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0)) + "px";
|
||||
style += ";height:" + trs.height + "px";
|
||||
style += ";classname:" + cont.className;
|
||||
div.setAttribute("style", style);
|
||||
return div;
|
||||
};
|
||||
|
||||
_this.synchronizeTableTr = function (currentIndex, type) {
|
||||
if (type) {
|
||||
//同步 this.cacheCurrentIndex
|
||||
_this.cacheCurrentIndex = currentIndex;
|
||||
}
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
_table_trs = _table_trs ? _table_trs : contentTable.querySelector('.u-table table tbody');
|
||||
|
||||
_this.synchronizeTrStyle(_table_trs, currentIndex, type);
|
||||
if (_table_fixed_left_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);
|
||||
}
|
||||
if (_table_fixed_right_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_right_trs, currentIndex, type);
|
||||
}
|
||||
};
|
||||
|
||||
_this.synchronizeTrStyle = function (_elementBody, id, type) {
|
||||
var contentTable = _this.props.contentTable,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj = void 0;
|
||||
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
var element = trs[index];
|
||||
if (element.getAttribute("data-row-key") == id) {
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
// target.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
|
||||
// // target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, null);
|
||||
}
|
||||
};
|
||||
|
||||
_this.set = function (fn) {
|
||||
_this.clear();
|
||||
_this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -299,15 +93,14 @@ var TableRow = function (_Component) {
|
|||
|
||||
_this._timeout = null;
|
||||
_this.state = {
|
||||
hovered: false
|
||||
hovered: false,
|
||||
tableSizeConf: {}
|
||||
};
|
||||
_this.onRowClick = _this.onRowClick.bind(_this);
|
||||
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
|
||||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
_this.cacheCurrentIndex = null;
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -317,8 +110,7 @@ var TableRow = function (_Component) {
|
|||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey,
|
||||
treeType = _props.treeType,
|
||||
rowDraggAble = _props.rowDraggAble;
|
||||
treeType = _props.treeType;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
|
|
@ -334,82 +126,18 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var newTableSizeConf = nextProps.tableSizeConf;
|
||||
var oldTableSizeConf = this.props.tableSizeConf;
|
||||
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
TableRow.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var _event = events[i];
|
||||
if (type === "remove") {
|
||||
_utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
|
||||
} else {
|
||||
_utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
|
||||
}
|
||||
if (newTableSizeConf !== oldTableSizeConf) {
|
||||
this.setState({
|
||||
tableSizeConf: newTableSizeConf
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前触摸的Dom节点
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 开始调整交换行的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 手指移开时触发
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*同步当前拖拽到阴影
|
||||
* @memberof TableRow
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
if (rowDraggAble) {
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
|
|
@ -420,16 +148,12 @@ var TableRow = function (_Component) {
|
|||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index,
|
||||
rowDraggAble = _props2.rowDraggAble;
|
||||
index = _props2.index;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if (rowDraggAble) {
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
|
|
@ -450,6 +174,7 @@ var TableRow = function (_Component) {
|
|||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
// console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
|
@ -511,6 +236,7 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var tableSizeConf = this.state.tableSizeConf;
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
columns = _props9.columns,
|
||||
|
|
@ -522,20 +248,13 @@ var TableRow = function (_Component) {
|
|||
expandIconAsCell = _props9.expandIconAsCell,
|
||||
expanded = _props9.expanded,
|
||||
expandRowByClick = _props9.expandRowByClick,
|
||||
rowDraggAble = _props9.rowDraggAble,
|
||||
expandable = _props9.expandable,
|
||||
onExpand = _props9.onExpand,
|
||||
needIndentSpaced = _props9.needIndentSpaced,
|
||||
indent = _props9.indent,
|
||||
indentSize = _props9.indentSize,
|
||||
isHiddenExpandIcon = _props9.isHiddenExpandIcon,
|
||||
fixed = _props9.fixed,
|
||||
bodyDisplayInRow = _props9.bodyDisplayInRow,
|
||||
expandedIcon = _props9.expandedIcon,
|
||||
collapsedIcon = _props9.collapsedIcon,
|
||||
hoverKey = _props9.hoverKey,
|
||||
lazyStartIndex = _props9.lazyStartIndex,
|
||||
lazyEndIndex = _props9.lazyEndIndex;
|
||||
fixed = _props9.fixed;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
|
@ -543,6 +262,7 @@ var TableRow = function (_Component) {
|
|||
if (this.state.hovered) {
|
||||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
// console.log('className--'+className,index);
|
||||
//判断是否为合计行
|
||||
if (className.indexOf('sumrow') > -1) {
|
||||
showSum = true;
|
||||
|
|
@ -556,8 +276,6 @@ var TableRow = function (_Component) {
|
|||
needIndentSpaced: needIndentSpaced,
|
||||
expanded: expanded,
|
||||
record: record,
|
||||
expandedIcon: expandedIcon,
|
||||
collapsedIcon: collapsedIcon,
|
||||
isHiddenExpandIcon: isHiddenExpandIcon
|
||||
});
|
||||
|
||||
|
|
@ -583,28 +301,25 @@ var TableRow = function (_Component) {
|
|||
key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
|
||||
fixed: fixed,
|
||||
showSum: showSum,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
|
||||
bodyDisplayInRow: bodyDisplayInRow,
|
||||
lazyStartIndex: lazyStartIndex,
|
||||
lazyEndIndex: lazyEndIndex
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
var style = { height: height };
|
||||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
if (tableSizeConf && tableSizeConf.fontSize) {
|
||||
style.fontSize = tableSizeConf.fontSize;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
draggable: rowDraggAble,
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : hoverKey
|
||||
style: style
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
|
|
|
|||
|
|
@ -284,7 +284,6 @@ function bigData(Table) {
|
|||
}
|
||||
var lazyLoad = {
|
||||
startIndex: startIndex,
|
||||
endIndex: endIndex,
|
||||
startParentIndex: startIndex //为树状节点做准备
|
||||
};
|
||||
if (this.treeType) {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
exports["default"] = dragColumn;
|
||||
|
||||
var _react = require('react');
|
||||
|
|
@ -28,6 +28,7 @@ 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 cloneDeep = require('lodash.clonedeep');
|
||||
/**
|
||||
* 参数: 列拖拽
|
||||
* @param {*} Table
|
||||
|
|
@ -65,23 +66,23 @@ function dragColumn(Table) {
|
|||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// for (let index = 0; index < columns.length; index++) {
|
||||
// const da = columns[index];
|
||||
// if(da.key === dragSource.key){
|
||||
// columns[index] = dragTargColum;
|
||||
// }
|
||||
// if(da.key === dragTarg.key){
|
||||
// columns[index] = dragSourceColum;
|
||||
// }
|
||||
// }
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
newDate.title = da.title;
|
||||
_newColumns.push(newDate);
|
||||
});
|
||||
// console.log(" onDrop-------columns--- ",columns);
|
||||
_this.setState({
|
||||
columns: _newColumns //cloneDeep(columns)
|
||||
columns: cloneDeep(columns)
|
||||
});
|
||||
// console.log(" onDrop-------columns--- ",_newColumns);
|
||||
// console.log(columns === _newColumns);
|
||||
if (_this.props.onDrop) {
|
||||
_this.props.onDrop(event, data, columns);
|
||||
}
|
||||
|
|
@ -105,6 +106,14 @@ function dragColumn(Table) {
|
|||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
|
||||
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
|
||||
return obj;
|
||||
}
|
||||
var resultData = {};
|
||||
return this.recursion(obj, resultData);
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
|
|
@ -141,6 +150,7 @@ function dragColumn(Table) {
|
|||
onDrop = _props.onDrop,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||
|
||||
var key = new Date().getTime();
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
|
|
@ -151,6 +161,8 @@ function dragColumn(Table) {
|
|||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
// dragborder={false}
|
||||
, dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -229,16 +229,17 @@ function filterColumn(Table, Popover) {
|
|||
_this2.checkedColumItemClick(da);
|
||||
};
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{
|
||||
key: da.key + "_" + i,
|
||||
className: prefixCls + "-pop-cont-item",
|
||||
onClick: paramObj.onClick ? paramObj.onClick : null
|
||||
className: prefixCls + "-pop-cont-item"
|
||||
},
|
||||
_react2["default"].createElement(_beeCheckbox2["default"], paramObj),
|
||||
_react2["default"].createElement(
|
||||
_beeCheckbox2["default"],
|
||||
paramObj,
|
||||
"span",
|
||||
null,
|
||||
da.title
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ module.exports = {
|
|||
'less_than_equal_to': '小于等于',
|
||||
'be_equal_to': '等于',
|
||||
'not_equal_to': '不等于',
|
||||
"no_data": '暂无数据',
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
|
|
@ -29,8 +28,7 @@ module.exports = {
|
|||
'less_than': 'less than',
|
||||
'less_than_equal_to': 'less than equal to',
|
||||
'be_equal_to': 'be equal to',
|
||||
'not_equal_to': 'not equal to',
|
||||
"no_data": 'no data'
|
||||
'not_equal_to': 'not equal to'
|
||||
},
|
||||
'zh-tw': {
|
||||
'resetSettings': '還原設置',
|
||||
|
|
@ -45,7 +43,6 @@ module.exports = {
|
|||
'less_than': '小於',
|
||||
'less_than_equal to': '小於等於',
|
||||
'be_equal_to': '等於',
|
||||
'not_equal_to': '不等於',
|
||||
"no_data": '暫無數據'
|
||||
'not_equal_to': '不等於'
|
||||
}
|
||||
};
|
||||
|
|
@ -53,7 +53,7 @@ function multiSelect(Table, Checkbox) {
|
|||
}
|
||||
|
||||
MultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
if (this.props.data != nextProps.data) {
|
||||
var obj = this.getCheckedOrIndeter(nextProps.data);
|
||||
this.setState(_extends({}, obj, {
|
||||
data: (0, _util.ObjectAssign)(nextProps.data)
|
||||
|
|
@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
|
|||
var count = 0;
|
||||
var disabledCount = 0;
|
||||
data.forEach(function (da) {
|
||||
if (da._checked && !da._disabled) {
|
||||
if (da._checked) {
|
||||
count++;
|
||||
}
|
||||
if (da._disabled) {
|
||||
|
|
@ -105,7 +105,7 @@ function multiSelect(Table, Checkbox) {
|
|||
}
|
||||
});
|
||||
|
||||
if (data.length == count + disabledCount && count > 0) {
|
||||
if (data.length == count + disabledCount) {
|
||||
return "all";
|
||||
}
|
||||
return count == 0 ? false : "indeter";
|
||||
|
|
@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
|
|||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 49,
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
|
|
|
|||
|
|
@ -1,17 +1,191 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = newMultiSelect;
|
||||
|
||||
var _multiSelect = require('./multiSelect');
|
||||
var _react = require("react");
|
||||
|
||||
var _multiSelect2 = _interopRequireDefault(_multiSelect);
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _util = require("./util");
|
||||
|
||||
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; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
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); }
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
* @param {*} Checkbox
|
||||
* @param {*} Popover
|
||||
* @param {*} Icon
|
||||
*/
|
||||
|
||||
function newMultiSelect(Table, Checkbox) {
|
||||
return (0, _multiSelect2["default"])(Table, Checkbox);
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(NewMultiSelect, _Component);
|
||||
|
||||
function NewMultiSelect(props) {
|
||||
_classCallCheck(this, NewMultiSelect);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
var checkedAll = _this.setChecked(props.data);
|
||||
_this.state = {
|
||||
checkedAll: checkedAll,
|
||||
data: (0, _util.ObjectAssign)(props.data)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (this.props.data != nextProps.data) {
|
||||
this.setState({
|
||||
data: (0, _util.ObjectAssign)(nextProps.data),
|
||||
checkedAll: this.setChecked(nextProps.data)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.setChecked = function setChecked(data) {
|
||||
var allCheck = true;
|
||||
if (data) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var da = _step.value;
|
||||
|
||||
if (!da._checked) {
|
||||
allCheck = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator["return"]) {
|
||||
_iterator["return"]();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return allCheck;
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
|
||||
};
|
||||
|
||||
return NewMultiSelect;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var _state = _this2.state,
|
||||
data = _state.data,
|
||||
checkedAll = _state.checkedAll;
|
||||
|
||||
var selectList = [];
|
||||
var check = checkedAll ? false : true;
|
||||
data.forEach(function (item) {
|
||||
item._checked = check;
|
||||
if (item._checked) {
|
||||
selectList.push(item);
|
||||
}
|
||||
});
|
||||
_this2.setState({
|
||||
checkedAll: check
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
|
||||
this.handleClick = function () {};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
return function () {
|
||||
var data = _this2.state.data;
|
||||
|
||||
var selectList = [];
|
||||
record._checked = record._checked ? false : true;
|
||||
var checkedAll = true;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var item = data[i];
|
||||
if (!item._checked || item._checked == false) {
|
||||
checkedAll = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
_this2.setState(_extends({}, _this2.state, {
|
||||
checkedAll: checkedAll
|
||||
}));
|
||||
data.forEach(function (da) {
|
||||
if (da._checked) {
|
||||
selectList.push(da);
|
||||
}
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList, record, index);
|
||||
};
|
||||
};
|
||||
|
||||
this.getDefaultColumns = function (columns) {
|
||||
// let checkedAll = init?false:this.state.checkedAll;
|
||||
var checkedAll = _this2.state.checkedAll;
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: "table-checkbox",
|
||||
checked: checkedAll
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
, onChange: _this2.onAllCheckChange
|
||||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: "table-checkbox"
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this2.handleClick,
|
||||
onChange: _this2.onCheckboxChange(text, record, index)
|
||||
}));
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = singleSelect;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _util = require("./util");
|
||||
|
||||
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; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
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); }
|
||||
|
||||
/**
|
||||
* 参数: 单选表头
|
||||
* @param {*} Table
|
||||
* @param {*} Radio
|
||||
*/
|
||||
|
||||
function singleSelect(Table, Radio) {
|
||||
var _class, _temp;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(SingleSelect, _Component);
|
||||
|
||||
function SingleSelect(props) {
|
||||
_classCallCheck(this, SingleSelect);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.onRadioChange = function (value, record, index) {
|
||||
var selectedRowIndex = _this.state.selectedRowIndex;
|
||||
|
||||
if (selectedRowIndex === index) {
|
||||
_this.setState({ selectedRowIndex: '' });
|
||||
_this.props.getSelectedDataFunc();
|
||||
} else {
|
||||
_this.setState({ selectedRowIndex: index });
|
||||
_this.props.getSelectedDataFunc(record, index);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getDefaultColumns = function (columns) {
|
||||
var selectedRowIndex = _this.state.selectedRowIndex;
|
||||
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: '',
|
||||
key: "radio",
|
||||
dataIndex: "radio",
|
||||
fixed: "left",
|
||||
width: 49,
|
||||
render: function render(text, record, index) {
|
||||
return _react2["default"].createElement(
|
||||
Radio.RadioGroup,
|
||||
{
|
||||
className: "table-radio",
|
||||
name: "table-radio",
|
||||
selectedValue: selectedRowIndex,
|
||||
onChange: function onChange(value) {
|
||||
return _this.onRadioChange(value, record, index);
|
||||
},
|
||||
style: { width: '14px', height: '14px', display: 'block', marginLeft: '4px' } },
|
||||
_react2["default"].createElement(Radio, { value: index })
|
||||
);
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
data: (0, _util.ObjectAssign)(props.data),
|
||||
selectedRowIndex: props.selectedRowIndex
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
SingleSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
this.setState({
|
||||
data: (0, _util.ObjectAssign)(nextProps.data)
|
||||
});
|
||||
}
|
||||
if ('selectedRowIndex' in nextProps) {
|
||||
this.setState({
|
||||
selectedRowIndex: nextProps.selectedRowIndex
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是数组
|
||||
* @param {*} o
|
||||
*/
|
||||
|
||||
|
||||
SingleSelect.prototype.isArray = function isArray(o) {
|
||||
return Object.prototype.toString.call(o) == '[object Array]';
|
||||
};
|
||||
|
||||
SingleSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
columns: this.getDefaultColumns(columns),
|
||||
data: data }));
|
||||
};
|
||||
|
||||
return SingleSelect;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-single-select",
|
||||
getSelectedDataFunc: function getSelectedDataFunc() {},
|
||||
selectedRowIndex: ''
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -198,22 +198,15 @@ function sort(Table, Icon) {
|
|||
};
|
||||
|
||||
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var currentCol = orderCols[currentIndex];
|
||||
var preKey = pre[currentCol.key];
|
||||
var afterKey = after[currentCol.key];
|
||||
var colSortFun = currentCol.sorter;
|
||||
if (typeof colSortFun !== 'function') {
|
||||
colSortFun = function colSortFun() {
|
||||
return preKey - afterKey;
|
||||
};
|
||||
}
|
||||
var preKey = pre[orderCols[currentIndex].key];
|
||||
var afterKey = after[orderCols[currentIndex].key];
|
||||
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
|
||||
return _this3._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
|
||||
}
|
||||
if (currentCol.order == "ascend") {
|
||||
return colSortFun(pre, after);
|
||||
if (orderCols[currentIndex].order == "ascend") {
|
||||
return preKey - afterKey;
|
||||
} else {
|
||||
return -colSortFun(pre, after);
|
||||
return afterKey - preKey;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
// 紧凑、适中、宽松型图标，后续更新 iconfont 资源后，可以删掉该文件
|
||||
|
||||
exports["default"] = {
|
||||
compact: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 7.554h13.999V6H5v1.554zm0 2.816h13.999V8.814H5v1.556zm0 2.814h13.999v-1.556H5v1.556zm0 2.814h13.999v-1.555H5v1.555zm0 2.815h13.999v-1.554H5v1.554z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
),
|
||||
moderate: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 9.163h14V6H5v3.163zm0 4.825h14v-3.163H5v3.163zm0 4.825h14v-3.164H5v3.164z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
),
|
||||
easy: React.createElement(
|
||||
"svg",
|
||||
{ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg" },
|
||||
React.createElement("path", { d: "M5 11.075h14V6H5v5.075zm0 7.739h14v-5.075H5v5.075z", fill: "#505F79", "fill-rule": "evenodd" })
|
||||
)
|
||||
};
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -44,12 +44,10 @@ var scrollbarMeasure = {
|
|||
function measureScrollbar() {
|
||||
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
|
||||
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
var tableDom = document.querySelector('.u-table');
|
||||
var currentDom = tableDom ? tableDom : document.body;
|
||||
var currentDom = document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
|
|
@ -230,12 +228,11 @@ function addHandler(element, type, handler) {
|
|||
}
|
||||
|
||||
function removeHandler(element, type, handler) {
|
||||
if (element && element.removeEventListener) {
|
||||
//element&& ie11报错兼容
|
||||
if (element.removeEventListener) {
|
||||
element.removeEventListener(type, handler, false);
|
||||
} else if (element && element.detachEvent) {
|
||||
} else if (element.detachEvent) {
|
||||
element.detachEvent("on" + type, handler);
|
||||
} else if (element) {
|
||||
} else {
|
||||
element["on" + type] = null;
|
||||
}
|
||||
}
|
||||
|
|
@ -279,12 +276,11 @@ var EventUtil = exports.EventUtil = {
|
|||
},
|
||||
|
||||
removeHandler: function removeHandler(element, type, handler) {
|
||||
//element&& ie11报错兼容
|
||||
if (element && element.removeEventListener) {
|
||||
if (element.removeEventListener) {
|
||||
element.removeEventListener(type, handler, false);
|
||||
} else if (element && element.detachEvent) {
|
||||
} else if (element.detachEvent) {
|
||||
element.detachEvent('on' + type, handler);
|
||||
} else if (element) {
|
||||
} else {
|
||||
element['on' + type] = null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
// @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";
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
// @import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||
|
||||
.selected{
|
||||
background: #FFF7E7;
|
||||
background: rgb(227,242,253);
|
||||
}
|
||||
|
||||
.demo25{
|
||||
|
|
@ -32,13 +33,3 @@
|
|||
}
|
||||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
border-color: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
border-color: #505F79;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义设置行高和字号
|
||||
* @description canConfigureTableSize 设置是否显示toolbar设置按钮，getToolbarContainer 设置按钮放置的容器。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", fixed: 'left',width: 100 },
|
||||
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
||||
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
||||
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
||||
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
||||
{ title: "单据状态", dataIndex: "status", key: "status", width: 100 },
|
||||
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
||||
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
||||
{ title: "总税价合计", dataIndex: "sum", key: "sum", fixed: 'right', width: 100 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderNum: "NU0391025",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年03月18日',
|
||||
quantity: '100.00',
|
||||
status: '正常',
|
||||
submitter: '小张',
|
||||
unit: 'pc',
|
||||
sum: '8,487.00',
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391026",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年02月05日',
|
||||
quantity: '91.00',
|
||||
status: '异常',
|
||||
submitter: '小红',
|
||||
unit: 'pc',
|
||||
sum: '675.00',
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391027",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年07月01日',
|
||||
quantity: '98.00',
|
||||
status: '正常',
|
||||
submitter: '小李',
|
||||
unit: 'pc',
|
||||
sum: '1,531.00',
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
}
|
||||
}
|
||||
|
||||
getToolbarContainer = () => {
|
||||
return document.getElementById('table-toolbar-container');
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="demo0">
|
||||
<div id="table-toolbar-container"></div>
|
||||
<Table
|
||||
canConfigureTableSize={true}
|
||||
getToolbarContainer={this.getToolbarContainer}
|
||||
height={30}
|
||||
headerHeight={35}
|
||||
columns={columns}
|
||||
data={data}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.demo0{
|
||||
text-align: end;
|
||||
.u-table-adjustSize-btn{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本表格
|
||||
* @parent 基础 Basic
|
||||
* @description 单元格数据过长时，可结合Tooltip组件使用。
|
||||
* demo0101
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0101;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 默认无数据展示
|
||||
* @parent 基础 Basic
|
||||
* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
|
||||
* demo0102
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "员工姓名",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "department",
|
||||
key: "department"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
||||
class Demo02 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo02;
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns03 = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
|
||||
const data03 = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo03 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo03;
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 隔行换色
|
||||
* @parent 基础 Basic
|
||||
* @description 可自定义斑马线颜色
|
||||
* demo0104
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns04 = [
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data04 = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo04 extends Component {
|
||||
render() {
|
||||
return <Table
|
||||
className="demo04"
|
||||
columns={columns04}
|
||||
data={data04} />
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo04;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.demo04 {
|
||||
&.u-table tr:nth-child(2n){
|
||||
background: #f7f9fb;
|
||||
}
|
||||
&.u-table tr.u-table-row-hover, .u-table tr:hover{
|
||||
background: #ebecf0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格 Loading 加载
|
||||
* @parent 基础 Basic
|
||||
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
|
||||
* demo0105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
|
||||
const columns05 = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data05 = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo05 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
loading : true
|
||||
}
|
||||
}
|
||||
changeLoading = () => {
|
||||
this.setState({
|
||||
loading : !this.state.loading
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
onClick={this.changeLoading}
|
||||
>
|
||||
切换loading
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns05}
|
||||
data={data05}
|
||||
// loading={this.state.loading}或者是boolean
|
||||
loading={{show:this.state.loading}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo05;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格内容居中
|
||||
* @parent 基础 Basic
|
||||
* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
|
||||
* demo0106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 横向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:"110%" }}`。
|
||||
* demo0201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 100,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
approvalState_name:"未审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
approvalState_name:"未审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "5"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo11 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns} data={data} scroll={{ x: "110%" }} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 纵向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。
|
||||
* demo0202
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
class Demo12 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns} data={data} scroll={{ y:150 }} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 渲染本地数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可自定义页头和页脚。
|
||||
* demo0301
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
class Demo21 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo21;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 渲染远程数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
|
||||
* demo0302
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import reqwest from 'reqwest';
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
render: name => `${name.first} ${name.last}`,
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
filters: [
|
||||
{ text: 'Male', value: 'male' },
|
||||
{ text: 'Female', value: 'female' },
|
||||
],
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Email',
|
||||
dataIndex: 'email',
|
||||
}];
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: [],
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
|
||||
fetch = (params = {}) => {
|
||||
console.log('params:', params);
|
||||
this.setState({ loading: true });
|
||||
reqwest({
|
||||
url: 'https://randomuser.me/api',
|
||||
method: 'get',
|
||||
data: {
|
||||
results: 10,
|
||||
...params,
|
||||
},
|
||||
type: 'json',
|
||||
}).then((data) => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: data.results,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo22">
|
||||
<Button className="opt-btns" colors="secondary" onClick={() => this.fetch()}>点击加载远程数据</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={this.state.data}
|
||||
loading={this.state.loading}
|
||||
scroll={{y:200}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.demo22{
|
||||
.opt-btns{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 数据关联
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 数据行关联自定义菜单显示
|
||||
* demo0404
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/newMultiSelect";
|
||||
import sort from "../../src/lib/sort";
|
||||
|
||||
const { Item } = Menu;
|
||||
|
||||
const data = [
|
||||
{
|
||||
num:"NU0391025",
|
||||
name: "aa",
|
||||
sex: "男",
|
||||
dept:'财务二科',
|
||||
rank:"T1",
|
||||
year:"1",
|
||||
seniority:"1",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
num:"NU0391026",
|
||||
name: "bb",
|
||||
sex: "女",
|
||||
dept:'财务一科',
|
||||
rank:"M1",
|
||||
year:"1",
|
||||
seniority:"1",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
num:"NU0391027",
|
||||
name: "dd",
|
||||
sex: "女",
|
||||
dept:'财务一科',
|
||||
rank:"T2",
|
||||
year:"2",
|
||||
seniority:"2",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
|
||||
class Demo33 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu
|
||||
onSelect={this.onSelect}>
|
||||
<Item key="1">模态弹出</Item>
|
||||
<Item key="2">链接跳转</Item>
|
||||
<Item key="3">打开新页</Item>
|
||||
</Menu>);
|
||||
let columns = [
|
||||
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
{ title: "员工编号",dataIndex: "num",key: "num",width: 200 },
|
||||
{ title: "员工姓名",dataIndex: "name",key: "name", width: 200},
|
||||
{ title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
|
||||
{ title: "部门",dataIndex: "dept",key: "dept",width: 200},
|
||||
{ title: "职级",dataIndex: "rank",key: "rank",width: 200},
|
||||
{ title: "工龄",dataIndex: "year",key: "year",width: 200},
|
||||
{ title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
|
||||
];
|
||||
return <ComplexTable
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo33;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列合计（总计）
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
|
||||
* demo0405
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
let ComplexTable = multiSelect(sum(Table), Checkbox);
|
||||
let _sum = 0;
|
||||
const columns = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "业务类型",
|
||||
dataIndex: "type",
|
||||
key: "type",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "仓库",
|
||||
dataIndex: "warehouse",
|
||||
key: "warehouse",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 100,
|
||||
sumCol: true
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sumCol: true
|
||||
}
|
||||
];
|
||||
|
||||
function getData(){
|
||||
const data = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
num: "NU039100"+i,
|
||||
date: "2019-03-01",
|
||||
type: "普通采购",
|
||||
supplier: "gys"+i,
|
||||
contact: "Tom",
|
||||
warehouse: "普通仓",
|
||||
total: i + Math.floor(Math.random()*10),
|
||||
money: 20 * Math.floor(Math.random()*10)
|
||||
});
|
||||
_sum += data[i].total;
|
||||
_sum += data[i].money;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
class Demo35 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData(),
|
||||
sum:_sum
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
footer={currentData => <div>总计: {_sum}</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo35;
|
||||
|
|
@ -1,558 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 行内编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对行进行编辑的表格
|
||||
* demo0501
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange, throwError } = this.props;
|
||||
if (value === "") {
|
||||
throwError && throwError(true);
|
||||
} else {
|
||||
throwError && throwError(false);
|
||||
}
|
||||
this.setState({ value });
|
||||
onChange && onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, required, colName } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (value === "") cls += " verify-cell";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<FormControl value={value} onChange={this.handleChange} />
|
||||
<span className="error">
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={<div className="tp-content">{"请输入" + colName}</div>}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<Select value={value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { editable, required } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
value.name || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0501 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.dataBuffer = {};
|
||||
}
|
||||
|
||||
edit = index => () => {
|
||||
if (index === null) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
editingRowsMap[index] = index.toString();
|
||||
// 最好使用深复制
|
||||
this.dataBuffer[index] = { ...this.state.dataSource[index] };
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
abortEdit = index => () => {
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
delete this.dataBuffer[index];
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
delete = index => () => {
|
||||
if (index === null) return;
|
||||
let { dataSource } = this.state;
|
||||
dataSource.splice(index,1);
|
||||
this.setState({
|
||||
dataSource:dataSource
|
||||
});
|
||||
}
|
||||
|
||||
commitChange = index => () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index] = { ...this.dataBuffer[index] };
|
||||
this.setState({ editingRowsMap, dataSource });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
this.dataBuffer[index][key] = value;
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.currentRecord = record;
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
renderRowHover = () => {
|
||||
const { currentIndex } = this.state;
|
||||
return this.state.editingRowsMap[currentIndex] ? (
|
||||
<div className="cancel-btns">
|
||||
<Button
|
||||
size="sm"
|
||||
bordered
|
||||
onClick={this.abortEdit(currentIndex)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button size="sm" colors="primary" onClick={this.commitChange(currentIndex)}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="opt-btns">
|
||||
<Button size="sm" onClick={this.edit(currentIndex)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button size="sm" onClick={this.delete(currentIndex)}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0501 u-editable-table">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
height={40}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0501;
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
.demo0501 .u-table {
|
||||
.u-row-hover {
|
||||
.opt-btns,.cancel-btns {
|
||||
button {
|
||||
margin: 0;
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,502 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）
|
||||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Icon, Select, Tooltip, Form } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
this.editWarp = React.createRef();
|
||||
}
|
||||
|
||||
commitChange = () => {
|
||||
if (this.state.value === "") return;
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true });
|
||||
};
|
||||
|
||||
handleKeydown = event => {
|
||||
if (event.keyCode == 13) {
|
||||
this.commitChange();
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
if (e.target.value === "") this.editWarp.className += " verify-cell";
|
||||
this.setState({ value: e.target.value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
|
||||
<input
|
||||
className={value ? "u-form-control" : "u-form-control error"}
|
||||
autoFocus
|
||||
defaultValue={this.props.value}
|
||||
value={value}
|
||||
onKeyDown={this.handleKeydown}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.commitChange}
|
||||
/>
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t require" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value || " "}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Select
|
||||
defaultValue={this.props.value}
|
||||
value={value}
|
||||
onSelect={this.handleSelect}
|
||||
onBlur={this.commitChange}
|
||||
autoFocus
|
||||
>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value || " "}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
value: this.props.value.d,
|
||||
editable: false
|
||||
};
|
||||
this.refWarp = React.createRef();
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true }, () => this.refWarp.focus());
|
||||
};
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
onRefBlur = e => {
|
||||
// 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用
|
||||
const __REF_CONTENT__ = document.querySelector("div.ref-core-modal");
|
||||
if (!__REF_CONTENT__ && e.target === this.refWarp) {
|
||||
this.commitChange();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, editable } = this.state;
|
||||
return editable ? (
|
||||
<div
|
||||
ref={el => (this.refWarp = el)}
|
||||
className="editable-cell-input-wrapper"
|
||||
tabIndex={-1}
|
||||
onBlur={this.onRefBlur}
|
||||
>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("code1", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: "请输入请选择",
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className="error"
|
||||
style={{ display: "block", color: "#f53c32" }}
|
||||
>
|
||||
{getFieldError("code1")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value.name || " "}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0502 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName="名字"
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
value={record}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource
|
||||
};
|
||||
}
|
||||
|
||||
onCellChange = (index, key) => {
|
||||
return value => {
|
||||
const { dataSource } = this.state;
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource }, () => console.dir(this.state.dataSource));
|
||||
};
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo0502 u-editable-table">
|
||||
<Table data={this.state.dataSource} columns={this.columns} height={40}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0502;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.u-editable-table .u-table {
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
&.error {
|
||||
border-color: #F44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editable-cell-input-wrapper {
|
||||
padding-right: 0;
|
||||
.ref-input-wrap {
|
||||
width: auto !important;
|
||||
height: 30px;
|
||||
.u-input-group{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,577 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 弹框（表单）编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 以弹框形式以对行进行编辑的表格
|
||||
* demo0503
|
||||
*/
|
||||
|
||||
import React, { Component, PureComponent } from "react";
|
||||
import Table from "../../src";
|
||||
import {
|
||||
Select, Form, FormControl, Button, Icon,
|
||||
Tooltip, Modal, FormGroup, Label, Row, Col
|
||||
} from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
function handleFormValueChange(WarpCompProps, field, allFields) {
|
||||
const { onChange, throwError } = WarpCompProps;
|
||||
if (field.value === "") return throwError && throwError(true);
|
||||
throwError && throwError(false);
|
||||
onChange && onChange(field.value);
|
||||
}
|
||||
|
||||
const StringEditCell = Form.createForm({
|
||||
onValuesChange: handleFormValueChange
|
||||
})(PureStringEditCell);
|
||||
|
||||
function PureStringEditCell(props) {
|
||||
const { getFieldProps, getFieldError } = props.form;
|
||||
const { value, required } = props;
|
||||
let cls = "editable-cell";
|
||||
if (required) cls += " required";
|
||||
return (
|
||||
<div className={cls}>
|
||||
<FormControl
|
||||
{...getFieldProps("value", {
|
||||
initialValue: value,
|
||||
validateTrigger: "onBlur",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("value")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
<Select value={this.props.value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
const { form, throwError, onChange } = this.props
|
||||
if (form.getFieldError("refValue")) return throwError && throwError(true);
|
||||
throwError && throwError(false);
|
||||
onChange && onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, required } = this.props;
|
||||
let cls = "editable-cell";
|
||||
if (required) cls += " required";
|
||||
return (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
class EditModal extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: this.props.data,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
// 属性名对应 columns 属性中的 key 值
|
||||
this.renderElm = {
|
||||
b: (record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
required={true}
|
||||
value={record.b}
|
||||
onChange={this.onFieldChange("b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
),
|
||||
|
||||
c: (record, index) => (
|
||||
<SelectEditCell
|
||||
value={record.c}
|
||||
onChange={this.onFieldChange("c")}
|
||||
/>
|
||||
),
|
||||
d: (record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
required={true}
|
||||
value={record.d}
|
||||
onChange={this.onFieldChange("d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
onFieldChange = field => value => {
|
||||
let data = { ...this.state.data };
|
||||
data[field] = value;
|
||||
this.setState({ data });
|
||||
}
|
||||
|
||||
submitChange = () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
const { onSubmit, onHide, currentIndex } = this.props;
|
||||
onSubmit && onSubmit(this.state.data, currentIndex);
|
||||
onHide && onHide();
|
||||
}
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { show, onHide, columns, currentIndex } = this.props;
|
||||
const { data } = this.state;
|
||||
return (
|
||||
<Modal
|
||||
show={show}
|
||||
onHide={onHide}
|
||||
style={{ width: 800 }}
|
||||
className="demo0503-m-b"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>编辑行</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Form>
|
||||
<Row style={{ width: 770, margin: "0 auto" }}>
|
||||
{
|
||||
columns.map((item, index) => {
|
||||
return (
|
||||
<Col sm={6} md={6} lg={6} style={{ padding: "0 0 0 10px" }} key={index}>
|
||||
<FormGroup>
|
||||
<Label><Icon type="uf-mi" className='mast'></Icon>{item.title}</Label>
|
||||
{this.renderElm[item.key] &&
|
||||
this.renderElm[item.key](
|
||||
data,
|
||||
currentIndex
|
||||
)}
|
||||
{!this.renderElm[item.key] && (
|
||||
<div className="editable-cell">
|
||||
<FormControl
|
||||
defaultValue={data[item.dataIndex]}
|
||||
disabled={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
<Modal.Footer style={{textAlign: "right"}}>
|
||||
<Button
|
||||
style={{ marginRight: 8 }}
|
||||
bordered
|
||||
onClick={onHide}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.submitChange}>
|
||||
确认
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0503 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
// 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => record.d.name
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
isEditing: false,
|
||||
currentIndex: null
|
||||
};
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
if (this.state.currentIndex === null) return;
|
||||
this.setState({ isEditing: true });
|
||||
};
|
||||
|
||||
abortEdit = () => {
|
||||
this.setState({ isEditing: false });
|
||||
};
|
||||
|
||||
commitChange = (editedRowData, rowIndex) => {
|
||||
console.log(editedRowData)
|
||||
console.log(rowIndex)
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[rowIndex] = editedRowData;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
hideEditModal = () => {
|
||||
this.setState({ isEditing: false });
|
||||
}
|
||||
|
||||
renderRowHover = () => {
|
||||
return (
|
||||
<div className="opt-btns">
|
||||
<Button size="sm" onClick={this.edit}>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const { dataSource, isEditing, currentIndex } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0503 u-editable-table">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
height={40}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
{
|
||||
isEditing ? (
|
||||
<EditModal
|
||||
show={isEditing}
|
||||
onHide={this.hideEditModal}
|
||||
columns={columns}
|
||||
data={dataSource[currentIndex]}
|
||||
onSubmit={this.commitChange}
|
||||
currentIndex={currentIndex}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0503;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.demo0503-m-b {
|
||||
|
||||
&.u-modal .u-modal-body {
|
||||
padding: 16px 0;
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.u-form-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-form-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 265px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 240px !important;
|
||||
}
|
||||
|
||||
.u-label {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 110px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
.mast {
|
||||
padding: 0;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
z-index: 9999 !important;
|
||||
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
.ref-core-button .u-button:first-child{
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -1,534 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 全表格编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 以行内编辑形式对全表数据进行编辑
|
||||
* demo0505
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange, throwError } = this.props;
|
||||
if (value === "") {
|
||||
throwError && throwError(true);
|
||||
} else {
|
||||
throwError && throwError(false);
|
||||
}
|
||||
this.setState({ value });
|
||||
onChange && onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, required, colName, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (value === "") cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<FormControl className={!value && "error"} value={value} onChange={this.handleChange} />
|
||||
<span className="error">
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={<div className="tp-content">{"请输入" + colName}</div>}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<Select value={value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { editable, required, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
value.name || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0505 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.b || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.c || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.d || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
// 用于记录数据是否被修改
|
||||
dataSource.forEach(item => (item.isEdited = {}));
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
isEditingAll: false,
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
// 用于记录编辑前数据
|
||||
this.dataBuffer = [];
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.dataBuffer = [];
|
||||
// 最好使用深复制
|
||||
this.state.dataSource.forEach((item, index) => {
|
||||
this.dataBuffer.push({ ...item });
|
||||
});
|
||||
this.setState({ isEditingAll: true });
|
||||
};
|
||||
|
||||
abortEdit = () => {
|
||||
let originData = [...this.state.dataSource];
|
||||
originData.forEach(item => (item.isEdited = {}));
|
||||
this.setState({
|
||||
isEditingAll: false,
|
||||
dataSource: originData
|
||||
});
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
const newData = this.dataBuffer.map(item => {
|
||||
return Object.assign({}, item, { isEdited: {} });
|
||||
});
|
||||
this.setState({ isEditingAll: false, dataSource: newData });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
this.dataBuffer[index][key] = value;
|
||||
this.dataBuffer[index].isEdited[key] = true;
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, isEditingAll } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0505 u-editable-table">
|
||||
<div className="toolbar-btns">
|
||||
{isEditingAll ? (
|
||||
<React.Fragment>
|
||||
<Button colors="primary" onClick={this.commitChange}>
|
||||
确认
|
||||
</Button>
|
||||
<Button
|
||||
bordered
|
||||
onClick={this.abortEdit}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Button colors="secondary" onClick={this.edit}>
|
||||
编辑全表
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table data={dataSource} columns={columns} height={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0505;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
.demo0505 {
|
||||
|
||||
.toolbar-btns {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.u-button {
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table {
|
||||
.u-row-select {
|
||||
background-color: #FFF7E7;
|
||||
}
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.edited::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #f44336 transparent transparent #f44336;
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 左侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的左侧
|
||||
* demo0601
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo51 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo51;
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 右侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的右侧
|
||||
* demo0602
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Popconfirm} from 'tinper-bee';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:100,
|
||||
fixed: "right",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div className='operation-btn'>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>
|
||||
<a href="javascript:;" >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo52 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo52;
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 动态设置列锁定、解除锁定
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
|
||||
* demo0603
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
|
||||
const { Item } = Menu;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:columns
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = ({key,item})=>{
|
||||
console.log(`${key} selected`); //获取key
|
||||
let currentObject = item.props.data; //获取选中对象的数据
|
||||
let {columns} = this.state;
|
||||
let fixedCols = [];
|
||||
let nonColums = [];
|
||||
columns.find(da=>{
|
||||
if(da.key == key){
|
||||
da.fixed?delete da.fixed:da.fixed = 'left';
|
||||
}
|
||||
da.fixed?fixedCols.push(da):nonColums.push(da);
|
||||
});
|
||||
|
||||
columns = [...fixedCols,...nonColums]
|
||||
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
//表头增加下拉菜单
|
||||
renderColumnsDropdown(columns) {
|
||||
const icon ='uf-arrow-down';
|
||||
|
||||
return columns.map((originColumn,index) => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let menuInfo = [], title='锁定';
|
||||
if(originColumn.fixed){
|
||||
title = '解锁'
|
||||
}
|
||||
menuInfo.push({
|
||||
info:title,
|
||||
key:originColumn.key,
|
||||
index:index
|
||||
});
|
||||
const menu = (
|
||||
<Menu onSelect={this.onSelect} >{
|
||||
menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
|
||||
}
|
||||
</Menu>)
|
||||
column.title = (
|
||||
<span className='title-con drop-menu'>
|
||||
{column.title}
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type={icon}/>
|
||||
</Dropdown>
|
||||
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {columns} = this.state;
|
||||
columns = this.renderColumnsDropdown(columns);
|
||||
return(
|
||||
<div className="demo24">
|
||||
<Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列过滤面板
|
||||
* @parent 列操作-隐藏 Hide
|
||||
* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
|
||||
* demo0802
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Popover} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
|
||||
const defaultProps21 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo21 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state ={
|
||||
columns: [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
]};
|
||||
}
|
||||
afterFilter = (optData,columns)=>{
|
||||
if(optData.key == 'b'){
|
||||
if(optData.ifshow){
|
||||
columns[2].ifshow = false;
|
||||
}else{
|
||||
columns[2].ifshow = true;
|
||||
}
|
||||
this.setState({
|
||||
columns21 :columns,
|
||||
showFilterPopover:true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return <FilterColumnTable
|
||||
columns={this.state.columns}
|
||||
data={data}
|
||||
afterFilter={this.afterFilter}
|
||||
showFilterPopover={this.state.showFilterPopover}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
export default Demo21;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/**
|
||||
* @title 列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
* demo0901
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
render() {
|
||||
|
||||
return <ComplexTable columns={columns11} data={this.state.data} />;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
/**
|
||||
* @title 后端列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
|
||||
* demo0902
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
|
||||
// const columns11 = [
|
||||
// {
|
||||
// title: "名字",
|
||||
// dataIndex: "a",
|
||||
// key: "a",
|
||||
// width: 100
|
||||
// },
|
||||
// {
|
||||
// title: "性别",
|
||||
// dataIndex: "b",
|
||||
// key: "b",
|
||||
// width: 100
|
||||
// },
|
||||
// {
|
||||
// title: "年龄",
|
||||
// dataIndex: "c",
|
||||
// key: "c",
|
||||
// width: 200,
|
||||
// sorter: (a, b) => a.c - b.c
|
||||
// },
|
||||
// {
|
||||
// title: "武功级别",
|
||||
// dataIndex: "d",
|
||||
// key: "d"
|
||||
// },
|
||||
// {
|
||||
// title: "分数",
|
||||
// dataIndex: "e",
|
||||
// key: "e",
|
||||
// sorter: (a, b) => a.c - b.c
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const data11 = [
|
||||
// { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
|
||||
// { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
|
||||
// { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
|
||||
// ];
|
||||
const columns11 = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sorter: (a, b) => a.money - b.money
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo28 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
}
|
||||
render() {
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo28;
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本用法
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
*
|
||||
* @title 列交换
|
||||
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns22 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
|
||||
const data22 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps22 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns22} data={data22} bordered
|
||||
|
||||
draggable={true}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变列顺序
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
|
||||
* demo1001
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom',e:'...', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack',e:'...', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane',e:'...', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps22 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
onDrop ={(event,data,columns)=>{
|
||||
console.log("--拖拽交换列后触发事件");
|
||||
console.log("event.target:",event.target);
|
||||
console.log("data:",data);
|
||||
console.log("拖拽完成后的columns:",columns);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
export default Demo22;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变列宽度
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
|
||||
* demo1002
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
}
|
||||
];
|
||||
|
||||
const data23 = [
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商",d:'Tom', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商",d:'Jack', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商",d:'Jane', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps23 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo23 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
columns={columns23}
|
||||
data={data23}
|
||||
bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
||||
|
||||
export default Demo23;
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽列宽度
|
||||
* @description 注：不支持tree结构的表头、合并表头的table
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
}
|
||||
];
|
||||
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps23 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo23 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns23} data={data23} bordered
|
||||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
minColumnWidth={20}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo23.defaultProps = defaultProps23;
|
||||
|
||||
|
||||
export default Demo23;
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义表格标题、表尾、选中行颜色
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
|
||||
* demo1103
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 紧凑型、宽松型
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
|
||||
* demo1105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,Tag} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
|
||||
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
||||
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
||||
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
||||
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
||||
{ title: "单据状态", dataIndex: "status", key: "status", width: 100,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tag colors={text.type}>{text.desc}</Tag>
|
||||
);
|
||||
}},
|
||||
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
||||
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
||||
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderNum: "NU0391025",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年03月18日',
|
||||
quantity: '100.00',
|
||||
status: {type:'success' ,desc:'正常'},
|
||||
submitter: '小张',
|
||||
unit: 'pc',
|
||||
sum:'8,487.00',
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391026",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年02月05日',
|
||||
quantity: '91.00',
|
||||
status: {type:'danger' ,desc:'异常'},
|
||||
submitter: '小红',
|
||||
unit: 'pc',
|
||||
sum:'675.00',
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391027",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年07月01日',
|
||||
quantity: '98.00',
|
||||
status: {type:'success' ,desc:'正常'},
|
||||
submitter: '小李',
|
||||
unit: 'pc',
|
||||
sum:'1,531.00',
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h5>紧凑型表格</h5>
|
||||
<Table columns={columns} data={data} size="sm" />
|
||||
<h5>宽松型表格</h5>
|
||||
<Table columns={columns} data={data} size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义行高
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
|
||||
* demo1106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 图片在表格中的展示
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题
|
||||
* demo1107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "图样",
|
||||
dataIndex: "picture",
|
||||
key: "picture",
|
||||
render(text, record, index) {
|
||||
return <img style={{height:'50px'}} src={text} alt="Picture"/>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "组织部门",
|
||||
dataIndex: "orgDept",
|
||||
key: "orgDept",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "设施管理部门",
|
||||
dataIndex: "facilityManageUnit",
|
||||
key: "facilityManageUnit",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "案卷编号",
|
||||
dataIndex: "docketnum",
|
||||
key: "docketnum",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "数量",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "首次发现时间",
|
||||
dataIndex: "discoveryTime",
|
||||
key: "discoveryTime",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "实际修复时间",
|
||||
dataIndex: "repairTime",
|
||||
key: "repairTime",
|
||||
width: 150,
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
|
||||
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
|
||||
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
|
||||
];
|
||||
|
||||
class Demo1107 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1107;
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/**
|
||||
*
|
||||
* @title 动态设置固定列
|
||||
* @description 动态设置固、取消固定列
|
||||
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
|
||||
*
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
|
||||
const { Item } = Menu;
|
||||
// const columns24 = [
|
||||
// {
|
||||
// title: "Full Name",
|
||||
// width: 100,
|
||||
// dataIndex: "name",
|
||||
// key: "name",
|
||||
// fixed: "left",
|
||||
// },
|
||||
// { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
||||
// { title: "Column 1", dataIndex: "address", key: "1" },
|
||||
// { title: "Column 2", dataIndex: "address2", key: "2" },
|
||||
// { title: "Column 3", dataIndex: "address", key: "3" },
|
||||
// { title: "Column 4", dataIndex: "address", key: "4" },
|
||||
// { title: "Column 24", dataIndex: "address", key: "24" },
|
||||
// { title: "Column 6", dataIndex: "address", key: "6" },
|
||||
// { title: "Column 7", dataIndex: "address", key: "7" },
|
||||
// { title: "Column 8", dataIndex: "address", key: "8" }
|
||||
// ];
|
||||
|
||||
|
||||
const columns24 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "对手",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "帮派",
|
||||
dataIndex: "f",
|
||||
key: "f",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "武功类型",
|
||||
dataIndex: "g",
|
||||
key: "g",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "师傅",
|
||||
dataIndex: "k",
|
||||
key: "k",
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "攻击系数",
|
||||
dataIndex: "h",
|
||||
key: "h",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const data24 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:columns24
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onSelect = ({key,item})=>{
|
||||
console.log(`${key} selected`); //获取key
|
||||
let currentObject = item.props.data; //获取选中对象的数据
|
||||
let {columns} = this.state;
|
||||
let fixedCols = [];
|
||||
let nonColums = [];
|
||||
columns.find(da=>{
|
||||
if(da.key == key){
|
||||
da.fixed?delete da.fixed:da.fixed = 'left';
|
||||
}
|
||||
da.fixed?fixedCols.push(da):nonColums.push(da);
|
||||
});
|
||||
|
||||
columns = [...fixedCols,...nonColums]
|
||||
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
//表头增加下拉菜单
|
||||
renderColumnsDropdown(columns) {
|
||||
const icon ='uf-arrow-down';
|
||||
|
||||
return columns.map((originColumn,index) => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let menuInfo = [], title='锁定';
|
||||
if(originColumn.fixed){
|
||||
title = '解锁'
|
||||
}
|
||||
menuInfo.push({
|
||||
info:title,
|
||||
key:originColumn.key,
|
||||
index:index
|
||||
});
|
||||
const menu = (
|
||||
<Menu onSelect={this.onSelect} >{
|
||||
menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
|
||||
}
|
||||
</Menu>)
|
||||
column.title = (
|
||||
<span className='title-con drop-menu'>
|
||||
{column.title}
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type={icon}/>
|
||||
</Dropdown>
|
||||
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {columns} = this.state;
|
||||
columns = this.renderColumnsDropdown(columns);
|
||||
return <div className="demo24">
|
||||
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
|
||||
* Demo1201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" },
|
||||
{ a: "ASVAL_201903120001", b: "小红", c: "女", d: "财务四科", e: "T3", key: "1003" },
|
||||
{ a: "ASVAL_201903120002", b: "小姚", c: "女", d: "财务一科", e: "T2", key: "1004" },
|
||||
{ a: "ASVAL_201903120003", b: "小岳", c: "男", d: "财务五科", e: "T2", key: "1005" },
|
||||
{ a: "ASVAL_201903120004", b: "小王", c: "男", d: "财务一科", e: "T5", key: "1006" },
|
||||
{ a: "ASVAL_201903120005", b: "小绍", c: "男", d: "财务七科", e: "T2", key: "1007" },
|
||||
{ a: "ASVAL_201903120006", b: "小郭", c: "男", d: "财务一科", e: "T3", key: "1008" },
|
||||
{ a: "ASVAL_201903120007", b: "小杨", c: "女", d: "财务四科", e: "T2", key: "1009" }
|
||||
];
|
||||
|
||||
class Demo1201 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
/**
|
||||
* 行拖拽结束时触发
|
||||
* @param data 拖拽改变顺序后的新data数组
|
||||
* @param record 拖拽行的数据
|
||||
*/
|
||||
onDropRow = (data, record) => {
|
||||
console.log('重排序后的data： ', data);
|
||||
console.log('拖拽的行数据： ', record);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowDraggAble={true}
|
||||
onDropRow={this.onDropRow}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1201;
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
/**
|
||||
*
|
||||
* @title 按条件、值过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
|
||||
* demo0701
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns26 = [
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
};
|
||||
}
|
||||
/**
|
||||
*@param selectedList:当前选中的行数据
|
||||
*@param record 当前操作行数据
|
||||
*@param index 当前操作行索引
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (selectedList,record,index) => {
|
||||
console.log("selectedList", selectedList,"index",index);
|
||||
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
|
||||
// const allChecked = selectedList.length == 0?false:true;
|
||||
// record为undefind则为全选或者全不选
|
||||
// if(!record){
|
||||
// data12.forEach(item=>{
|
||||
// item._checked = allChecked;
|
||||
// })
|
||||
// }else{
|
||||
// data12[index]['_checked'] = record._checked;
|
||||
// }
|
||||
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
multiSelect={multiObj}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (record._checked) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。
|
||||
* Demo1302
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Radio from "bee-radio";
|
||||
|
||||
import Table from "../../src";
|
||||
import singleSelect from "../../src/lib/singleSelect.js";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" },
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" }
|
||||
];
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let SingleSelectTable = singleSelect(Table, Radio);
|
||||
|
||||
class Demo1302 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*@param selected 当前选中的行数据(当前操作行数据)
|
||||
*@param index 当前操作行索引
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (record,index) => {
|
||||
console.log("record", record, "index",index);
|
||||
|
||||
this.setState({
|
||||
selectedRowIndex:index
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
let {selectedRowIndex} = this.state;
|
||||
|
||||
return (
|
||||
<SingleSelectTable
|
||||
className="demo1302"
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data}
|
||||
selectedRowIndex={selectedRowIndex}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (index === selectedRowIndex) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1302;
|
||||
|
|
@ -1,18 +1,24 @@
|
|||
/**
|
||||
*
|
||||
* @title 复杂表格中行过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
* demo0702
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox} from "tinper-bee";
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
key: "1",
|
||||
|
|
@ -99,15 +105,39 @@ class Demo27 extends Component {
|
|||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onSelect = (item) => {
|
||||
onClick = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
</Dropdown>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
/**
|
||||
*
|
||||
* @title 模态框中行过滤
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Modal,Button} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
|
||||
const columns29 = [
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filterType: "text",
|
||||
filterDropdown: "show",
|
||||
filterDropdownIncludeKeys: ['LIKE', 'EQ']
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 170,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "number",
|
||||
filterDropdown: "show",
|
||||
filterDropdownType: "number",
|
||||
filterDropdownIncludeKeys: ['EQ'],
|
||||
filterInputNumberOptions: {
|
||||
max: 200,
|
||||
min: 0,
|
||||
step: 1,
|
||||
precision: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
width: 200,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",
|
||||
filterDropdown: "show",
|
||||
format: "YYYY-MM-DD"
|
||||
}
|
||||
];
|
||||
|
||||
const data29 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo29 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
show: false
|
||||
}
|
||||
this.close = this.close.bind(this);
|
||||
this.open = this.open.bind(this);
|
||||
}
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
close() {
|
||||
this.setState({
|
||||
show: false
|
||||
});
|
||||
}
|
||||
open() {
|
||||
this.setState({
|
||||
show: true
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (<div><Modal
|
||||
show={this.state.show}
|
||||
onHide={this.close}
|
||||
autoFocus={false}
|
||||
enforceFocus={false}
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>过滤行</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Table
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns29}
|
||||
data={data29} />
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Button colors="primary" onClick={this.open}>显示表格</Button>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo29;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
*
|
||||
* @title 无数据时显示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
const data10 = [
|
||||
|
||||
];
|
||||
|
||||
const emptyFunc = () => <span>这里没有数据！</span>
|
||||
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo10;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
*
|
||||
* @title loading表格
|
||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const columns17 = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data17 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo17 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
loading : true
|
||||
}
|
||||
}
|
||||
changeLoading = () => {
|
||||
this.setState({
|
||||
loading : !this.state.loading
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeLoading}
|
||||
>
|
||||
切换loading
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns17}
|
||||
data={data17}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
// loading={this.state.loading}或者是boolean
|
||||
loading={{show:this.state.loading,loadingType:"line"}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo17;
|
||||
|
|
@ -1,121 +1,120 @@
|
|||
/**
|
||||
*
|
||||
* @title 多列表头
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
* demo0402
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
width:400,
|
||||
children: [
|
||||
{
|
||||
title: "Company Address",
|
||||
dataIndex: "companyAddress",
|
||||
key: "companyAddress",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: "Company Name",
|
||||
dataIndex: "companyName",
|
||||
key: "companyName",
|
||||
width:200,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 2035,
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
|
||||
class Demo32 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
className={'demo32'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo32;
|
||||
/**
|
||||
*
|
||||
* @title 多表头
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
width:400,
|
||||
children: [
|
||||
{
|
||||
title: "Company Address",
|
||||
dataIndex: "companyAddress",
|
||||
key: "companyAddress",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: "Company Name",
|
||||
dataIndex: "companyName",
|
||||
key: "companyName",
|
||||
width:200,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 2035,
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo3;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.demo32{
|
||||
.demo3{
|
||||
.u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义行、列合并
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @title 表格行、列合并
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
* demo1108
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Button from 'bee-button';
|
||||
import Table from "../../src";
|
||||
|
||||
const renderContent = (value, row, index) => {
|
||||
|
|
@ -22,7 +20,7 @@ const renderContent = (value, row, index) => {
|
|||
};
|
||||
|
||||
const columns = [{
|
||||
title: '姓名',
|
||||
title: 'Name',
|
||||
key: "name",
|
||||
dataIndex: 'name',
|
||||
render: (text, row, index) => {
|
||||
|
|
@ -37,12 +35,12 @@ const columns = [{
|
|||
};
|
||||
},
|
||||
}, {
|
||||
title: '年龄',
|
||||
key: "age",
|
||||
title: 'Age',
|
||||
key: "Age",
|
||||
dataIndex: 'age',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '联系方式',
|
||||
title: 'Home phone',
|
||||
colSpan: 2,
|
||||
key: "tel",
|
||||
dataIndex: 'tel',
|
||||
|
|
@ -63,115 +61,59 @@ const columns = [{
|
|||
return obj;
|
||||
},
|
||||
}, {
|
||||
title: '手机号',
|
||||
title: 'Phone',
|
||||
colSpan: 0,
|
||||
key: "phone",
|
||||
dataIndex: 'phone',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '家庭住址',
|
||||
title: 'Address',
|
||||
key: "address",
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
|
||||
|
||||
const columns1 = [{
|
||||
title: '姓名',
|
||||
key: "name",
|
||||
dataIndex: 'name',
|
||||
render: (text, row, index) => {
|
||||
if (index < 4) {
|
||||
return <a href="#">{text}</a>;
|
||||
}
|
||||
return {
|
||||
children: <a href="#">{text}</a>,
|
||||
props: {
|
||||
colSpan: 5,
|
||||
},
|
||||
};
|
||||
},
|
||||
}, {
|
||||
title: '年龄',
|
||||
key: "age",
|
||||
dataIndex: 'age',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '联系方式',
|
||||
colSpan: 2,
|
||||
key: "tel",
|
||||
dataIndex: 'tel',
|
||||
render: renderContent
|
||||
}, {
|
||||
title: '手机号',
|
||||
colSpan: 0,
|
||||
key: "phone",
|
||||
dataIndex: 'phone',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '家庭住址',
|
||||
key: "address",
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: '小红',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
tel: '0571-22098909',
|
||||
phone: 18889898989,
|
||||
address: '北京海淀',
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '小明',
|
||||
name: 'Jim Green',
|
||||
tel: '0571-22098333',
|
||||
phone: 18889898888,
|
||||
age: 42,
|
||||
address: '河北张家口',
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: '张三',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '浙江杭州',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}, {
|
||||
key: '4',
|
||||
name: '李四',
|
||||
name: 'Jim Red',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '广州深圳',
|
||||
address: 'London No. 2 Lake Park',
|
||||
}, {
|
||||
key: '5',
|
||||
name: '王五',
|
||||
name: 'Jake White',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '北京昌平',
|
||||
address: 'Dublin No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
class Demo15 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
colFlag:false
|
||||
}
|
||||
}
|
||||
onChange=()=>{
|
||||
const colFlag = this.state.colFlag;
|
||||
this.setState({
|
||||
colFlag:!colFlag
|
||||
})
|
||||
}
|
||||
render() {
|
||||
let cols = this.state.colFlag?columns:columns1;
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.onChange} colors="secondary" style={{marginBottom:'8px'}}>change列</Button>
|
||||
<Table columns={cols} data={data} bordered/>
|
||||
</div>
|
||||
|
||||
<Table columns={columns} data={data}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data12
|
||||
};
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
/**
|
||||
*
|
||||
* @title 多列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
|
||||
* demo0903
|
||||
* @title 多功能表格
|
||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -15,51 +14,46 @@ import sum from "../../src/lib/sum.js";
|
|||
|
||||
const columns13 = [
|
||||
{
|
||||
title: "订单编号",
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
className:'dfasd',
|
||||
width: 200,
|
||||
sorter: (pre, after) => {return pre.a.localeCompare(after.a)},
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
title: "功力指数",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.b - after.b,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.c - after.c,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日销售量",
|
||||
title: "成绩",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.e - after.e,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
|
|
@ -67,16 +61,16 @@ const columns13 = [
|
|||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
|
||||
{ a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
|
||||
{ a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
|
||||
{ a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
|
||||
{ a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
|
||||
{ a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
|
||||
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
|
||||
{ a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
|
||||
{ a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
|
||||
{ a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
|
||||
];
|
||||
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
|
||||
let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -121,10 +115,9 @@ class Demo13 extends Component {
|
|||
return (
|
||||
<div>
|
||||
<Button className="editable-add-btn" onClick={this.onClick}>
|
||||
清空已选
|
||||
change selectedRow
|
||||
</Button>
|
||||
<ComplexTable
|
||||
bordered
|
||||
selectDisabled={this.state.selectDisabled}
|
||||
selectedRow={this.state.selectedRow}
|
||||
columns={columns13}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
/**
|
||||
*
|
||||
* @title 合并列后合计
|
||||
* @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
let ComplexTable = sum(Table);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
// width: 100,
|
||||
sumCol: true,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: "Company",
|
||||
// children: [
|
||||
// {
|
||||
// title: "Company Address",
|
||||
// dataIndex: "companyAddress",
|
||||
// key: "companyAddress",
|
||||
// width: 100,
|
||||
// },
|
||||
// {
|
||||
// title: "Company Name",
|
||||
// dataIndex: "companyName",
|
||||
// key: "companyName",
|
||||
// width: 100,
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 80,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
function getData(){
|
||||
const data = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown"+i,
|
||||
age: i + Math.floor(Math.random()*10),
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 20 * Math.floor(Math.random()*10),
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
class Demo18 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData()
|
||||
};
|
||||
}
|
||||
|
||||
changeData = ()=>{
|
||||
this.setState({
|
||||
data: getData()
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo18;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
*
|
||||
* @title 选中行颜色、表头表体
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/**
|
||||
*
|
||||
* @title 主子表
|
||||
* @description 主表点击子表联动
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns7 = [
|
||||
{ title: "班级", dataIndex: "a", key: "a" },
|
||||
{ title: "人数", dataIndex: "b", key: "b" },
|
||||
{ title: "班主任", dataIndex: "c", key: "c" },
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data7 = [
|
||||
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
|
||||
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
|
||||
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
|
||||
];
|
||||
|
||||
const columns7_1 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
||||
{ title: "班级", dataIndex: "b", key: "b" },
|
||||
{ title: "系别", dataIndex: "c", key: "c" }
|
||||
];
|
||||
|
||||
class Demo7 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
children_data: []
|
||||
};
|
||||
}
|
||||
|
||||
rowclick = (record, index) => {
|
||||
if (record.a === "02级一班") {
|
||||
this.setState({
|
||||
children_data: [
|
||||
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
|
||||
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
|
||||
]
|
||||
});
|
||||
} else if (record.a === "03级二班") {
|
||||
this.setState({
|
||||
children_data: [
|
||||
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
|
||||
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
|
||||
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
|
||||
]
|
||||
});
|
||||
} else if (record.a === "05级三班") {
|
||||
this.setState({
|
||||
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
columns={columns7}
|
||||
data={data7}
|
||||
onRowClick={this.rowclick}
|
||||
title={currentData => <div>标题: 我是主表</div>}
|
||||
/>
|
||||
<Table
|
||||
style={{ marginTop: 40 }}
|
||||
columns={columns7_1}
|
||||
data={this.state.children_data}
|
||||
title={currentData => <div>标题: 我是子表</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo7;
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+分页
|
||||
* @parent 分页 Pagination
|
||||
* @description 点击分页联动表格
|
||||
* demo1601
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -10,22 +9,26 @@ import {Pagination} from "tinper-bee";
|
|||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
const columns8 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const pageData = {
|
||||
1: [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
],
|
||||
2: [
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" },
|
||||
{ a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
|
||||
{ a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -48,7 +51,7 @@ class Demo8 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="demo8">
|
||||
<Table columns={columns} data={this.state.data} />
|
||||
<Table columns={columns8} data={this.state.data} />
|
||||
<Pagination
|
||||
first
|
||||
last
|
||||
|
|
@ -60,7 +63,6 @@ class Demo8 extends Component {
|
|||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
noBorder={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
/>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @description 搜索刷新表格数据
|
||||
*
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Icon,FormControl,InputGroup} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
class Search extends Component {
|
||||
state = {
|
||||
searchValue: "",
|
||||
empty: false
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch = () => {
|
||||
let { onSearch } = this.props;
|
||||
this.setState({
|
||||
empty: true
|
||||
});
|
||||
onSearch && onSearch(this.state.searchValue);
|
||||
};
|
||||
|
||||
/**
|
||||
* 捕获回车
|
||||
* @param e
|
||||
*/
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
{this.state.empty ? (
|
||||
<Icon
|
||||
type="uf-close-c"
|
||||
onClick={this.emptySearch}
|
||||
className="empty-search"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<InputGroup.Button onClick={this.handleSearch} shape="border">
|
||||
<Icon type="uf-search" />
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const columns9 = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
];
|
||||
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: userData
|
||||
};
|
||||
}
|
||||
|
||||
handleSearch = value => {
|
||||
if (value === "") {
|
||||
return this.setState({
|
||||
data: userData
|
||||
});
|
||||
}
|
||||
let regExp = new RegExp(value, "ig");
|
||||
let data = userData.filter(item => regExp.test(item.a));
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
handleEmpty = () => {
|
||||
this.setState({
|
||||
data: userData
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="clearfix">
|
||||
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
|
||||
</div>
|
||||
<Table columns={columns9} data={this.state.data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo9;
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
const InputRender = renderInput(Form, FormControl, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo14 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "普通输入",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="number"
|
||||
placeholder="请输入货币"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "number")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "复选",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
size="sm"
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo14;
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 万行以上数据渲染
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description 万行数据渲染
|
||||
* demo1401
|
||||
* @title 滚动加载
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -15,7 +13,7 @@ const columns = [
|
|||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'60',
|
||||
width:'50',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
|
|
@ -27,12 +25,12 @@ const columns = [
|
|||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "40px",
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
@ -68,6 +66,7 @@ class Demo30 extends Component {
|
|||
columns={columns}
|
||||
data={data}
|
||||
scroll={{y:300}}
|
||||
height={40}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue