Compare commits
164 Commits
ncc_2.2.30
...
master
| Author | SHA1 | Date |
|---|---|---|
|
|
ff38f7a6af | |
|
|
721a9ac7a6 | |
|
|
ca7abb5b14 | |
|
|
7c71bcf6eb | |
|
|
816617051a | |
|
|
df2fd6d32c | |
|
|
a9ae23bf7d | |
|
|
b76fd30f8a | |
|
|
5906420fc4 | |
|
|
0e2e866a5e | |
|
|
dcbb145328 | |
|
|
84470fed2e | |
|
|
69d6a2216b | |
|
|
27c08b3f0d | |
|
|
390a8a4e5f | |
|
|
95637d9eac | |
|
|
b487e67f45 | |
|
|
17725af721 | |
|
|
f376b31b44 | |
|
|
e62107a4b0 | |
|
|
d60a6c03b0 | |
|
|
ebd8269b9f | |
|
|
f5f381c3f1 | |
|
|
6e87593017 | |
|
|
1da9313221 | |
|
|
fe869e7217 | |
|
|
a19770beee | |
|
|
464cc6fccf | |
|
|
b7a75a3a1e | |
|
|
eb3af7d24e | |
|
|
c2cf138000 | |
|
|
26cda00581 | |
|
|
00f282ca7e | |
|
|
64bddec252 | |
|
|
8a0bba14dd | |
|
|
2e48c17f25 | |
|
|
9e7b9f763d | |
|
|
7558e57018 | |
|
|
b581de4fe9 | |
|
|
3c3c47db32 | |
|
|
4ec5557598 | |
|
|
a5d86534be | |
|
|
aaed13e959 | |
|
|
34e748e5b4 | |
|
|
3acd6ea33e | |
|
|
36c309303a | |
|
|
f8ff20f30a | |
|
|
72a4e0c1c3 | |
|
|
8d87472b4e | |
|
|
205b89d00f | |
|
|
0262533133 | |
|
|
3b1ffecacd | |
|
|
478f9853ec | |
|
|
2521dbbc53 | |
|
|
cb40026e8c | |
|
|
bac23ca5c0 | |
|
|
6c260cd227 | |
|
|
b93e8a78ca | |
|
|
0b0de67e8c | |
|
|
b2362185f5 | |
|
|
287758057f | |
|
|
f346d7a45c | |
|
|
5bb2478cda | |
|
|
ee3869e1af | |
|
|
05d175a94f | |
|
|
18863f483f | |
|
|
b6eafe606d | |
|
|
43266f2f0b | |
|
|
ad20739ece | |
|
|
0a8f8c362b | |
|
|
90f2de3bbb | |
|
|
5cbd047e6e | |
|
|
0a36b7aa7f | |
|
|
c6e520db0f | |
|
|
b23c699566 | |
|
|
e96497cf59 | |
|
|
e26480451c | |
|
|
dc00d42445 | |
|
|
3e3b11508d | |
|
|
0ea470deb0 | |
|
|
8aebc77957 | |
|
|
e8cb440d93 | |
|
|
7147516dd3 | |
|
|
4b551c777e | |
|
|
c29a6cf112 | |
|
|
422c4821a7 | |
|
|
94e19ce4b9 | |
|
|
f34847484d | |
|
|
13c9eb1ede | |
|
|
17bf7b9c49 | |
|
|
54f77ec52e | |
|
|
bc5aa63851 | |
|
|
286a4f43be | |
|
|
4f2b4afd2c | |
|
|
f3541dfe03 | |
|
|
ecf0664a3c | |
|
|
bb7505cb8c | |
|
|
b42d80b02a | |
|
|
d096c7c52f | |
|
|
2a06e5fa8f | |
|
|
a0565cc3b1 | |
|
|
2cb8982d67 | |
|
|
e84689ea91 | |
|
|
527a3b5f1e | |
|
|
b5eab50b9a | |
|
|
3dd267d7a2 | |
|
|
ba52c43140 | |
|
|
02d962563b | |
|
|
45af804334 | |
|
|
4c6f69fcab | |
|
|
aed4d447af | |
|
|
3b8c65d02b | |
|
|
799b2c6725 | |
|
|
b9fff29c57 | |
|
|
7bbf5e3f6b | |
|
|
344e948141 | |
|
|
ba317900d3 | |
|
|
7bd56ddcb0 | |
|
|
b80e703b77 | |
|
|
744a0f0f7b | |
|
|
532fbb4851 | |
|
|
803ec7ce04 | |
|
|
b9c99bb547 | |
|
|
386af02ce8 | |
|
|
0977659081 | |
|
|
fb7446d973 | |
|
|
b4b0c95c9c | |
|
|
3a6626c43b | |
|
|
a4df9cef69 | |
|
|
fdc12b3d12 | |
|
|
ead7706fd8 | |
|
|
fd939c0855 | |
|
|
a24a865f7a | |
|
|
c9729d12ad | |
|
|
e112f641f4 | |
|
|
acfc791e3e | |
|
|
80e92a7871 | |
|
|
606ed5d901 | |
|
|
0e21ef0e3b | |
|
|
da2414b196 | |
|
|
87be595ae5 | |
|
|
98e5e14d9a | |
|
|
4452dc6a69 | |
|
|
792698025a | |
|
|
1fe5f5705c | |
|
|
2eaf88a845 | |
|
|
99c0289e09 | |
|
|
3aec58960d | |
|
|
f892ba3a17 | |
|
|
58f2e80ff0 | |
|
|
910c10469d | |
|
|
7ed1cd7693 | |
|
|
4a1c146f51 | |
|
|
32892ecd9a | |
|
|
7a27bc5ed6 | |
|
|
4ec97d962d | |
|
|
8ba7a7b552 | |
|
|
41a51ce2d4 | |
|
|
1402f50d18 | |
|
|
ee5fa5123a | |
|
|
e7388e3d32 | |
|
|
b6201d7319 | |
|
|
f3383c0675 | |
|
|
b183fde817 |
|
|
@ -0,0 +1,46 @@
|
|||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
name: Publish
|
||||
jobs:
|
||||
# test:
|
||||
# runs-on: ubuntu-latest
|
||||
# steps:
|
||||
# - uses: actions/checkout@v2
|
||||
# - uses: actions/setup-node@v1
|
||||
# with:
|
||||
# node-version: 10
|
||||
# - run: npm i -g bee-tools-test
|
||||
# - run: npm i
|
||||
# - run: npm test
|
||||
|
||||
publish:
|
||||
# needs: test
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm i -g bee-tools
|
||||
- run: npm i
|
||||
- run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
||||
- uses: iuap-design/actions-ynpm-sync@master
|
||||
|
||||
github-release:
|
||||
needs: publish
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm i -g github-release-from-changelog
|
||||
- run: github-release-from-changelog
|
||||
env:
|
||||
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
||||
|
|
@ -40,4 +40,8 @@ coverage
|
|||
.*.swp
|
||||
package-lock.json
|
||||
demo/.DS_Store
|
||||
demo/demolist/.DS_Store
|
||||
demo/demolist/.DS_Store
|
||||
|
||||
# vsCode
|
||||
.history
|
||||
.docker
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"hooks": {
|
||||
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
|
||||
}
|
||||
}
|
||||
|
|
@ -26,3 +26,8 @@ sea-modules
|
|||
spm_modules
|
||||
.cache
|
||||
coverage
|
||||
demo
|
||||
docs
|
||||
test
|
||||
dist
|
||||
.npmignore
|
||||
1312
CHANGELOG.md
1312
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
682
README.md
682
README.md
|
|
@ -1,339 +1,343 @@
|
|||
# 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 |
|
||||
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
|
||||
| onDrop | 交换列的回调函数 | function | (event,data,columns) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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: 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
|
||||
|notRowDrag| rowDraggAble 为true时表示这个表格是可以行拖拽改变顺序的,notRowDrag为true可以实现某一列来控制这行是否可以拖拽|bool| 默认为false的,不会控制当前行是否拖拽。
|
||||
|
||||
## 快捷键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 |
|
||||
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
|
||||
| onDrop | 交换列的回调函数 | function | (event,data,columns) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
##change
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -224,7 +224,8 @@ var ColumnManager = function () {
|
|||
return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
|
||||
};
|
||||
|
||||
ColumnManager.prototype.reset = function reset(columns, elements, showRowNum) {
|
||||
ColumnManager.prototype.reset = function reset(columns, elements, showRowNum, rowDraggAble) {
|
||||
columns = this.addDragHandleColumn(columns, rowDraggAble);
|
||||
columns = this.addOrderColumn(columns, showRowNum);
|
||||
columns = this.deleteColumnNotShow(columns);
|
||||
this.columns = columns || this.normalize(elements);
|
||||
|
|
@ -340,6 +341,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
width: 49,
|
||||
draggable: true,
|
||||
render: function render() {
|
||||
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -313,5 +313,8 @@ FilterDropDown.defaultProps = {
|
|||
filterDropdownType: 'string'
|
||||
};
|
||||
|
||||
FilterDropDown.contextTypes = {
|
||||
beeLocale: _propTypes2["default"].object
|
||||
};
|
||||
exports["default"] = FilterDropDown;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -48,7 +48,10 @@ 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 RangePicker = _beeDatepicker2["default"].RangePicker;
|
||||
var RangePicker = _beeDatepicker2["default"].RangePicker,
|
||||
YearPicker = _beeDatepicker2["default"].YearPicker,
|
||||
MonthPicker = _beeDatepicker2["default"].MonthPicker,
|
||||
WeekPicker = _beeDatepicker2["default"].WeekPicker;
|
||||
|
||||
|
||||
var propTypes = {
|
||||
|
|
@ -80,15 +83,21 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.changeText = function (val) {
|
||||
var _this$props2 = _this.props,
|
||||
onFilterChange = _this$props2.onFilterChange,
|
||||
dataIndex = _this$props2.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: val
|
||||
}, function () {
|
||||
onFilterChange(dataIndex, val, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeTextCall = function (e) {
|
||||
var _this$props2 = _this.props,
|
||||
onFilterChange = _this$props2.onFilterChange,
|
||||
dataIndex = _this$props2.dataIndex;
|
||||
var _this$props3 = _this.props,
|
||||
onFilterChange = _this$props3.onFilterChange,
|
||||
dataIndex = _this$props3.dataIndex;
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
|
|
@ -102,9 +111,9 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props3 = _this.props,
|
||||
onFilterChange = _this$props3.onFilterChange,
|
||||
dataIndex = _this$props3.dataIndex;
|
||||
var _this$props4 = _this.props,
|
||||
onFilterChange = _this$props4.onFilterChange,
|
||||
dataIndex = _this$props4.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
condition: item.key
|
||||
|
|
@ -114,9 +123,9 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.changeNumber = function (value) {
|
||||
var _this$props4 = _this.props,
|
||||
onFilterChange = _this$props4.onFilterChange,
|
||||
dataIndex = _this$props4.dataIndex;
|
||||
var _this$props5 = _this.props,
|
||||
onFilterChange = _this$props5.onFilterChange,
|
||||
dataIndex = _this$props5.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: value
|
||||
|
|
@ -141,9 +150,9 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.changeSelect = function (value) {
|
||||
var _this$props5 = _this.props,
|
||||
onFilterChange = _this$props5.onFilterChange,
|
||||
dataIndex = _this$props5.dataIndex;
|
||||
var _this$props6 = _this.props,
|
||||
onFilterChange = _this$props6.onFilterChange,
|
||||
dataIndex = _this$props6.dataIndex;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
|
|
@ -170,9 +179,9 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.changeDate = function (value) {
|
||||
var _this$props6 = _this.props,
|
||||
onFilterChange = _this$props6.onFilterChange,
|
||||
dataIndex = _this$props6.dataIndex;
|
||||
var _this$props7 = _this.props,
|
||||
onFilterChange = _this$props7.onFilterChange,
|
||||
dataIndex = _this$props7.dataIndex;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
|
|
@ -184,18 +193,18 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.renderControl = function (rendertype) {
|
||||
var _this$props7 = _this.props,
|
||||
filterInputNumberOptions = _this$props7.filterInputNumberOptions,
|
||||
filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys,
|
||||
dataIndex = _this$props7.dataIndex,
|
||||
filterDropdown = _this$props7.filterDropdown,
|
||||
filterDropdownType = _this$props7.filterDropdownType,
|
||||
format = _this$props7.format,
|
||||
className = _this$props7.className,
|
||||
onChange = _this$props7.onChange,
|
||||
onSelectDropdown = _this$props7.onSelectDropdown,
|
||||
clsPrefix = _this$props7.clsPrefix,
|
||||
locale = _this$props7.locale;
|
||||
var _this$props8 = _this.props,
|
||||
filterInputNumberOptions = _this$props8.filterInputNumberOptions,
|
||||
filterDropdownIncludeKeys = _this$props8.filterDropdownIncludeKeys,
|
||||
dataIndex = _this$props8.dataIndex,
|
||||
filterDropdown = _this$props8.filterDropdown,
|
||||
filterDropdownType = _this$props8.filterDropdownType,
|
||||
format = _this$props8.format,
|
||||
className = _this$props8.className,
|
||||
onChange = _this$props8.onChange,
|
||||
onSelectDropdown = _this$props8.onSelectDropdown,
|
||||
clsPrefix = _this$props8.clsPrefix,
|
||||
locale = _this$props8.locale;
|
||||
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
|
|
@ -287,6 +296,75 @@ var FilterType = function (_Component) {
|
|||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dateyear':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(YearPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'datemonth':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(MonthPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dateweek':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(WeekPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'daterange':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -395,7 +473,7 @@ var FilterType = function (_Component) {
|
|||
/**
|
||||
* 根据不同的类型生成对应的组件类型包含一些参数的适应
|
||||
*
|
||||
* @param {*} rendertype 参数类型,包括['text','dropdown','date','daterange','number']
|
||||
* @param {*} rendertype 参数类型,包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
|
||||
* @returns
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -177,6 +177,8 @@
|
|||
position: relative;
|
||||
line-height: 1.33;
|
||||
overflow: hidden; }
|
||||
.u-table.copy .u-table-thead th {
|
||||
user-select: unset; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
.u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
|
||||
|
|
@ -617,7 +619,7 @@
|
|||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
.u-table .row-dragg-able {
|
||||
.u-table .drag-handle-column, .u-table .row-dragg-able {
|
||||
cursor: move; }
|
||||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
|
|
|
|||
341
build/Table.js
341
build/Table.js
|
|
@ -84,6 +84,8 @@ var propTypes = {
|
|||
//特殊的渲染规则的key值
|
||||
rowKey: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].func]),
|
||||
rowClassName: _propTypes2["default"].func,
|
||||
//column的主键,和 column.key 作用相同
|
||||
columnKey: _propTypes2["default"].string,
|
||||
expandedRowClassName: _propTypes2["default"].func,
|
||||
childrenColumnName: _propTypes2["default"].string,
|
||||
onExpand: _propTypes2["default"].func,
|
||||
|
|
@ -113,12 +115,15 @@ var propTypes = {
|
|||
hoverContent: _propTypes2["default"].func,
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
hideDragHandle: _propTypes2["default"].bool, // 隐藏行拖拽把手
|
||||
onDropRow: _propTypes2["default"].func,
|
||||
onDragRowStart: _propTypes2["default"].func,
|
||||
onBodyScroll: _propTypes2["default"].func,
|
||||
bodyDisplayInRow: _propTypes2["default"].bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||||
headerDisplayInRow: _propTypes2["default"].bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||||
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]) // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
showRowNum: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
onPaste: _propTypes2["default"].func,
|
||||
onBodyMouseLeave: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -127,6 +132,7 @@ var defaultProps = {
|
|||
expandIconAsCell: false,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
columnKey: 'key',
|
||||
rowKey: 'key',
|
||||
rowClassName: function rowClassName() {
|
||||
return '';
|
||||
|
|
@ -158,18 +164,20 @@ var defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale: {},
|
||||
syncHover: true,
|
||||
setRowHeight: function setRowHeight() {},
|
||||
// setRowHeight:()=>{},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
size: 'md',
|
||||
rowDraggAble: false,
|
||||
hideDragHandle: false,
|
||||
onDropRow: function onDropRow() {},
|
||||
onDragRowStart: function onDragRowStart() {},
|
||||
onBodyScroll: function onBodyScroll() {},
|
||||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false
|
||||
showRowNum: false,
|
||||
onPaste: function onPaste() {}
|
||||
};
|
||||
|
||||
var expandIconCellWidth = Number(43);
|
||||
|
|
@ -232,11 +240,15 @@ var Table = function (_Component) {
|
|||
targetIndex = i;
|
||||
}
|
||||
});
|
||||
data = _this.swapArray(data, currentIndex, targetIndex);
|
||||
_this.props.onDropRow && _this.props.onDropRow(data, record);
|
||||
_this.setState({
|
||||
data: data
|
||||
});
|
||||
if (currentIndex > -1) {
|
||||
data = _this.swapArray(data, currentIndex, targetIndex);
|
||||
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
||||
_this.setState({
|
||||
data: data
|
||||
});
|
||||
} else {
|
||||
_this.props.onDropRow && _this.props.onDropRow(data, record, targetIndex);
|
||||
}
|
||||
};
|
||||
|
||||
_this.swapArray = function (arr, index1, index2) {
|
||||
|
|
@ -269,12 +281,28 @@ var Table = function (_Component) {
|
|||
);
|
||||
};
|
||||
|
||||
_this.getTdPadding = function (td) {
|
||||
var tdPaddingTop = _this.getStyle(td, 'paddingTop'),
|
||||
tdPaddingBottom = _this.getStyle(td, 'paddingBottom'),
|
||||
tdBorderTop = _this.getStyle(td, 'borderTopWidth'),
|
||||
tdBorderBottom = _this.getStyle(td, 'borderBottomWidth');
|
||||
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
||||
};
|
||||
|
||||
_this.clearBodyMouseLeaveTimer = function () {
|
||||
if (_this.bodyMouseLeaveTimmer) {
|
||||
clearTimeout(_this.bodyMouseLeaveTimmer);
|
||||
_this.bodyMouseLeaveTimmer = null;
|
||||
}
|
||||
};
|
||||
|
||||
_this.onRowHoverMouseEnter = function () {
|
||||
|
||||
_this.store.setState({
|
||||
currentHoverKey: _this.currentHoverKey
|
||||
});
|
||||
_this.hoverDom.style.display = 'block';
|
||||
_this.clearBodyMouseLeaveTimer();
|
||||
};
|
||||
|
||||
_this.onRowHoverMouseLeave = function () {};
|
||||
|
|
@ -300,7 +328,8 @@ var Table = function (_Component) {
|
|||
|
||||
var expandedRowKeys = [];
|
||||
var rows = [].concat(_toConsumableArray(props.data));
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
|
||||
var showDragHandle = !props.hideDragHandle && props.rowDraggAble;
|
||||
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum); // 加入props.showRowNum参数
|
||||
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
|
||||
_this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -353,7 +382,7 @@ var Table = function (_Component) {
|
|||
_this.tableUid = null;
|
||||
_this.contentTable = null;
|
||||
_this.leftColumnsLength; //左侧固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
|
||||
return _this;
|
||||
}
|
||||
|
|
@ -383,6 +412,11 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var _props = this.props,
|
||||
hideDragHandle = _props.hideDragHandle,
|
||||
rowDraggAble = _props.rowDraggAble,
|
||||
showRowNum = _props.showRowNum;
|
||||
|
||||
if ('data' in nextProps) {
|
||||
this.setState({
|
||||
data: nextProps.data
|
||||
|
|
@ -394,18 +428,23 @@ var Table = function (_Component) {
|
|||
});
|
||||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
this.columnManager.reset(nextProps.columns, null, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||||
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
|
||||
this.scrollTop = this.bodyTable.scrollTop;
|
||||
}
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children, this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
this.columnManager.reset(null, nextProps.children, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||||
}
|
||||
//适配lazyload
|
||||
if (nextProps.scrollTop > -1) {
|
||||
// this.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
this.scrollTop = nextProps.scrollTop;
|
||||
}
|
||||
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||
// fix:表格首次渲染时 display:none,再显示时,未重新计算,导致表行出现错位的bug
|
||||
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
this.firstDid = true; //避免重复update
|
||||
|
|
@ -413,11 +452,6 @@ var Table = function (_Component) {
|
|||
if (nextProps.resetScroll) {
|
||||
this.resetScrollX();
|
||||
}
|
||||
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||
// fix:表格首次渲染时 display:none,再显示时,未重新计算,导致表行出现错位的bug
|
||||
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||||
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||
}
|
||||
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
};
|
||||
|
|
@ -440,9 +474,10 @@ var Table = function (_Component) {
|
|||
this.bodyTable.scrollTop = this.scrollTop;
|
||||
this.scrollTop = -1;
|
||||
}
|
||||
if (prevProps.data.length === 0 || this.props.data.length === 0) {
|
||||
this.resetScrollX();
|
||||
}
|
||||
// 当表格没有数据时,重置滚动条位置,造成grid里面的表头列无法操作
|
||||
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
// this.resetScrollX();
|
||||
// }
|
||||
|
||||
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
|
|
@ -586,33 +621,36 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
var lastShowIndex = this.state.lastShowIndex;
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
onFilterChange = _props.onFilterChange,
|
||||
onFilterClear = _props.onFilterClear,
|
||||
filterable = _props.filterable,
|
||||
showHeader = _props.showHeader,
|
||||
expandIconAsCell = _props.expandIconAsCell,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
onDragStart = _props.onDragStart,
|
||||
onDragEnter = _props.onDragEnter,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
onDragEnd = _props.onDragEnd,
|
||||
draggable = _props.draggable,
|
||||
onMouseDown = _props.onMouseDown,
|
||||
onMouseMove = _props.onMouseMove,
|
||||
onMouseUp = _props.onMouseUp,
|
||||
dragborder = _props.dragborder,
|
||||
onThMouseMove = _props.onThMouseMove,
|
||||
dragborderKey = _props.dragborderKey,
|
||||
minColumnWidth = _props.minColumnWidth,
|
||||
headerHeight = _props.headerHeight,
|
||||
afterDragColWidth = _props.afterDragColWidth,
|
||||
headerScroll = _props.headerScroll,
|
||||
bordered = _props.bordered,
|
||||
onDropBorder = _props.onDropBorder,
|
||||
onDraggingBorder = _props.onDraggingBorder;
|
||||
var _props2 = this.props,
|
||||
filterDelay = _props2.filterDelay,
|
||||
onFilterChange = _props2.onFilterChange,
|
||||
onFilterClear = _props2.onFilterClear,
|
||||
filterable = _props2.filterable,
|
||||
showHeader = _props2.showHeader,
|
||||
expandIconAsCell = _props2.expandIconAsCell,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
onDragStart = _props2.onDragStart,
|
||||
onDragEnter = _props2.onDragEnter,
|
||||
onDragOver = _props2.onDragOver,
|
||||
onDrop = _props2.onDrop,
|
||||
onDragEnd = _props2.onDragEnd,
|
||||
draggable = _props2.draggable,
|
||||
onMouseDown = _props2.onMouseDown,
|
||||
onMouseMove = _props2.onMouseMove,
|
||||
onMouseUp = _props2.onMouseUp,
|
||||
dragborder = _props2.dragborder,
|
||||
onThMouseMove = _props2.onThMouseMove,
|
||||
dragborderKey = _props2.dragborderKey,
|
||||
minColumnWidth = _props2.minColumnWidth,
|
||||
headerHeight = _props2.headerHeight,
|
||||
afterDragColWidth = _props2.afterDragColWidth,
|
||||
headerScroll = _props2.headerScroll,
|
||||
bordered = _props2.bordered,
|
||||
onDropBorder = _props2.onDropBorder,
|
||||
onDraggingBorder = _props2.onDraggingBorder,
|
||||
bodyDisplayInRow = _props2.bodyDisplayInRow,
|
||||
headerEventNoStop = _props2.headerEventNoStop,
|
||||
onCopy = _props2.onCopy;
|
||||
|
||||
this.columnsChildrenList = []; //复杂表头拖拽,重新render表头前,将其置空
|
||||
var rows = this.getHeaderRows(columns);
|
||||
|
|
@ -659,7 +697,10 @@ var Table = function (_Component) {
|
|||
headerScroll: headerScroll,
|
||||
bordered: bordered,
|
||||
leftFixedWidth: leftFixedWidth,
|
||||
rightFixedWidth: rightFixedWidth
|
||||
rightFixedWidth: rightFixedWidth,
|
||||
bodyDisplayInRow: bodyDisplayInRow,
|
||||
eventNoStop: headerEventNoStop,
|
||||
onCopy: onCopy
|
||||
})) : null;
|
||||
};
|
||||
|
||||
|
|
@ -668,6 +709,7 @@ var Table = function (_Component) {
|
|||
|
||||
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var rows = arguments[2];
|
||||
var columnKey = this.props.columnKey;
|
||||
var _state = this.state,
|
||||
_state$contentWidthDi = _state.contentWidthDiff,
|
||||
contentWidthDiff = _state$contentWidthDi === undefined ? 0 : _state$contentWidthDi,
|
||||
|
|
@ -679,6 +721,9 @@ var Table = function (_Component) {
|
|||
rows[currentRow] = rows[currentRow] || [];
|
||||
|
||||
columns.forEach(function (column, i) {
|
||||
if (!column.key) {
|
||||
column.key = column[columnKey];
|
||||
}
|
||||
if (column.rowSpan && rows.length < column.rowSpan) {
|
||||
while (rows.length < column.rowSpan) {
|
||||
rows.push([]);
|
||||
|
|
@ -690,7 +735,7 @@ var Table = function (_Component) {
|
|||
} else if (width) {
|
||||
width = parseInt(width);
|
||||
}
|
||||
if (lastShowIndex == i && width) {
|
||||
if (!column.fixed && lastShowIndex == i && width) {
|
||||
width = width + contentWidthDiff;
|
||||
}
|
||||
var cell = {
|
||||
|
|
@ -752,9 +797,11 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getExpandedRow = function getExpandedRow(key, content, visible, className, fixed) {
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
expandIconAsCell = _props2.expandIconAsCell;
|
||||
var _props3 = this.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
expandIconAsCell = _props3.expandIconAsCell,
|
||||
onPaste = _props3.onPaste,
|
||||
getCellClassName = _props3.getCellClassName;
|
||||
|
||||
var colCount = void 0;
|
||||
if (fixed === 'left') {
|
||||
|
|
@ -794,6 +841,7 @@ var Table = function (_Component) {
|
|||
});
|
||||
}
|
||||
return _react2["default"].createElement(_TableRow2["default"], {
|
||||
onPaste: onPaste,
|
||||
columns: columns,
|
||||
visible: visible,
|
||||
className: className,
|
||||
|
|
@ -804,9 +852,11 @@ var Table = function (_Component) {
|
|||
store: this.store,
|
||||
dragborderKey: this.props.dragborderKey,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
useDragHandle: this.props.useDragHandle,
|
||||
onDragRow: this.onDragRow,
|
||||
onDragRowStart: this.onDragRowStart,
|
||||
height: expandedRowHeight
|
||||
height: expandedRowHeight,
|
||||
getCellClassName: getCellClassName
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -849,6 +899,7 @@ var Table = function (_Component) {
|
|||
var childrenColumnName = props.childrenColumnName;
|
||||
var expandedRowRender = props.expandedRowRender;
|
||||
var expandRowByClick = props.expandRowByClick;
|
||||
var onPaste = props.onPaste;
|
||||
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
|
||||
|
||||
var rst = [];
|
||||
|
|
@ -865,7 +916,7 @@ var Table = function (_Component) {
|
|||
var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
|
||||
var expandIconColumnIndex = props.expandIconColumnIndex;
|
||||
if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
}
|
||||
var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
|
||||
var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
|
||||
|
|
@ -875,11 +926,11 @@ var Table = function (_Component) {
|
|||
var record = data[i];
|
||||
var key = this.getRowKey(record, i);
|
||||
// 兼容 NCC 以前的业务逻辑,支持外部通过 record 中的 isleaf 字段,判断是否为叶子节点
|
||||
record['isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['isLeaf'];
|
||||
// isLeaf 字段是在 bigData 里添加的,只有层级树大数据场景需要该字段
|
||||
// isLeaf 有三种取值情况:true / false / null。(Table内部字段)
|
||||
var isLeaf = typeof record['isLeaf'] === 'boolean' ? record['isLeaf'] : null;
|
||||
var childrenColumn = isLeaf ? false : record[childrenColumnName];
|
||||
record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
|
||||
// _isLeaf 字段是在 bigData 里添加的,只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况:true / false / null。(Table内部字段)
|
||||
var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
var childrenColumn = _isLeaf ? false : record[childrenColumnName];
|
||||
var isRowExpanded = this.isRowExpanded(record, i);
|
||||
var expandedRowContent = void 0;
|
||||
var expandedContentHeight = 0;
|
||||
|
|
@ -933,10 +984,11 @@ var Table = function (_Component) {
|
|||
index = i + lazyParentIndex;
|
||||
}
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||
onPaste: onPaste,
|
||||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
needIndentSpaced: needIndentSpaced,
|
||||
className: className + ' ' + (this.props.rowDraggAble ? ' row-dragg-able ' : ''),
|
||||
className: '' + className,
|
||||
record: record,
|
||||
expandIconAsCell: expandIconAsCell,
|
||||
onDestroy: this.onRowDestroy,
|
||||
|
|
@ -944,7 +996,7 @@ var Table = function (_Component) {
|
|||
visible: visible,
|
||||
expandRowByClick: expandRowByClick,
|
||||
onExpand: this.onExpanded,
|
||||
expandable: expandedRowRender || (childrenColumn && childrenColumn.length > 0 ? true : isLeaf === false),
|
||||
expandable: expandedRowRender || (childrenColumn && childrenColumn.length > 0 ? true : _isLeaf === false),
|
||||
expanded: isRowExpanded,
|
||||
clsPrefix: props.clsPrefix + '-row',
|
||||
childrenColumnName: childrenColumnName,
|
||||
|
|
@ -968,7 +1020,8 @@ var Table = function (_Component) {
|
|||
rootIndex: rootIndex,
|
||||
syncHover: props.syncHover,
|
||||
bodyDisplayInRow: props.bodyDisplayInRow,
|
||||
rowDraggAble: this.props.rowDraggAble,
|
||||
rowDraggAble: props.rowDraggAble,
|
||||
useDragHandle: props.useDragHandle,
|
||||
onDragRow: this.onDragRow,
|
||||
onDragRowStart: this.onDragRowStart,
|
||||
contentTable: this.contentTable,
|
||||
|
|
@ -979,7 +1032,8 @@ var Table = function (_Component) {
|
|||
lazyEndIndex: lazyEndIndex,
|
||||
centerColumnsLength: this.centerColumnsLength,
|
||||
leftColumnsLength: this.leftColumnsLength,
|
||||
expandIconCellWidth: expandIconCellWidth
|
||||
expandIconCellWidth: expandIconCellWidth,
|
||||
getCellClassName: props.getCellClassName
|
||||
})));
|
||||
this.treeRowIndex++;
|
||||
var subVisible = visible && isRowExpanded;
|
||||
|
|
@ -995,7 +1049,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
this.treeType = false;
|
||||
|
|
@ -1083,19 +1137,19 @@ var Table = function (_Component) {
|
|||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var columns = options.columns,
|
||||
fixed = options.fixed;
|
||||
var _props3 = this.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
_props3$scroll = _props3.scroll,
|
||||
scroll = _props3$scroll === undefined ? {} : _props3$scroll,
|
||||
getBodyWrapper = _props3.getBodyWrapper,
|
||||
footerScroll = _props3.footerScroll,
|
||||
headerScroll = _props3.headerScroll,
|
||||
_props3$hideHeaderScr = _props3.hideHeaderScroll,
|
||||
hideHeaderScroll = _props3$hideHeaderScr === undefined ? false : _props3$hideHeaderScr,
|
||||
expandIconAsCell = _props3.expandIconAsCell;
|
||||
var _props4 = this.props,
|
||||
useFixedHeader = _props4.useFixedHeader,
|
||||
data = _props4.data;
|
||||
clsPrefix = _props4.clsPrefix,
|
||||
_props4$scroll = _props4.scroll,
|
||||
scroll = _props4$scroll === undefined ? {} : _props4$scroll,
|
||||
getBodyWrapper = _props4.getBodyWrapper,
|
||||
footerScroll = _props4.footerScroll,
|
||||
headerScroll = _props4.headerScroll,
|
||||
_props4$hideHeaderScr = _props4.hideHeaderScroll,
|
||||
hideHeaderScroll = _props4$hideHeaderScr === undefined ? false : _props4$hideHeaderScr,
|
||||
expandIconAsCell = _props4.expandIconAsCell;
|
||||
var _props5 = this.props,
|
||||
useFixedHeader = _props5.useFixedHeader,
|
||||
data = _props5.data;
|
||||
|
||||
var bodyStyle = _extends({}, this.props.bodyStyle); // 这里为什么不写在上面?
|
||||
var headStyle = {};
|
||||
|
|
@ -1273,7 +1327,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
var expandIconWidth = expandIconAsCell ? 33 : 0;
|
||||
var expandIconWidth = expandIconAsCell ? 32 : 0;
|
||||
var parStyle = {};
|
||||
if (!fixed) {
|
||||
parStyle = { 'marginLeft': leftFixedWidth + expandIconWidth, 'marginRight': rightFixedWidth };
|
||||
|
|
@ -1287,9 +1341,9 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getTitle = function getTitle() {
|
||||
var _props5 = this.props,
|
||||
title = _props5.title,
|
||||
clsPrefix = _props5.clsPrefix;
|
||||
var _props6 = this.props,
|
||||
title = _props6.title,
|
||||
clsPrefix = _props6.clsPrefix;
|
||||
|
||||
return title ? _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1299,9 +1353,9 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getFooter = function getFooter() {
|
||||
var _props6 = this.props,
|
||||
footer = _props6.footer,
|
||||
clsPrefix = _props6.clsPrefix;
|
||||
var _props7 = this.props,
|
||||
footer = _props7.footer,
|
||||
clsPrefix = _props7.clsPrefix;
|
||||
|
||||
return footer ? _react2["default"].createElement(
|
||||
'div',
|
||||
|
|
@ -1311,10 +1365,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getEmptyText = function getEmptyText() {
|
||||
var _props7 = this.props,
|
||||
defaultEmptyText = _props7.emptyText,
|
||||
clsPrefix = _props7.clsPrefix,
|
||||
data = _props7.data;
|
||||
var _props8 = this.props,
|
||||
defaultEmptyText = _props8.emptyText,
|
||||
clsPrefix = _props8.clsPrefix,
|
||||
data = _props8.data;
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
|
|
@ -1353,15 +1407,25 @@ var Table = function (_Component) {
|
|||
return null;
|
||||
};
|
||||
|
||||
Table.prototype.getStyle = function getStyle(obj, attr) {
|
||||
if (obj.currentStyle) {
|
||||
return obj.currentStyle[attr];
|
||||
} else {
|
||||
return document.defaultView.getComputedStyle(obj, null)[attr];
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var _this5 = this;
|
||||
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度,如果有值,所有行的高度都是固定的,主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props8 = this.props,
|
||||
clsPrefix = _props8.clsPrefix,
|
||||
height = _props8.height,
|
||||
headerHeight = _props8.headerHeight,
|
||||
columns = _props8.columns,
|
||||
heightConsistent = _props8.heightConsistent,
|
||||
bodyDisplayInRow = _props8.bodyDisplayInRow;
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
height = _props9.height,
|
||||
headerHeight = _props9.headerHeight,
|
||||
columns = _props9.columns,
|
||||
heightConsistent = _props9.heightConsistent,
|
||||
bodyDisplayInRow = _props9.bodyDisplayInRow;
|
||||
|
||||
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
||||
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
|
||||
|
|
@ -1373,7 +1437,7 @@ var Table = function (_Component) {
|
|||
if (headerHeight) {
|
||||
height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
|
||||
}
|
||||
return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
|
||||
return headerHeight ? height : parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
});
|
||||
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
|
||||
var rsHeight = height;
|
||||
|
|
@ -1387,25 +1451,37 @@ var Table = function (_Component) {
|
|||
rightHeight = void 0,
|
||||
currentHeight = void 0,
|
||||
maxHeight = void 0;
|
||||
leftHeight = leftBodyRows[index] ? leftBodyRows[index].getBoundingClientRect().height : 0;
|
||||
rightHeight = rightBodyRows[index] ? rightBodyRows[index].getBoundingClientRect().height : 0;
|
||||
currentHeight = row.getBoundingClientRect().height;
|
||||
leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
currentHeight = parseInt(row.getBoundingClientRect().height);
|
||||
maxHeight = Math.max(leftHeight, rightHeight, currentHeight);
|
||||
return maxHeight || 'auto';
|
||||
} else {
|
||||
return row.getBoundingClientRect().height || 'auto';
|
||||
return parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
}
|
||||
}
|
||||
});
|
||||
var fixedColumnsExpandedRowsHeight = {};
|
||||
expandedRows.length > 0 && expandedRows.forEach(function (row) {
|
||||
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
|
||||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
|
||||
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
|
||||
var exHeight = height;
|
||||
if (!exHeight) {
|
||||
exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
try {
|
||||
//子表数据减少时,动态计算高度
|
||||
var td = row.querySelector('td');
|
||||
var tdPadding = _this5.getTdPadding(td);
|
||||
var trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
|
||||
exHeight = trueheight + tdPadding;
|
||||
} catch (error) {}
|
||||
}
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
|
||||
});
|
||||
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
|
||||
fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight,
|
||||
|
|
@ -1423,10 +1499,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var rows = this.getExpandedRows().filter(function (i) {
|
||||
return i === _this5.getRowKey(record, index);
|
||||
return i === _this6.getRowKey(record, index);
|
||||
});
|
||||
return rows[0];
|
||||
};
|
||||
|
|
@ -1437,6 +1513,15 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.onBodyMouseLeave = function onBodyMouseLeave(e) {
|
||||
this.hideHoverDom(e);
|
||||
var onBodyMouseLeave = this.props.onBodyMouseLeave;
|
||||
|
||||
if (typeof onBodyMouseLeave === 'function') {
|
||||
this.clearBodyMouseLeaveTimer();
|
||||
//因为鼠标移动到 hoverContent 中也会触发 onBodyMouseLeave,这是错误的
|
||||
//所以讲 onBodyMouseLeave 回调的调用放入 setTimeout中,
|
||||
// 当触发 hoverContent 的 onRowHoverMouseEnter 回调时,清除此定时器
|
||||
this.bodyMouseLeaveTimmer = setTimeout(onBodyMouseLeave, 0);
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.detectScrollTarget = function detectScrollTarget(e) {
|
||||
|
|
@ -1453,13 +1538,13 @@ 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,
|
||||
onBodyScroll = _props9.onBodyScroll;
|
||||
var _props10 = this.props,
|
||||
_props10$scroll = _props10.scroll,
|
||||
scroll = _props10$scroll === undefined ? {} : _props10$scroll,
|
||||
clsPrefix = _props10.clsPrefix,
|
||||
handleScrollY = _props10.handleScrollY,
|
||||
handleScrollX = _props10.handleScrollX,
|
||||
onBodyScroll = _props10.onBodyScroll;
|
||||
var _refs = this.refs,
|
||||
fixedColumnsBodyLeft = _refs.fixedColumnsBodyLeft,
|
||||
fixedColumnsBodyRight = _refs.fixedColumnsBodyRight;
|
||||
|
|
@ -1478,7 +1563,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (e.target.scrollLeft === 0) {
|
||||
position = 'left';
|
||||
} else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
|
||||
} else if (e.target.scrollLeft + 1 >= e.target.querySelector('table').getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
|
||||
position = 'right';
|
||||
} else if (this.state.scrollPosition !== 'middle') {
|
||||
position = 'middle';
|
||||
|
|
@ -1507,6 +1592,9 @@ var Table = function (_Component) {
|
|||
this.lastScrollTop = e.target.scrollTop;
|
||||
if (handleScrollY) {
|
||||
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType, onBodyScroll), 300);
|
||||
} else {
|
||||
//滚动回调
|
||||
onBodyScroll(this.lastScrollTop);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1516,10 +1604,10 @@ var Table = function (_Component) {
|
|||
|
||||
Table.prototype.handleRowHover = function handleRowHover(isHover, key, event, currentIndex, propsRecord) {
|
||||
//增加新的API,设置是否同步Hover状态,提高性能,避免无关的渲染
|
||||
var _props10 = this.props,
|
||||
syncHover = _props10.syncHover,
|
||||
onRowHover = _props10.onRowHover,
|
||||
data = _props10.data;
|
||||
var _props11 = this.props,
|
||||
syncHover = _props11.syncHover,
|
||||
onRowHover = _props11.onRowHover,
|
||||
data = _props11.data;
|
||||
//fix:树形表,onRowHover返回参数异常
|
||||
|
||||
var isTreeType = this.isTreeType;
|
||||
|
|
@ -1547,6 +1635,10 @@ var Table = function (_Component) {
|
|||
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.display = 'block';
|
||||
}
|
||||
this.setState({
|
||||
currentHoverIndex: currentIndex,
|
||||
currentHoverRecord: record
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1554,7 +1646,11 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this6 = this;
|
||||
var _this7 = this;
|
||||
|
||||
var _state3 = this.state,
|
||||
currentHoverRecord = _state3.currentHoverRecord,
|
||||
currentHoverIndex = _state3.currentHoverIndex;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
|
@ -1572,6 +1668,9 @@ var Table = function (_Component) {
|
|||
if (props.bordered) {
|
||||
className += ' ' + clsPrefix + '-bordered';
|
||||
}
|
||||
if (props.onCopy) {
|
||||
className += ' copy';
|
||||
}
|
||||
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
|
||||
//如果传入height说明是固定高度
|
||||
//内容过多折行显示时,height 属性会失效,为了避免产生错行
|
||||
|
|
@ -1601,7 +1700,7 @@ var Table = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this6.contentTable = el;
|
||||
return _this7.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
this.getTitle(),
|
||||
|
|
@ -1633,9 +1732,9 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{ className: 'u-row-hover',
|
||||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||||
return _this6.hoverDom = el;
|
||||
return _this7.hoverDom = el;
|
||||
} },
|
||||
props.hoverContent()
|
||||
props.hoverContent(currentHoverRecord, currentHoverIndex)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|||
|
||||
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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
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; }
|
||||
|
|
@ -53,7 +55,8 @@ var propTypes = {
|
|||
indent: _propTypes2["default"].number,
|
||||
indentSize: _propTypes2["default"].number,
|
||||
column: _propTypes2["default"].object,
|
||||
expandIcon: _propTypes2["default"].node
|
||||
expandIcon: _propTypes2["default"].node,
|
||||
onPaste: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var TableCell = function (_Component) {
|
||||
|
|
@ -253,6 +256,27 @@ var TableCell = function (_Component) {
|
|||
});
|
||||
};
|
||||
|
||||
_this.onPaste = function (e) {
|
||||
var _this$props = _this.props,
|
||||
row = _this$props.index,
|
||||
onPaste = _this$props.onPaste,
|
||||
fixed = _this$props.fixed,
|
||||
col = _this$props.col;
|
||||
|
||||
var position = {
|
||||
row: row,
|
||||
col: col,
|
||||
fixed: !!fixed
|
||||
};
|
||||
onPaste(e, position);
|
||||
};
|
||||
|
||||
_this.onCellMouseOver = function (e) {
|
||||
var column = _this.props.column;
|
||||
|
||||
_this.props.stopRowDrag(column.notRowDrag);
|
||||
};
|
||||
|
||||
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
|
||||
_this.handleClick = _this.handleClick.bind(_this);
|
||||
_this.state = {
|
||||
|
|
@ -312,13 +336,17 @@ var TableCell = function (_Component) {
|
|||
showSum = _props2.showSum,
|
||||
bodyDisplayInRow = _props2.bodyDisplayInRow,
|
||||
lazyStartIndex = _props2.lazyStartIndex,
|
||||
lazyEndIndex = _props2.lazyEndIndex;
|
||||
lazyEndIndex = _props2.lazyEndIndex,
|
||||
getCellClassName = _props2.getCellClassName;
|
||||
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render,
|
||||
fieldType = column.fieldType,
|
||||
linkConfig = column.linkConfig,
|
||||
fontColor = column.fontColor,
|
||||
bgColor = column.bgColor;
|
||||
bgColor = column.bgColor,
|
||||
other = _objectWithoutProperties(column, ['dataIndex', 'render', 'fieldType', 'linkConfig', 'fontColor', 'bgColor']);
|
||||
|
||||
var _column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
|
@ -330,7 +358,8 @@ var TableCell = function (_Component) {
|
|||
title = void 0;
|
||||
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index);
|
||||
text = render(text, record, index, _extends({
|
||||
dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
||||
|
|
@ -428,16 +457,25 @@ var TableCell = function (_Component) {
|
|||
if (colMenu) {
|
||||
className += ' u-table-inline-icon';
|
||||
}
|
||||
|
||||
if (typeof getCellClassName == 'function') {
|
||||
var selfClassName = getCellClassName(record, index, column) || '';
|
||||
className += ' ' + selfClassName;
|
||||
}
|
||||
|
||||
if (colSpan == 0) return null;
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
draggable: column.draggable,
|
||||
colSpan: colSpan,
|
||||
rowSpan: rowSpan,
|
||||
className: className,
|
||||
onClick: this.handleClick,
|
||||
title: title,
|
||||
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style)
|
||||
},
|
||||
onPaste: this.onPaste,
|
||||
onMouseOver: this.onCellMouseOver,
|
||||
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
|
||||
indentText,
|
||||
expandIcon,
|
||||
text,
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ var TableHeader = function (_Component) {
|
|||
_this.drag = {
|
||||
option: ''
|
||||
};
|
||||
_this.minWidth = 80; //确定最小宽度就是80
|
||||
_this.minWidth = parseInt(props.minColumnWidth);
|
||||
_this.table = null;
|
||||
_this._thead = null; //当前对象
|
||||
_this.event = false; //避免多次绑定问题
|
||||
|
|
@ -73,6 +73,27 @@ var TableHeader = function (_Component) {
|
|||
return _this;
|
||||
}
|
||||
|
||||
TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var _this2 = this;
|
||||
|
||||
// 表格column改变时,要重新绑定拖拽事件,否则拖拽不生效
|
||||
var oldCols = this.props.columnsChildrenList;
|
||||
var newCols = nextProps.columnsChildrenList;
|
||||
|
||||
if (this._thead) {
|
||||
if (newCols.length !== oldCols.length) {
|
||||
this.event = false;
|
||||
return;
|
||||
}
|
||||
oldCols.some(function (item, index) {
|
||||
if (newCols[index] && newCols[index].dataIndex !== item.dataIndex) {
|
||||
_this2.event = false;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
this.initTable();
|
||||
this.initEvent();
|
||||
|
|
@ -86,7 +107,7 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
TableHeader.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
this.fixedTable = null;
|
||||
if (!this.table) return;
|
||||
|
|
@ -97,7 +118,7 @@ var TableHeader = function (_Component) {
|
|||
this.removeDragBorderEvent();
|
||||
}
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this2.eventListen([{ key: 'mousedown', fun: _this2.onTrMouseDown }], 'remove', tr);
|
||||
_this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], 'remove', tr);
|
||||
});
|
||||
// this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'remove',this.table.tr[0]);
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], 'remove', document.body);
|
||||
|
|
@ -123,14 +144,27 @@ var TableHeader = function (_Component) {
|
|||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && 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.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
|
||||
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
||||
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
||||
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
||||
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer');
|
||||
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer');
|
||||
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
|
||||
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
||||
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
||||
table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer');
|
||||
if (table.fixedLeftBodyTable) {
|
||||
var leftBodyTableIndex = table.fixedLeftBodyTable.length - 1 < 0 ? 0 : table.fixedLeftBodyTable.length - 1;
|
||||
table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex];
|
||||
}
|
||||
|
||||
table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer');
|
||||
if (table.fixedRightBodyTable) {
|
||||
var rightBodyTableIndex = table.fixedRightBodyTable.length - 1 < 0 ? 0 : table.fixedRightBodyTable.length - 1;
|
||||
table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex];
|
||||
}
|
||||
|
||||
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
|
||||
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
|
||||
}
|
||||
|
||||
this.table = table;
|
||||
|
||||
|
|
@ -154,7 +188,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.initEvent = function initEvent() {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
var _props = this.props,
|
||||
dragborder = _props.dragborder,
|
||||
|
|
@ -177,7 +211,7 @@ var TableHeader = function (_Component) {
|
|||
if (this.table && this.table.tr) {
|
||||
// this.eventListen([{key:'mousedown',fun:this.onTrMouseDown}],'',this.table.tr[0]);//body mouseup
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this3.eventListen([{ key: 'mousedown', fun: _this3.onTrMouseDown }], '', tr); //body mouseup
|
||||
_this4.eventListen([{ key: 'mousedown', fun: _this4.onTrMouseDown }], '', tr); //body mouseup
|
||||
});
|
||||
}
|
||||
this.eventListen([{ key: 'mouseup', fun: this.bodyonLineMouseUp }], '', document.body); //body mouseup
|
||||
|
|
@ -196,12 +230,12 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
if (!this.props.dragborder) return;
|
||||
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this4.eventListen(events, '', tr); //表示把事件添加到th元素上
|
||||
_this5.eventListen(events, '', tr); //表示把事件添加到th元素上
|
||||
});
|
||||
// this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
|
||||
};
|
||||
|
|
@ -212,12 +246,12 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var events = [{ key: 'mouseup', fun: this.onTrMouseUp }, { key: 'mousemove', fun: this.onTrMouseMove }];
|
||||
// this.eventListen(events,'remove',this.table.tr[0]);
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this5.eventListen(events, 'remove', _this5.table.tr);
|
||||
_this6.eventListen(events, 'remove', _this6.table.tr);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -397,7 +431,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _this6 = this;
|
||||
var _this7 = this;
|
||||
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
|
|
@ -415,7 +449,7 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
return _this6._thead = _thead;
|
||||
return _this7._thead = _thead;
|
||||
} }),
|
||||
rows.map(function (row, index) {
|
||||
var _rowLeng = row.length - 1;
|
||||
|
|
@ -461,7 +495,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
if (da.key === undefined) {
|
||||
keyTemp.key = keyTemp.key + '-filterable';
|
||||
}
|
||||
|
|
@ -481,14 +515,16 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
"th",
|
||||
_extends({}, da, keyTemp, { className: thClassName, "data-th-fixed": da.fixed, "data-line-key": da.key,
|
||||
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable" }),
|
||||
"data-line-index": columIndex, "data-th-width": da.width, "data-type": "draggable", onCopy: function onCopy(event) {
|
||||
_this7.onCopy(da, columIndex, event);
|
||||
} }),
|
||||
da.children,
|
||||
|
||||
// && columIndex != _rowLeng
|
||||
dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this6.gap = el;
|
||||
return _this7.gap = el;
|
||||
}, "data-line-key": da.key,
|
||||
"data-line-index": columIndex, "data-th-width": da.width,
|
||||
"data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
|
||||
|
|
@ -502,7 +538,7 @@ var TableHeader = function (_Component) {
|
|||
da.onClick ? thDefaultObj.onClick = function (e) {
|
||||
da.onClick(da, e);
|
||||
} : "";
|
||||
return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed }));
|
||||
return _react2["default"].createElement("th", _extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this7.onCopy }));
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
@ -518,7 +554,7 @@ TableHeader.defaultProps = {
|
|||
};
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
var _this7 = this;
|
||||
var _this8 = this;
|
||||
|
||||
this.getOnLineObject = function (_element) {
|
||||
var type = _element.getAttribute('data-type'),
|
||||
|
|
@ -535,26 +571,28 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onTrMouseDown = function (e) {
|
||||
_utils.Event.stopPropagation(e);
|
||||
var eventNoStop = _this8.props.eventNoStop;
|
||||
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e),
|
||||
targetEvent = _utils.Event.getTarget(event);
|
||||
var _props3 = _this7.props,
|
||||
var _props3 = _this8.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
contentTable = _props3.contentTable,
|
||||
lastShowIndex = _props3.lastShowIndex,
|
||||
columnsChildrenList = _props3.columnsChildrenList;
|
||||
// let currentElement = this.getOnLineObject(targetEvent);
|
||||
|
||||
var currentElement = _this7.getTargetToType(targetEvent);
|
||||
var currentElement = _this8.getTargetToType(targetEvent);
|
||||
if (!currentElement) return;
|
||||
var type = currentElement.getAttribute('data-type');
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
if (type == 'online' && _this7.props.dragborder) {
|
||||
if (!_this7.props.dragborder) return;
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
if (type == 'online' && _this8.props.dragborder) {
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||||
var currentIndex = -1;
|
||||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
_this7.drag.option = "border"; //拖拽操作
|
||||
_this8.drag.option = "border"; //拖拽操作
|
||||
if (columnsChildrenList) {
|
||||
var columnKey = currentElement.getAttribute("data-line-key");
|
||||
if (columnKey) {
|
||||
|
|
@ -563,28 +601,31 @@ var _initialiseProps = function _initialiseProps() {
|
|||
});
|
||||
}
|
||||
}
|
||||
// console.log("currentIndex :",currentIndex);
|
||||
var currentObj = _this7.table.cols[currentIndex];
|
||||
_this7.drag.currIndex = currentIndex;
|
||||
_this7.drag.oldLeft = event.x;
|
||||
_this7.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||||
_this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
|
||||
if (!_this7.tableOldWidth) {
|
||||
_this7.tableOldWidth = _this7.drag.tableWidth; //this.getTableWidth();
|
||||
if (currentIndex < 0) {
|
||||
console.log('Key must be set for column!');
|
||||
return;
|
||||
}
|
||||
if (!_this7.lastColumWidth) {
|
||||
_this7.lastColumWidth = parseInt(_this7.table.cols[lastShowIndex].style.width);
|
||||
var currentObj = _this8.table.cols[currentIndex];
|
||||
_this8.drag.currIndex = currentIndex;
|
||||
_this8.drag.oldLeft = event.clientX;
|
||||
_this8.drag.oldWidth = parseInt(currentObj.style.width);
|
||||
_this8.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
|
||||
_this8.drag.tableWidth = parseInt(_this8.table.table.style.width ? _this8.table.table.style.width : _this8.table.table.scrollWidth);
|
||||
if (!_this8.tableOldWidth) {
|
||||
_this8.tableOldWidth = _this8.drag.tableWidth; //this.getTableWidth();
|
||||
}
|
||||
} else if (type != 'online' && _this7.props.draggable) {
|
||||
if (!_this8.lastColumWidth) {
|
||||
_this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
|
||||
}
|
||||
} else if (type != 'online' && _this8.props.draggable) {
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!_this7.props.draggable) return;
|
||||
var th = _this7.getTargetToType(targetEvent);
|
||||
if (!_this8.props.draggable) return;
|
||||
var th = _this8.getTargetToType(targetEvent);
|
||||
th.setAttribute('draggable', true); //添加交换列效果
|
||||
_this7.drag.option = 'dragAble';
|
||||
_this7.currentDome = th;
|
||||
_this8.drag.option = 'dragAble';
|
||||
_this8.currentDome = th;
|
||||
var _currentIndex = parseInt(th.getAttribute("data-line-index"));
|
||||
_this7.drag.currIndex = _currentIndex;
|
||||
_this8.drag.currIndex = _currentIndex;
|
||||
} else {
|
||||
// console.log("onTrMouseDown dragborder or draggable is all false !");
|
||||
return;
|
||||
|
|
@ -594,8 +635,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTableWidth = function () {
|
||||
var tableWidth = 0,
|
||||
offWidth = 0; //this.table.cols.length;
|
||||
for (var index = 0; index < _this7.table.cols.length; index++) {
|
||||
var da = _this7.table.cols[index];
|
||||
for (var index = 0; index < _this8.table.cols.length; index++) {
|
||||
var da = _this8.table.cols[index];
|
||||
tableWidth += parseInt(da.style.width);
|
||||
}
|
||||
return tableWidth - offWidth;
|
||||
|
|
@ -604,7 +645,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToType = function (targetEvent) {
|
||||
var tag = targetEvent;
|
||||
if (targetEvent && !targetEvent.getAttribute("data-type")) {
|
||||
tag = _this7.getTargetToType(targetEvent.parentElement);
|
||||
tag = _this8.getTargetToType(targetEvent.parentElement);
|
||||
}
|
||||
return tag;
|
||||
};
|
||||
|
|
@ -612,15 +653,15 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToTh = function (targetEvent) {
|
||||
var th = targetEvent;
|
||||
if (targetEvent.nodeName.toUpperCase() != "TH") {
|
||||
th = _this7.getThDome(targetEvent);
|
||||
th = _this8.getThDome(targetEvent);
|
||||
}
|
||||
// console.log(" getTargetToTh: ", th);
|
||||
return th;
|
||||
};
|
||||
|
||||
this.onTrMouseMove = function (e) {
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
var _props4 = _this7.props,
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
var _props4 = _this8.props,
|
||||
clsPrefix = _props4.clsPrefix,
|
||||
dragborder = _props4.dragborder,
|
||||
contentDomWidth = _props4.contentDomWidth,
|
||||
|
|
@ -630,85 +671,103 @@ var _initialiseProps = function _initialiseProps() {
|
|||
lastShowIndex = _props4.lastShowIndex,
|
||||
onDraggingBorder = _props4.onDraggingBorder,
|
||||
leftFixedWidth = _props4.leftFixedWidth,
|
||||
rightFixedWidth = _props4.rightFixedWidth;
|
||||
rightFixedWidth = _props4.rightFixedWidth,
|
||||
bodyDisplayInRow = _props4.bodyDisplayInRow,
|
||||
eventNoStop = _props4.eventNoStop;
|
||||
|
||||
_utils.Event.stopPropagation(e);
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e);
|
||||
if (_this7.props.dragborder && _this7.drag.option == "border") {
|
||||
if (_this8.props.dragborder && _this8.drag.option == "border") {
|
||||
//移动改变宽度
|
||||
var currentCols = _this7.table.cols[_this7.drag.currIndex];
|
||||
var diff = event.x - _this7.drag.oldLeft;
|
||||
var newWidth = _this7.drag.oldWidth + diff;
|
||||
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
|
||||
if (newWidth > _this7.minWidth) {
|
||||
var currentCols = _this8.table.cols[_this8.drag.currIndex];
|
||||
var diff = event.clientX - _this8.drag.oldLeft;
|
||||
var newWidth = _this8.drag.oldWidth + diff;
|
||||
_this8.drag.newWidth = newWidth > 0 ? newWidth : _this8.minWidth;
|
||||
if (newWidth > _this8.minWidth) {
|
||||
currentCols.style.width = newWidth + 'px';
|
||||
|
||||
// displayinrow 判断、 固定行高判断
|
||||
if (!bodyDisplayInRow) {
|
||||
_this8.table.bodyRows.forEach(function (row, index) {
|
||||
var leftRow = _this8.table.fixedLeftBodyRows[index];
|
||||
var rightRow = _this8.table.fixedRightBodyRows[index];
|
||||
if (leftRow || rightRow) {
|
||||
var height = row.getBoundingClientRect().height;
|
||||
leftRow && (leftRow.style.height = height + "px");
|
||||
rightRow && (rightRow.style.height = height + "px");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if (_this7.fixedTable.cols) {
|
||||
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
|
||||
if (_this8.fixedTable.cols) {
|
||||
_this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
|
||||
if (newDiff > 0) {
|
||||
//缩小
|
||||
var lastWidth = _this7.lastColumWidth + newDiff;
|
||||
_this7.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
var lastWidth = _this8.lastColumWidth + newDiff;
|
||||
_this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.drag.tableWidth + diff) - scrollbarWidth;
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格,设置表头的marginBottom值为scrollbarWidth;
|
||||
_this7.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
_this8.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this7.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
|
||||
_this8.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
if (showScroll < 0) {
|
||||
_this7.table.tableBody.style.overflowX = 'auto';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
_this8.table.tableBody.style.overflowX = 'auto';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this8.optTableMargin(_this8.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else {
|
||||
_this7.table.tableBody.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
|
||||
_this8.table.tableBody.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftBodyTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRightBodyTable, 0);
|
||||
_this8.optTableScroll(_this8.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this8.optTableScroll(_this8.table.fixedRightBodyTable, { x: 'auto' });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_this7.drag.newWidth = _this7.minWidth;
|
||||
_this8.drag.newWidth = _this8.minWidth;
|
||||
}
|
||||
}
|
||||
// 增加拖拽列宽动作的回调函数
|
||||
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
|
||||
_this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
|
||||
};
|
||||
|
||||
this.onTrMouseUp = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
var width = _this7.drag.newWidth;
|
||||
_this7.mouseClear();
|
||||
_this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
|
||||
var width = _this8.drag.newWidth;
|
||||
var opt = _this8.drag.option;
|
||||
_this8.mouseClear();
|
||||
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
|
||||
_this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
|
||||
};
|
||||
|
||||
this.clearThsDr = function () {
|
||||
var ths = _this7.table.ths;
|
||||
var ths = _this8.table.ths;
|
||||
for (var index = 0; index < ths.length; index++) {
|
||||
ths[index].setAttribute('draggable', false); //去掉交换列效果
|
||||
}
|
||||
};
|
||||
|
||||
this.bodyonLineMouseUp = function (events, type) {
|
||||
if (!_this7.drag || !_this7.drag.option) return;
|
||||
_this7.mouseClear();
|
||||
if (!_this8.drag || !_this8.drag.option) return;
|
||||
_this8.mouseClear();
|
||||
};
|
||||
|
||||
this.optTableMargin = function (table, scrollbarWidth) {
|
||||
|
|
@ -731,31 +790,31 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDragStart = function (e) {
|
||||
if (!_this7.props.draggable) return;
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
if (!_this8.props.draggable) return;
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
||||
// target = Event.getTarget(event);
|
||||
target = _this7.getTargetToTh(_utils.Event.getTarget(event));
|
||||
target = _this8.getTargetToTh(_utils.Event.getTarget(event));
|
||||
var currentIndex = parseInt(target.getAttribute("data-line-index"));
|
||||
var currentKey = target.getAttribute('data-line-key');
|
||||
|
||||
if (event.dataTransfer.setDragImage) {
|
||||
var crt = target.cloneNode(true);
|
||||
crt.style.backgroundColor = "#ebecf0";
|
||||
crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候,阴影效果可同步
|
||||
crt.style.width = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候,阴影效果可同步
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this7._table_none_cont_id).appendChild(crt);
|
||||
document.getElementById(_this8._table_none_cont_id).appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
}
|
||||
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", currentKey);
|
||||
_this7.currentObj = _this7.props.rows[0][currentIndex];
|
||||
_this8.currentObj = _this8.props.rows[0][currentIndex];
|
||||
};
|
||||
|
||||
this.onDragOver = function (e) {
|
||||
|
|
@ -764,32 +823,34 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDrop = function (e) {
|
||||
if (!_this7.props.draggable) return;
|
||||
var props = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
if (!_this8.props.draggable) return;
|
||||
var props = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
e.column = { props: props };
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
_this7.props.onDrop(e);
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
_this8.props.onDrop(e);
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this7.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||
// if(!data){
|
||||
// this.props.onDrop(e);
|
||||
// return;
|
||||
// }
|
||||
if (!_this7.props.onDrop) return;
|
||||
if (!_this8.props.onDrop) return;
|
||||
// this.props.onDrop(event,target);
|
||||
_this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
|
||||
_this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
|
||||
};
|
||||
|
||||
this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this7._dragCurrent = target;
|
||||
_this8._dragCurrent = target;
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
|
||||
|
|
@ -800,22 +861,24 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.onDragEnd = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this7._dragCurrent.setAttribute("style", "");
|
||||
_this8._dragCurrent.setAttribute("style", "");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// this._dragCurrent.style = "";
|
||||
document.getElementById(_this7._table_none_cont_id).innerHTML = "";
|
||||
document.getElementById(_this8._table_none_cont_id).innerHTML = "";
|
||||
|
||||
var data = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
var data = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
|
||||
if (!_this7.props.onDragEnd) return;
|
||||
_this7.props.onDragEnd(event, { dragSource: _this7.currentObj, dragTarg: data });
|
||||
if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
|
||||
if (!_this8.props.onDragEnd) return;
|
||||
_this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
|
||||
};
|
||||
|
||||
this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
target.setAttribute("style", "");
|
||||
// this._dragCurrent.style = "";
|
||||
|
|
@ -823,7 +886,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterChange = function (key, value, condition) {
|
||||
var onFilterChange = _this7.props.onFilterChange;
|
||||
var onFilterChange = _this8.props.onFilterChange;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
|
|
@ -831,7 +894,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterClear = function (field) {
|
||||
var onFilterClear = _this7.props.onFilterClear;
|
||||
var onFilterClear = _this8.props.onFilterClear;
|
||||
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
|
|
@ -839,7 +902,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.filterRenderType = function (type, dataIndex, index) {
|
||||
var _props5 = _this7.props,
|
||||
var _props5 = _this8.props,
|
||||
clsPrefix = _props5.clsPrefix,
|
||||
rows = _props5.rows,
|
||||
filterDelay = _props5.filterDelay,
|
||||
|
|
@ -854,8 +917,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
, clsPrefix: clsPrefix //css前缀
|
||||
, className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -868,8 +931,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
clsPrefix: clsPrefix,
|
||||
className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -903,8 +966,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
data: selectDataSource,
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
|
|
@ -919,8 +982,53 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期 年
|
||||
case "dateyear":
|
||||
return _react2["default"].createElement(_FilterType2["default"], {
|
||||
locale: locale,
|
||||
rendertype: type,
|
||||
className: "filter-date",
|
||||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期 月
|
||||
case "datemonth":
|
||||
return _react2["default"].createElement(_FilterType2["default"], {
|
||||
locale: locale,
|
||||
rendertype: type,
|
||||
className: "filter-date",
|
||||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期 周
|
||||
case "dateweek":
|
||||
return _react2["default"].createElement(_FilterType2["default"], {
|
||||
locale: locale,
|
||||
rendertype: type,
|
||||
className: "filter-date",
|
||||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-Wo",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -934,8 +1042,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -945,6 +1053,12 @@ var _initialiseProps = function _initialiseProps() {
|
|||
return _react2["default"].createElement("div", null);
|
||||
}
|
||||
};
|
||||
|
||||
this.onCopy = function (data, index, event) {
|
||||
if (_this8.props.onCopy) {
|
||||
_this8.props.onCopy(_extends(data, { col: index }), event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,8 @@ var propTypes = {
|
|||
store: _propTypes2["default"].object.isRequired,
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDragRow: _propTypes2["default"].func,
|
||||
onDragRowStart: _propTypes2["default"].func
|
||||
onDragRowStart: _propTypes2["default"].func,
|
||||
syncRowHeight: _propTypes2["default"].bool
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -74,8 +75,9 @@ var defaultProps = {
|
|||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false
|
||||
rowDraggAble: false,
|
||||
// onDragRow:()=>{}
|
||||
syncRowHeight: false
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -113,19 +115,16 @@ var TableRow = function (_Component) {
|
|||
_this.onDragStart = function (e) {
|
||||
var onDragRowStart = _this.props.onDragRowStart;
|
||||
|
||||
if (!_this.props.rowDraggAble) return;
|
||||
if (!_this.props.rowDraggAble || _this.notRowDrag) return;
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
if (target.tagName === 'TD') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
_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);
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
};
|
||||
|
||||
|
|
@ -135,14 +134,13 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var _this$props = _this.props,
|
||||
rowDraggAble = _this$props.rowDraggAble,
|
||||
onDragRow = _this$props.onDragRow;
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var currentKey = event.dataTransfer.getData("text");
|
||||
var targetKey = target.getAttribute("data-row-key");
|
||||
|
||||
|
|
@ -150,8 +148,6 @@ var TableRow = function (_Component) {
|
|||
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);
|
||||
};
|
||||
|
|
@ -228,9 +224,9 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.synchronizeTableTrShadow = function () {
|
||||
var _this$props2 = _this.props,
|
||||
contentTable = _this$props2.contentTable,
|
||||
index = _this$props2.index;
|
||||
var _this$props = _this.props,
|
||||
contentTable = _this$props.contentTable,
|
||||
index = _this$props.index;
|
||||
|
||||
|
||||
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
|
|
@ -282,7 +278,7 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
}
|
||||
if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgb(30, 136, 229)");
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
|
|
@ -296,8 +292,6 @@ var TableRow = function (_Component) {
|
|||
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)';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -312,6 +306,17 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
_this.stopRowDrag = function (isStop) {
|
||||
var rowDraggAble = _this.props.rowDraggAble;
|
||||
var notRowDrag = _this.state.notRowDrag;
|
||||
|
||||
if (rowDraggAble && isStop !== notRowDrag) {
|
||||
_this.setState({
|
||||
notRowDrag: isStop
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.set = function (fn) {
|
||||
_this.clear();
|
||||
_this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -432,7 +437,9 @@ var TableRow = function (_Component) {
|
|||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
var _props2 = this.props,
|
||||
rowDraggAble = _props2.rowDraggAble,
|
||||
syncRowHeight = _props2.syncRowHeight;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
|
|
@ -440,19 +447,21 @@ var TableRow = function (_Component) {
|
|||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
// if(syncRowHeight){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
this.setRowHeight();
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index,
|
||||
rowDraggAble = _props2.rowDraggAble;
|
||||
var _props3 = this.props,
|
||||
record = _props3.record,
|
||||
onDestroy = _props3.onDestroy,
|
||||
index = _props3.index,
|
||||
rowDraggAble = _props3.rowDraggAble;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
|
|
@ -464,23 +473,23 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
var _props3 = this.props,
|
||||
setRowHeight = _props3.setRowHeight,
|
||||
_props3$expandedConte = _props3.expandedContentHeight,
|
||||
expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte,
|
||||
fixed = _props3.fixed,
|
||||
fixedIndex = _props3.fixedIndex;
|
||||
var _props4 = this.props,
|
||||
setRowHeight = _props4.setRowHeight,
|
||||
_props4$expandedConte = _props4.expandedContentHeight,
|
||||
expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte,
|
||||
fixed = _props4.fixed,
|
||||
fixedIndex = _props4.fixedIndex;
|
||||
|
||||
if (!setRowHeight || !this.element || fixed) return;
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
|
||||
var _props4 = this.props,
|
||||
index = _props4.index,
|
||||
setRowParentIndex = _props4.setRowParentIndex,
|
||||
fixedIndex = _props4.fixedIndex,
|
||||
rootIndex = _props4.rootIndex;
|
||||
var _props5 = this.props,
|
||||
index = _props5.index,
|
||||
setRowParentIndex = _props5.setRowParentIndex,
|
||||
fixedIndex = _props5.fixedIndex,
|
||||
rootIndex = _props5.rootIndex;
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
|
@ -490,16 +499,16 @@ var TableRow = function (_Component) {
|
|||
// 异步访问事件属性
|
||||
// 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
|
||||
event.persist();
|
||||
var _props5 = this.props,
|
||||
record = _props5.record,
|
||||
index = _props5.index,
|
||||
onRowClick = _props5.onRowClick,
|
||||
expandable = _props5.expandable,
|
||||
expandRowByClick = _props5.expandRowByClick,
|
||||
expanded = _props5.expanded,
|
||||
onExpand = _props5.onExpand,
|
||||
fixedIndex = _props5.fixedIndex,
|
||||
onRowDoubleClick = _props5.onRowDoubleClick;
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowClick = _props6.onRowClick,
|
||||
expandable = _props6.expandable,
|
||||
expandRowByClick = _props6.expandRowByClick,
|
||||
expanded = _props6.expanded,
|
||||
onExpand = _props6.onExpand,
|
||||
fixedIndex = _props6.fixedIndex,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick;
|
||||
|
||||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, fixedIndex, event);
|
||||
|
|
@ -514,31 +523,17 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick,
|
||||
fixedIndex = _props6.fixedIndex;
|
||||
var _props7 = this.props,
|
||||
record = _props7.record,
|
||||
index = _props7.index,
|
||||
onRowDoubleClick = _props7.onRowDoubleClick,
|
||||
fixedIndex = _props7.fixedIndex;
|
||||
|
||||
this.clear();
|
||||
onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
|
||||
var _props7 = this.props,
|
||||
onHover = _props7.onHover,
|
||||
hoverKey = _props7.hoverKey,
|
||||
fixedIndex = _props7.fixedIndex,
|
||||
syncHover = _props7.syncHover,
|
||||
record = _props7.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: true });
|
||||
}
|
||||
onHover(true, hoverKey, e, fixedIndex, record);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
|
||||
var _props8 = this.props,
|
||||
onHover = _props8.onHover,
|
||||
hoverKey = _props8.hoverKey,
|
||||
|
|
@ -546,6 +541,20 @@ var TableRow = function (_Component) {
|
|||
syncHover = _props8.syncHover,
|
||||
record = _props8.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: true });
|
||||
}
|
||||
onHover(true, hoverKey, e, fixedIndex, record);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
|
||||
var _props9 = this.props,
|
||||
onHover = _props9.onHover,
|
||||
hoverKey = _props9.hoverKey,
|
||||
fixedIndex = _props9.fixedIndex,
|
||||
syncHover = _props9.syncHover,
|
||||
record = _props9.record;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: false });
|
||||
}
|
||||
|
|
@ -553,32 +562,35 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
columns = _props9.columns,
|
||||
record = _props9.record,
|
||||
height = _props9.height,
|
||||
visible = _props9.visible,
|
||||
index = _props9.index,
|
||||
expandIconColumnIndex = _props9.expandIconColumnIndex,
|
||||
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,
|
||||
expandIconCellWidth = _props9.expandIconCellWidth;
|
||||
var _props10 = this.props,
|
||||
clsPrefix = _props10.clsPrefix,
|
||||
columns = _props10.columns,
|
||||
record = _props10.record,
|
||||
height = _props10.height,
|
||||
visible = _props10.visible,
|
||||
index = _props10.index,
|
||||
onPaste = _props10.onPaste,
|
||||
expandIconColumnIndex = _props10.expandIconColumnIndex,
|
||||
expandIconAsCell = _props10.expandIconAsCell,
|
||||
expanded = _props10.expanded,
|
||||
useDragHandle = _props10.useDragHandle,
|
||||
rowDraggAble = _props10.rowDraggAble,
|
||||
expandable = _props10.expandable,
|
||||
onExpand = _props10.onExpand,
|
||||
needIndentSpaced = _props10.needIndentSpaced,
|
||||
indent = _props10.indent,
|
||||
indentSize = _props10.indentSize,
|
||||
isHiddenExpandIcon = _props10.isHiddenExpandIcon,
|
||||
fixed = _props10.fixed,
|
||||
bodyDisplayInRow = _props10.bodyDisplayInRow,
|
||||
expandedIcon = _props10.expandedIcon,
|
||||
collapsedIcon = _props10.collapsedIcon,
|
||||
hoverKey = _props10.hoverKey,
|
||||
lazyStartIndex = _props10.lazyStartIndex,
|
||||
lazyEndIndex = _props10.lazyEndIndex,
|
||||
expandIconCellWidth = _props10.expandIconCellWidth,
|
||||
getCellClassName = _props10.getCellClassName;
|
||||
var notRowDrag = this.state.notRowDrag;
|
||||
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
|
@ -611,8 +623,8 @@ var TableRow = function (_Component) {
|
|||
expandIndexInThisTable = expandIconColumnIndex;
|
||||
}
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0 && !showSum) {
|
||||
cells.push(_react2["default"].createElement(
|
||||
if (expandIconAsCell && i === 0) {
|
||||
showSum ? cells.push(_react2["default"].createElement('td', { width: expandIconCellWidth })) : cells.push(_react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
className: clsPrefix + '-expand-icon-cell ' + isExpandIconAsCell,
|
||||
|
|
@ -622,7 +634,8 @@ var TableRow = function (_Component) {
|
|||
expandIcon
|
||||
));
|
||||
}
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick || showSum ? false : i === expandIndexInThisTable;
|
||||
// bugfix 设置expandRowByClick,无法显示箭头,去掉 expandRowByClick 判断
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || showSum ? false : i === expandIndexInThisTable;
|
||||
cells.push(_react2["default"].createElement(_TableCell2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
record: record,
|
||||
|
|
@ -636,7 +649,11 @@ var TableRow = function (_Component) {
|
|||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
|
||||
bodyDisplayInRow: bodyDisplayInRow,
|
||||
lazyStartIndex: lazyStartIndex,
|
||||
lazyEndIndex: lazyEndIndex
|
||||
lazyEndIndex: lazyEndIndex,
|
||||
onPaste: onPaste,
|
||||
stopRowDrag: this.stopRowDrag,
|
||||
col: i,
|
||||
getCellClassName: getCellClassName
|
||||
}));
|
||||
}
|
||||
var style = _extends({ height: height }, record ? record.style : undefined);
|
||||
|
|
@ -646,10 +663,15 @@ var TableRow = function (_Component) {
|
|||
if (record && record._checked) {
|
||||
className += ' selected';
|
||||
}
|
||||
|
||||
if (rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
draggable: rowDraggAble,
|
||||
draggable: rowDraggAble && !useDragHandle && !notRowDrag,
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
|
|
|
|||
|
|
@ -99,6 +99,13 @@ function bigData(Table) {
|
|||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
// fix:切换数据源,startIndex、endIndex错误
|
||||
if (_this.scrollTop <= 0) {
|
||||
// 增加scrollTop 判断,ncc场景下滚动条不在最上层, 会出现空白,因为重置了currentIndex没有重置滚动条
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount;
|
||||
}
|
||||
}
|
||||
_this.treeData = [];
|
||||
_this.flatTreeData = [];
|
||||
|
|
@ -110,7 +117,7 @@ function bigData(Table) {
|
|||
}
|
||||
}
|
||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
||||
if (currentIndex != -1 && currentIndex !== this.currentIndex) {
|
||||
_this.setStartAndEndIndex(currentIndex, dataLen);
|
||||
}
|
||||
};
|
||||
|
|
@ -251,7 +258,7 @@ function bigData(Table) {
|
|||
if (this.cachedRowHeight[i] == undefined) {
|
||||
if (this.treeType) {
|
||||
// currentKey = this.keys[i];
|
||||
currentKey = this.flatTreeData[i].key;
|
||||
currentKey = this.flatTreeData[i] && this.flatTreeData[i].key;
|
||||
currentRowHeight = 0;
|
||||
if (this.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
currentRowHeight = rowHeight;
|
||||
|
|
@ -406,18 +413,18 @@ function bigData(Table) {
|
|||
if (Array.isArray(dataCopy)) {
|
||||
for (var i = 0, l = dataCopy.length; i < l; i++) {
|
||||
var _dataCopy$i = dataCopy[i],
|
||||
key = _dataCopy$i.key,
|
||||
children = _dataCopy$i.children,
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["key", "children"]),
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["children"]),
|
||||
key = _this4.getRowKey(dataCopy[i], i),
|
||||
dataCopyI = new Object(),
|
||||
isLeaf = children && children.length > 0 ? false : true,
|
||||
_isLeaf = children && children.length > 0 ? false : true,
|
||||
isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
||||
|
||||
dataCopyI = _extends(dataCopyI, {
|
||||
key: key,
|
||||
isExpanded: isExpanded,
|
||||
parentKey: parentKey,
|
||||
isLeaf: isLeaf,
|
||||
_isLeaf: _isLeaf,
|
||||
index: flatTreeData.length
|
||||
}, _extends({}, props));
|
||||
|
||||
|
|
@ -439,7 +446,7 @@ function bigData(Table) {
|
|||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
rootId: null,
|
||||
isLeaf: 'isLeaf'
|
||||
_isLeaf: '_isLeaf'
|
||||
};
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this4.flatTreeKeysMap);
|
||||
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@ module.exports = {
|
|||
"bool_true": "是",
|
||||
"bool_false": "否",
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
'exclusive': 'exclusive',
|
||||
'equal': 'equal',
|
||||
'unequal': 'unequal',
|
||||
'begin': 'begin',
|
||||
'end': 'end',
|
||||
'greater_than': 'greater than',
|
||||
'great_than_equal_to': 'great than equal to',
|
||||
'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',
|
||||
'resetSettings': 'Reset',
|
||||
'include': 'Include',
|
||||
'exclusive': 'Not include',
|
||||
'equal': 'Equal to',
|
||||
'unequal': 'Not equal to',
|
||||
'begin': 'Begin with',
|
||||
'end': 'End with',
|
||||
'greater_than': 'Greater than',
|
||||
'great_than_equal_to': 'Greater than or equal to',
|
||||
'less_than': 'Less than',
|
||||
'less_than_equal_to': 'Less than or equal to',
|
||||
'be_equal_to': 'Equal to',
|
||||
'not_equal_to': 'Not equal to',
|
||||
"no_data": 'No data',
|
||||
"bool_true": "true",
|
||||
"bool_false": "false"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -57,31 +57,34 @@ function sort(Table, Icon) {
|
|||
var flatColumns = [];
|
||||
_this2._toFlatColumn(props.columns, -1, flatColumns);
|
||||
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
|
||||
|
||||
_this2._initSort();
|
||||
return _this2;
|
||||
}
|
||||
|
||||
//默认是前端排序,值为true为后端排序
|
||||
|
||||
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
});
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
var flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns, -1, flatColumns);
|
||||
this.setState({ columns: nextProps.columns, flatColumns: flatColumns });
|
||||
}
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
}, function () {
|
||||
this._initSort(); // 数据更新后需要重新排序
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*column扁平化处理,适应多表头避免递归操作
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
SortTable.prototype._toFlatColumn = function _toFlatColumn(columns) {
|
||||
var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
|
||||
var flatColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
||||
|
|
@ -164,6 +167,24 @@ function sort(Table, Icon) {
|
|||
}(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
|
||||
this._initSort = function () {
|
||||
var flatColumns = _this3.state.flatColumns;
|
||||
|
||||
var needSort = false;
|
||||
flatColumns.forEach(function (item) {
|
||||
if (item.order == 'descend' || item.order == 'ascend') {
|
||||
needSort = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (needSort) {
|
||||
var data = _this3.multiSort(flatColumns);
|
||||
_this3.setState({
|
||||
data: data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.getOrderNum = function () {
|
||||
var orderNum = 0;
|
||||
//todo 1
|
||||
|
|
@ -228,7 +249,8 @@ function sort(Table, Icon) {
|
|||
this.multiSort = function (columns) {
|
||||
var _state = _this3.state,
|
||||
data = _state.data,
|
||||
oldData = _state.oldData;
|
||||
_state$oldData = _state.oldData,
|
||||
oldData = _state$oldData === undefined ? [] : _state$oldData;
|
||||
|
||||
var self = _this3;
|
||||
var orderCols = {},
|
||||
|
|
@ -253,7 +275,8 @@ function sort(Table, Icon) {
|
|||
this.toggleSortOrder = function (order, column) {
|
||||
var _state2 = _this3.state,
|
||||
data = _state2.data,
|
||||
oldData = _state2.oldData,
|
||||
_state2$oldData = _state2.oldData,
|
||||
oldData = _state2$oldData === undefined ? [] : _state2$oldData,
|
||||
flatColumns = _state2.flatColumns;
|
||||
var sort = _this3.props.sort;
|
||||
|
||||
|
|
@ -292,7 +315,7 @@ function sort(Table, Icon) {
|
|||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data, oldData);
|
||||
}
|
||||
} else {
|
||||
seleObj = flatColumns.find(function (da) {
|
||||
|
|
@ -310,7 +333,7 @@ function sort(Table, Icon) {
|
|||
sort.sortFun(sortCol);
|
||||
} else {
|
||||
data = _this3.multiSort(flatColumns);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data, oldData);
|
||||
}
|
||||
}
|
||||
_this3.setState({ data: data, oldData: oldData, flatColumns: flatColumns });
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
function sum(Table) {
|
||||
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
|
||||
|
||||
return function (_React$Component) {
|
||||
_inherits(SumTable, _React$Component);
|
||||
|
||||
|
|
@ -91,7 +93,14 @@ function sum(Table) {
|
|||
count += _num;
|
||||
}
|
||||
});
|
||||
sumdata[column.dataIndex] = (0, _utils.DicimalFormater)(count, 2);
|
||||
var _sum = (0, _utils.DicimalFormater)(count, precision);
|
||||
if (column.sumThousandth) {
|
||||
_sum = _this.toThousands(_sum);
|
||||
}
|
||||
sumdata[column.dataIndex] = _sum;
|
||||
if (column.sumRender && typeof column.sumRender == 'function') {
|
||||
sumdata[column.dataIndex] = column.sumRender(_sum);
|
||||
}
|
||||
}
|
||||
if (index == 0) {
|
||||
sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];
|
||||
|
|
@ -108,10 +117,26 @@ function sum(Table) {
|
|||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
SumTable.prototype.toThousands = function toThousands(num) {
|
||||
var result = '',
|
||||
counter = 0;
|
||||
num = (num || 0).toString();
|
||||
var numArr = num.split('.');
|
||||
num = numArr[0];
|
||||
for (var i = num.length - 1; i >= 0; i--) {
|
||||
counter++;
|
||||
result = num.charAt(i) + result;
|
||||
if (!(counter % 3) && i != 0) {
|
||||
result = ',' + result;
|
||||
}
|
||||
}
|
||||
return numArr.length === 1 ? result : result + '.' + numArr[1];
|
||||
};
|
||||
|
||||
SumTable.prototype.render = function render() {
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
columns: this.props.columns,
|
||||
|
|
|
|||
|
|
@ -371,13 +371,13 @@ var Event = exports.Event = {
|
|||
var key = node.key,
|
||||
title = node.title,
|
||||
children = node.children,
|
||||
isLeaf = node.isLeaf,
|
||||
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', 'isLeaf']);
|
||||
_isLeaf = node._isLeaf,
|
||||
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', '_isLeaf']);
|
||||
|
||||
var obj = {
|
||||
key: key,
|
||||
title: title,
|
||||
isLeaf: isLeaf,
|
||||
_isLeaf: _isLeaf,
|
||||
children: []
|
||||
};
|
||||
tree.push(_extends(obj, _extends({}, otherProps)));
|
||||
|
|
@ -397,7 +397,7 @@ var Event = exports.Event = {
|
|||
|
||||
var obj = {
|
||||
key: item[attr.id],
|
||||
isLeaf: item[attr.isLeaf],
|
||||
_isLeaf: item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
tree.push(_extends(obj, _extends({}, otherProps)));
|
||||
|
|
@ -423,7 +423,7 @@ var Event = exports.Event = {
|
|||
|
||||
var _obj = {
|
||||
key: _item[attr.id],
|
||||
isLeaf: _item[attr.isLeaf],
|
||||
_isLeaf: _item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
treeArrs[_i].children.push(_extends(_obj, _extends({}, _otherProps)));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional']
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
*
|
||||
* @title 悬浮列
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 鼠标hover行时呼出操作按钮。
|
||||
* demo0401
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Popconfirm} 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 }
|
||||
];
|
||||
|
||||
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 Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
deleteRow=()=>{
|
||||
console.log('删除第' , this.currentIndex , '行');
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=(record, index)=>{
|
||||
return (
|
||||
<div className="opt-btns">
|
||||
<Popconfirm key={index} trigger="click" placement="left" content="是否删除当前行?" onClose={this.deleteRow}>
|
||||
<Button size="sm">删除</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
onRowHover={this.onRowHover}
|
||||
hoverContent={this.getHoverContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button} from "tinper-bee";
|
||||
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
|
|
@ -106,7 +105,7 @@ for (let i = 0; i < 20; i++) {
|
|||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
class Demo32 extends Component {
|
||||
class Demo12 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<DragColumnTable
|
||||
|
|
@ -125,4 +124,4 @@ class Demo32 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo32;
|
||||
export default Demo12;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const data = [
|
|||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
|
||||
class Demo33 extends Component {
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -101,4 +101,4 @@ class Demo33 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo33;
|
||||
export default Demo13;
|
||||
|
|
@ -8,11 +8,12 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
|
||||
let ComplexTable = multiSelect(sum(Table), Checkbox);
|
||||
//sum第二个参数可以设置精度,例如 sum(Table,4); 设计精度为4
|
||||
let _sum = 0;
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -56,14 +57,16 @@ const columns = [
|
|||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 100,
|
||||
sumCol: true
|
||||
sumCol: true,
|
||||
sumThousandth: true
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sumCol: true
|
||||
sumCol: true,
|
||||
sumThousandth: true
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -79,7 +82,7 @@ function getData(){
|
|||
contact: "Tom",
|
||||
warehouse: "普通仓",
|
||||
total: i + Math.floor(Math.random()*10),
|
||||
money: 20 * Math.floor(Math.random()*10)
|
||||
money: 2000 * Math.floor(Math.random()*10)
|
||||
});
|
||||
_sum += data[i].total;
|
||||
_sum += data[i].money;
|
||||
|
|
@ -88,7 +91,7 @@ function getData(){
|
|||
}
|
||||
|
||||
class Demo35 extends Component {
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -101,7 +104,7 @@ class Demo35 extends Component {
|
|||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<ComplexTable
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const columns = [
|
|||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
width: 85,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
|
|
@ -25,7 +25,7 @@ const columns = [
|
|||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
width: 120,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns26 = [
|
||||
const columns = [
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
|
||||
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
|
||||
|
|
@ -17,7 +17,7 @@ const columns26 = [
|
|||
{ title: "备注", dataIndex: "mark", key: "mark" }
|
||||
];
|
||||
|
||||
const data26 = [
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
|
|
@ -83,7 +83,7 @@ const data26 = [
|
|||
}
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
class Demo23 extends Component {
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数:key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
|
@ -98,9 +98,9 @@ class Demo26 extends Component {
|
|||
filterDelay={500}//输入文本多少ms触发回调函数,默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns26}
|
||||
data={data26} />;
|
||||
columns={columns}
|
||||
data={data} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
export default Demo23;
|
||||
|
|
@ -13,7 +13,7 @@ import Table from '../../src';
|
|||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const data27 = [
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
|
|
@ -82,7 +82,7 @@ const data27 = [
|
|||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo27 extends Component {
|
||||
class Demo24 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -107,7 +107,7 @@ class Demo27 extends Component {
|
|||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
let columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
|
|
@ -162,9 +162,9 @@ class Demo27 extends Component {
|
|||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
multiSelect={multiObj}
|
||||
columns={columns27}
|
||||
data={data27} />;
|
||||
columns={columns}
|
||||
data={data} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo27;
|
||||
export default Demo24;
|
||||
|
|
@ -56,7 +56,11 @@ const columns13 = [
|
|||
key: "e",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.e - after.e,
|
||||
sorter: (pre, after) => pre.e.value - after.e.value,
|
||||
// getMultiSorterValue: (data, col) => {},
|
||||
render: (text, data) => {
|
||||
return text.value
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
|
|
@ -67,14 +71,13 @@ 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: "NU0391001", b: 675, c: 30, d: "xx供应商",e:{value: 120}, key: "2" },
|
||||
{ a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:{value: 90}, key: "1" },
|
||||
{ a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:{value: 120},key: "4" },
|
||||
{ a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:{value: 110},key: "5" },
|
||||
{ a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:{value: 90}, key: "3" }
|
||||
];
|
||||
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@
|
|||
* demo1001
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
|
|
@ -55,11 +53,11 @@ const data = [
|
|||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps22 = {
|
||||
const defaultProps29 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
class Demo29 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -88,5 +86,5 @@ class Demo22 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
export default Demo22;
|
||||
Demo29.defaultProps = defaultProps29;
|
||||
export default Demo29;
|
||||
|
|
@ -2,16 +2,15 @@
|
|||
*
|
||||
* @title 拖拽改变列宽度
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头、合并表头的table。
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注:不支持tree结构的表头。
|
||||
* demo1002
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns23 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
|
|
@ -39,7 +38,7 @@ const columns23 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data23 = [
|
||||
const data = [
|
||||
{ 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" }
|
||||
|
|
@ -47,15 +46,15 @@ const data23 = [
|
|||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
class Demo23 extends Component {
|
||||
class Demo30 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
columns={columns23}
|
||||
data={data23}
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
scroll={{y:200}}
|
||||
dragborder={true}
|
||||
|
|
@ -66,4 +65,4 @@ class Demo23 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo23;
|
||||
export default Demo30;
|
||||
|
|
@ -123,7 +123,7 @@ class Demo4 extends Component {
|
|||
selectedRow: selectedRow
|
||||
});
|
||||
}}
|
||||
|
||||
rowKey="key"//每条数据的唯一标示,默认为key,如果不是key,必须传
|
||||
columns={columns4} data={data4} />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。
|
||||
* @description `rowDraggAble`参数设置是否使用行交换顺序功能,`useDragHandle`设置拖拽把手,`onDropRow` 是拖拽行后的回调函数。注意:表格行数据必须有唯一标识,可以通过 `data.key` 或 `rowKey` 两种方式传入。
|
||||
* Demo1201
|
||||
*/
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ const data = [
|
|||
{ a: "ASVAL_201903120007", b: "小杨", c: "女", d: "财务四科", e: "T2", key: "1009" }
|
||||
];
|
||||
|
||||
class Demo1201 extends Component {
|
||||
class Demo38 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -69,6 +69,7 @@ class Demo1201 extends Component {
|
|||
columns={columns}
|
||||
data={data}
|
||||
rowDraggAble={true}
|
||||
// useDragHandle={true}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
onDropRow={this.onDropRow}
|
||||
/>
|
||||
|
|
@ -76,4 +77,4 @@ class Demo1201 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo1201;
|
||||
export default Demo38;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const data = [ ...new Array(10000) ].map((e, i) => {
|
|||
})
|
||||
|
||||
|
||||
class Demo32 extends Component {
|
||||
class Demo43 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -87,4 +87,4 @@ class Demo32 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo32;
|
||||
export default Demo43;
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ class Demo34 extends Component {
|
|||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--' + index);
|
||||
}}
|
||||
rowKey="key"//每条数据的唯一标示,默认为key,如果不是key,必须传
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import polyfill from '@babel/polyfill'
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Con, Row, Col } from 'bee-layout';
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -162,6 +162,10 @@
|
|||
position: relative;
|
||||
line-height: 1.33;
|
||||
overflow: hidden; }
|
||||
.u-table.copy .u-table-thead th {
|
||||
-webkit-user-select: unset;
|
||||
-ms-user-select: unset;
|
||||
user-select: unset; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
.u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
|
||||
|
|
@ -448,8 +452,8 @@
|
|||
color: rgb(33, 33, 33);
|
||||
background-clip: padding-box;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
|
|
@ -604,7 +608,7 @@
|
|||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
.u-table .row-dragg-able {
|
||||
.u-table .drag-handle-column, .u-table .row-dragg-able {
|
||||
cursor: move; }
|
||||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
28
docs/api.md
28
docs/api.md
|
|
@ -38,11 +38,12 @@ import 'bee-table/build/Table.css';
|
|||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||
| data | 传入的表格数据(key值必需,否则会导致部分功能出现问题。建议使用唯一的值,如id) | array | [] |
|
||||
| columns | 列的配置表,具体配置见下表 | array | - |
|
||||
| columnKey | 如果columnKey是字符串,`column [columnKey]`将被作为主键。 | string | 'key' |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| rowKey | 如果rowKey是字符串,`record [rowKey]`将被用作键。如果rowKey是function,`rowKey(record, index)`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
| rowKey | 如果rowKey是字符串,`record [rowKey]`将被用作键。如果rowKey是function,`rowKey(record, index)`的返回值将被用作键。树形表格时作为每条数据的唯一标示,如果唯一标示不是"key"键的值,则必须传入,例如 `rowKey='id'` | string or Function(record, index):string | 'key' |
|
||||
| expandedRowKeys | 展开的行,控制属性 | array | - |
|
||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||
|
|
@ -55,6 +56,7 @@ import 'bee-table/build/Table.css';
|
|||
|collapsedIcon|嵌套表格场景中关闭子表时的关闭图标|||
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发,此参数需要与上面参数搭配使用(默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| rowDraggAble | 是否增加行交换顺序功能 | boolean| false |
|
||||
| useDragHandle | 通过行手柄进行拖拽排序,在 `rowDraggAble` 为 `true` 时有效 | boolean| false |
|
||||
| showHeader | 是否显示表头 | bool | true |
|
||||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
|
|
@ -81,8 +83,14 @@ import 'bee-table/build/Table.css';
|
|||
| size | 表格大小 | `sm / md / lg` | 'md' |
|
||||
| hideHeaderScroll | 表体无数据时,表头下是否显示滚动条,默认显示 | bool | false |
|
||||
| [v2.2.2新增]showRowNum | 展示序号功能,false时不展示,true时展示默认情况,可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
|
||||
| autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
|
||||
| autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
|
||||
| [v2.2.8新增]autoCheckedByClickRows | 设置为 false 时,表格行点击事件,不会自动勾选复选框 | bool | true |
|
||||
| [v2.2.8新增]autoSelect | 树型表格勾选时,是否开启子节点的联动 | bool | false |
|
||||
| onPaste | 粘贴的回调函数 | func(event,positon) | - |
|
||||
| onCopy | 复制列的回调函数 | func(data,event) | - |
|
||||
| onBodyScroll | table body 滚动的回调 | func(scrollTop) | - |
|
||||
| syncRowHeight | 滚动是否同步高度,关闭此功能有利于提高性能,注:树表和主子表不允许关闭 | true | - |
|
||||
|onBodyMouseLeave| 移除表体的回调事件| func() |-|
|
||||
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
|
|
@ -120,12 +128,14 @@ import 'bee-table/build/Table.css';
|
|||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时,此列将被固定:true或'left'或'right'| true/'left'/'right'|-|
|
||||
|sorter|前端列排序方法,只要列上有此属性就说明这列可排序。**注:默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况,需要转换成0**| function|-|
|
||||
|getMultiSorterValue| 多列排序的时候,可以使用此方法得到单元格中显示的值,用来进行排序中的判断|Function(data, currentCol)|-|
|
||||
|sorterClick|排序的回调函数|function|-|
|
||||
|render|cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置,可以设置单元格行/列合并|-|
|
||||
|render|cell的render函数有三个参数:这个单元格的文本,这行的记录,这行的索引,它返回一个对象:{children:value,props:{colSpan:1,rowSpan:1}} ==>'children'是这个单元格的文本,props是这个单元格的一些设置,可以设置单元格行/列合并。2.2.48及以后版本新增第四个参数options为column设置的属性|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string("descend"、"ascend") | -|
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| orderNum | 多列排序时,用来设置排序优先级(1的优先级最高) | number | -|
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`dateyear(日期-年)`,`datemonth(日期-月)`,`dateweek(日期-周)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项,`auto`自动根据当前数据生成,`manual`手动传入,可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
|
|
@ -147,6 +157,8 @@ import 'bee-table/build/Table.css';
|
|||
| isShow | 是否展示该列数据 | bool | true |
|
||||
| cellMenu | 渲染单元格内操作按钮 | object | - |
|
||||
| style | 该列的样式,严格按照react的样式书写规则,即对象内每一个属性的键为小写驼峰式,值为字符串 | object | - |
|
||||
| sumRender | 自定义合计render函数 | func(value) | - |
|
||||
|getCellClassName|自定义单元格样式| func(record,index,column) record:当前行数据,index:行索引,column:当前列索引|-|
|
||||
|
||||
#### [v2.2.x新增] cellMenu
|
||||
|
||||
|
|
@ -339,6 +351,9 @@ import { Table } from 'tinper-bee';
|
|||
|
||||
const SumTable = sum(Table);
|
||||
|
||||
//[v2.2.49新增]precision为精度,默认为2
|
||||
const SumTable = sum(Table,precision);
|
||||
|
||||
```
|
||||
|
||||
#### API
|
||||
|
|
@ -350,7 +365,7 @@ column 数组参数:
|
|||
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
#### sum 使用示例
|
||||
- [列合计(总计)](http://design.yonyoucloud.com/tinper-bee/bee-table#%E5%88%97%E5%90%88%E8%AE%A1%EF%BC%88%E6%80%BB%E8%AE%A1%EF%BC%89)
|
||||
- [列合计(总计)](http://bee.tinper.org/tinper-bee/bee-table#%E5%88%97%E5%90%88%E8%AE%A1%EF%BC%88%E6%80%BB%E8%AE%A1%EF%BC%89)
|
||||
|
||||
### dragColumn 拖拽列功能
|
||||
|
||||
|
|
@ -372,6 +387,7 @@ Table 组件参数:
|
|||
| ------ | ---------- | -------- | ---- |
|
||||
| dragborder | 拖拽调整列宽度 | boolean | false |
|
||||
| draggable | 拖拽交换列 | boolean | false |
|
||||
| minColumnWidth | 拖拽列宽度的最小限制 | number | 80 |
|
||||
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
|
||||
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e,width) => {} |
|
||||
| onDraggingBorder | 调整列宽过程中触发的回调函数 | function | (e,width) => {} |
|
||||
|
|
|
|||
11
index.html
11
index.html
|
|
@ -4,10 +4,8 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>neoui-react-button</title>
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
</head>
|
||||
<body style="background: #eceff1">
|
||||
<div id="tinperBeeDemo"></div>
|
||||
|
|
@ -18,9 +16,12 @@
|
|||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
<script src="./dist/demo.js"></script>
|
||||
<script>
|
||||
console.log(111)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.2.30",
|
||||
"version": "2.3.14",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -41,7 +41,10 @@
|
|||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
|
||||
"version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
|
||||
"postversion": "git push --follow-tags",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
|
|
@ -71,6 +74,7 @@
|
|||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/polyfill": "^7.12.1",
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
|
|
@ -90,6 +94,7 @@
|
|||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
"tinper-bee": "latest",
|
||||
"husky": "^4.2.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export default class ColumnManager {
|
|||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
width: 49,
|
||||
draggable: true,
|
||||
render: () => {
|
||||
return <Icon type="uf-navmenu" />
|
||||
}
|
||||
|
|
@ -222,7 +223,8 @@ export default class ColumnManager {
|
|||
return element && (element.type === Column || element.type === ColumnGroup);
|
||||
}
|
||||
|
||||
reset(columns, elements, showRowNum) {
|
||||
reset(columns, elements, showRowNum, rowDraggAble) {
|
||||
columns = this.addDragHandleColumn(columns,rowDraggAble);
|
||||
columns = this.addOrderColumn(columns,showRowNum);
|
||||
columns = this.deleteColumnNotShow(columns);
|
||||
this.columns = columns || this.normalize(elements);
|
||||
|
|
|
|||
|
|
@ -184,4 +184,7 @@ FilterDropDown.defaultProps = {
|
|||
filterDropdownType: 'string'
|
||||
}
|
||||
|
||||
FilterDropDown.contextTypes = {
|
||||
beeLocale: PropTypes.object
|
||||
};
|
||||
export default FilterDropDown;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Select from 'bee-select';
|
|||
import InputNumber from 'bee-input-number';
|
||||
import FilterDropDown from './FilterDropDown';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { RangePicker,YearPicker,MonthPicker,WeekPicker } = DatePicker;
|
||||
|
||||
const propTypes = {
|
||||
filterDropdown: PropTypes.string
|
||||
|
|
@ -49,8 +49,11 @@ class FilterType extends Component {
|
|||
*
|
||||
*/
|
||||
changeText = (val) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
this.setState({
|
||||
value: val
|
||||
}, () => {
|
||||
onFilterChange(dataIndex, val, this.state.condition);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +158,7 @@ class FilterType extends Component {
|
|||
/**
|
||||
* 根据不同的类型生成对应的组件类型包含一些参数的适应
|
||||
*
|
||||
* @param {*} rendertype 参数类型,包括['text','dropdown','date','daterange','number']
|
||||
* @param {*} rendertype 参数类型,包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
|
||||
* @returns
|
||||
*/
|
||||
renderControl = (rendertype) => {
|
||||
|
|
@ -246,6 +249,72 @@ class FilterType extends Component {
|
|||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'dateyear':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<YearPicker
|
||||
{...this.props}
|
||||
value={this.state.value}
|
||||
onChange={this.changeDate}
|
||||
open={this.state.open}
|
||||
format={format}
|
||||
locale={zhCN}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'datemonth':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<MonthPicker
|
||||
{...this.props}
|
||||
value={this.state.value}
|
||||
onChange={this.changeDate}
|
||||
open={this.state.open}
|
||||
format={format}
|
||||
locale={zhCN}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'dateweek':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<WeekPicker
|
||||
{...this.props}
|
||||
value={this.state.value}
|
||||
onChange={this.changeDate}
|
||||
open={this.state.open}
|
||||
format={format}
|
||||
locale={zhCN}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'daterange':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<RangePicker
|
||||
|
|
|
|||
186
src/Table.js
186
src/Table.js
|
|
@ -28,6 +28,8 @@ const propTypes = {
|
|||
//特殊的渲染规则的key值
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
rowClassName: PropTypes.func,
|
||||
//column的主键,和 column.key 作用相同
|
||||
columnKey: PropTypes.string,
|
||||
expandedRowClassName: PropTypes.func,
|
||||
childrenColumnName: PropTypes.string,
|
||||
onExpand: PropTypes.func,
|
||||
|
|
@ -57,12 +59,15 @@ const propTypes = {
|
|||
hoverContent:PropTypes.func,
|
||||
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||
rowDraggAble: PropTypes.bool,
|
||||
hideDragHandle: PropTypes.bool, // 隐藏行拖拽把手
|
||||
onDropRow: PropTypes.func,
|
||||
onDragRowStart: PropTypes.func,
|
||||
onBodyScroll: PropTypes.func,
|
||||
bodyDisplayInRow: PropTypes.bool, // 表格内容超出列宽度时进行换行 or 以...形式展现
|
||||
headerDisplayInRow: PropTypes.bool, // 表头内容超出列宽度时进行换行 or 以...形式展现
|
||||
showRowNum: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), // 表格是否自动生成序号,格式为{base:number || 0,defaultKey:string || '_index',defaultName:string || '序号'}
|
||||
onPaste:PropTypes.func,
|
||||
onBodyMouseLeave: PropTypes.func
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -71,6 +76,7 @@ const defaultProps = {
|
|||
expandIconAsCell: false,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
columnKey: 'key',
|
||||
rowKey: 'key',
|
||||
rowClassName: () => '',
|
||||
expandedRowClassName: () => '',
|
||||
|
|
@ -93,18 +99,20 @@ const defaultProps = {
|
|||
minColumnWidth: 80,
|
||||
locale:{},
|
||||
syncHover: true,
|
||||
setRowHeight:()=>{},
|
||||
// setRowHeight:()=>{},
|
||||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0',
|
||||
heightConsistent:false,
|
||||
size: 'md',
|
||||
rowDraggAble:false,
|
||||
hideDragHandle:false,
|
||||
onDropRow: ()=>{},
|
||||
onDragRowStart: ()=>{},
|
||||
onBodyScroll: ()=>{},
|
||||
bodyDisplayInRow: true,
|
||||
headerDisplayInRow: true,
|
||||
showRowNum: false,
|
||||
onPaste:()=>{}
|
||||
};
|
||||
|
||||
const expandIconCellWidth = Number(43);
|
||||
|
|
@ -114,7 +122,8 @@ class Table extends Component {
|
|||
super(props);
|
||||
let expandedRowKeys = [];
|
||||
let rows = [...props.data];
|
||||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble, props.showRowNum); // 加入props.showRowNum参数
|
||||
const showDragHandle = !props.hideDragHandle && props.rowDraggAble;
|
||||
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, showDragHandle, props.showRowNum); // 加入props.showRowNum参数
|
||||
this.store = createStore({ currentHoverKey: null });
|
||||
this.firstDid = true;
|
||||
if (props.defaultExpandAllRows) {
|
||||
|
|
@ -167,7 +176,7 @@ class Table extends Component {
|
|||
this.tableUid = null;
|
||||
this.contentTable = null;
|
||||
this.leftColumnsLength //左侧固定列的长度
|
||||
this.centerColumnsLength //非固定列的长度
|
||||
this.centerColumnsLength //非固定列的长度
|
||||
this.columnsChildrenList = [];//复杂表头、所有叶子节点
|
||||
}
|
||||
componentWillMount() {
|
||||
|
|
@ -198,6 +207,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let { hideDragHandle, rowDraggAble, showRowNum } = this.props;
|
||||
if ('data' in nextProps) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
|
|
@ -209,18 +219,23 @@ class Table extends Component {
|
|||
});
|
||||
}
|
||||
if (nextProps.columns && nextProps.columns !== this.props.columns) {
|
||||
this.columnManager.reset(nextProps.columns, null, this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
this.columnManager.reset(nextProps.columns, null, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||||
if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
|
||||
this.scrollTop = this.bodyTable.scrollTop;
|
||||
}
|
||||
} else if (nextProps.children !== this.props.children) {
|
||||
this.columnManager.reset(null, nextProps.children,this.props.showRowNum); // 加入this.props.showRowNum参数
|
||||
this.columnManager.reset(null, nextProps.children, showRowNum, !hideDragHandle && rowDraggAble); // 加入this.props.showRowNum参数
|
||||
}
|
||||
//适配lazyload
|
||||
if(nextProps.scrollTop > -1){
|
||||
// this.bodyTable.scrollTop = nextProps.scrollTop;
|
||||
this.scrollTop = nextProps.scrollTop;
|
||||
}
|
||||
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||
// fix:表格首次渲染时 display:none,再显示时,未重新计算,导致表行出现错位的bug
|
||||
if(this.scrollbarWidth<=0 && this.props.scroll.y){
|
||||
this.scrollbarWidth = measureScrollbar();
|
||||
}
|
||||
if (!nextProps.originWidth) {
|
||||
this.computeTableWidth();
|
||||
this.firstDid = true;//避免重复update
|
||||
|
|
@ -228,11 +243,6 @@ class Table extends Component {
|
|||
if(nextProps.resetScroll){
|
||||
this.resetScrollX();
|
||||
}
|
||||
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||
// fix:表格首次渲染时 display:none,再显示时,未重新计算,导致表行出现错位的bug
|
||||
if(this.scrollbarWidth<=0 && this.props.scroll.y){
|
||||
this.scrollbarWidth = measureScrollbar();
|
||||
}
|
||||
|
||||
// console.log('this.scrollTop**********',this.scrollTop);
|
||||
|
||||
|
|
@ -256,10 +266,23 @@ class Table extends Component {
|
|||
this.bodyTable.scrollTop = this.scrollTop;
|
||||
this.scrollTop = -1;
|
||||
}
|
||||
if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
this.resetScrollX();
|
||||
// 当表格没有数据时,重置滚动条位置,造成grid里面的表头列无法操作
|
||||
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
// this.resetScrollX();
|
||||
// }
|
||||
// 当懒加载手动设置的scroll.y发生变化时,滚动条回到顶部
|
||||
const prevScrollY = prevProps.scroll.y
|
||||
const currentScrollY = this.props.scroll.y
|
||||
if (prevScrollY && currentScrollY && (prevScrollY !== currentScrollY) && this.props.lazyLoad && !this.props.ignoreScrollYChange) {
|
||||
this.bodyTable.scrollTop = 0
|
||||
} else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && (prevScrollY !== currentScrollY)) {
|
||||
const distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY)
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance
|
||||
}
|
||||
}
|
||||
|
||||
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
}
|
||||
|
|
@ -427,7 +450,7 @@ class Table extends Component {
|
|||
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
|
||||
const { lastShowIndex } = this.state;
|
||||
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder, bodyDisplayInRow, headerEventNoStop, onCopy} = this.props;
|
||||
this.columnsChildrenList = []; //复杂表头拖拽,重新render表头前,将其置空
|
||||
const rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
|
|
@ -446,7 +469,7 @@ class Table extends Component {
|
|||
const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
|
||||
let drop = draggable ? { onDragStart, onDragOver, onDrop,onDragEnd, onDragEnter, draggable } : {};
|
||||
let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey,onDropBorder,onDraggingBorder } : {};
|
||||
let contentWidthDiff = 0;
|
||||
let contentWidthDiff = 0;
|
||||
//非固定表格,宽度不够时自动扩充
|
||||
if (!fixed) {
|
||||
contentWidthDiff = this.state.contentWidthDiff
|
||||
|
|
@ -477,17 +500,24 @@ class Table extends Component {
|
|||
bordered = {bordered}
|
||||
leftFixedWidth = {leftFixedWidth}
|
||||
rightFixedWidth = {rightFixedWidth}
|
||||
bodyDisplayInRow = {bodyDisplayInRow}
|
||||
eventNoStop = {headerEventNoStop}
|
||||
onCopy = {onCopy}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
||||
getHeaderRows(columns, currentRow = 0, rows) {
|
||||
const { columnKey } = this.props;
|
||||
let { contentWidthDiff = 0, lastShowIndex = -1 } = this.state;
|
||||
let filterCol = [];
|
||||
rows = rows || [];
|
||||
rows[currentRow] = rows[currentRow] || [];
|
||||
|
||||
columns.forEach((column,i) => {
|
||||
if (!column.key) {
|
||||
column.key = column[columnKey];
|
||||
}
|
||||
if (column.rowSpan && rows.length < column.rowSpan) {
|
||||
while (rows.length < column.rowSpan) {
|
||||
rows.push([]);
|
||||
|
|
@ -499,7 +529,7 @@ class Table extends Component {
|
|||
} else if (width) {
|
||||
width = parseInt(width);
|
||||
}
|
||||
if (lastShowIndex == i && width) {
|
||||
if (!column.fixed && lastShowIndex == i && width) {
|
||||
width = width + contentWidthDiff;
|
||||
}
|
||||
const cell = {
|
||||
|
|
@ -559,7 +589,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
getExpandedRow(key, content, visible, className, fixed) {
|
||||
const { clsPrefix, expandIconAsCell } = this.props;
|
||||
const { clsPrefix, expandIconAsCell,onPaste, getCellClassName } = this.props;
|
||||
let colCount;
|
||||
if (fixed === 'left') {
|
||||
colCount = this.columnManager.leftLeafColumns().length;
|
||||
|
|
@ -597,6 +627,7 @@ class Table extends Component {
|
|||
}
|
||||
return (
|
||||
<TableRow
|
||||
onPaste={onPaste}
|
||||
columns={columns}
|
||||
visible={visible}
|
||||
className={className}
|
||||
|
|
@ -607,9 +638,11 @@ class Table extends Component {
|
|||
store={this.store}
|
||||
dragborderKey={this.props.dragborderKey}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
useDragHandle={this.props.useDragHandle}
|
||||
onDragRow={this.onDragRow}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
height={expandedRowHeight}
|
||||
getCellClassName = {getCellClassName}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -649,11 +682,18 @@ class Table extends Component {
|
|||
targetIndex = i;
|
||||
}
|
||||
});
|
||||
data = this.swapArray(data,currentIndex,targetIndex);
|
||||
this.props.onDropRow && this.props.onDropRow(data,record);
|
||||
this.setState({
|
||||
data,
|
||||
});
|
||||
if (currentIndex > -1) {
|
||||
if (this.contentTable.dragType == 'top') {
|
||||
targetIndex = targetIndex-1
|
||||
}
|
||||
data = this.swapArray(data,currentIndex,targetIndex);
|
||||
this.props.onDropRow && this.props.onDropRow(data,record,targetIndex);
|
||||
this.setState({
|
||||
data,
|
||||
});
|
||||
} else {
|
||||
this.props.onDropRow && this.props.onDropRow(data,record,targetIndex);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 数组元素交换位置
|
||||
|
|
@ -691,6 +731,7 @@ class Table extends Component {
|
|||
const childrenColumnName = props.childrenColumnName;
|
||||
const expandedRowRender = props.expandedRowRender;
|
||||
const expandRowByClick = props.expandRowByClick;
|
||||
const onPaste = props.onPaste;
|
||||
const { fixedColumnsBodyRowsHeight } = this.state;
|
||||
let rst = [];
|
||||
let height;
|
||||
|
|
@ -705,7 +746,7 @@ class Table extends Component {
|
|||
const expandIconColumnIndex = props.expandIconColumnIndex
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
const lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
|
||||
|
|
@ -716,11 +757,11 @@ class Table extends Component {
|
|||
const record = data[i];
|
||||
const key = this.getRowKey(record, i);
|
||||
// 兼容 NCC 以前的业务逻辑,支持外部通过 record 中的 isleaf 字段,判断是否为叶子节点
|
||||
record['isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['isLeaf'];
|
||||
// isLeaf 字段是在 bigData 里添加的,只有层级树大数据场景需要该字段
|
||||
// isLeaf 有三种取值情况:true / false / null。(Table内部字段)
|
||||
const isLeaf = typeof record['isLeaf'] === 'boolean' ? record['isLeaf'] : null;
|
||||
const childrenColumn = isLeaf ? false : record[childrenColumnName];
|
||||
record['_isLeaf'] = typeof record['isleaf'] === 'boolean' ? record['isleaf'] : record['_isLeaf'];
|
||||
// _isLeaf 字段是在 bigData 里添加的,只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况:true / false / null。(Table内部字段)
|
||||
const _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
const childrenColumn = _isLeaf ? false : record[childrenColumnName];
|
||||
const isRowExpanded = this.isRowExpanded(record, i);
|
||||
let expandedRowContent;
|
||||
let expandedContentHeight = 0;
|
||||
|
|
@ -777,10 +818,11 @@ class Table extends Component {
|
|||
}
|
||||
rst.push(
|
||||
<TableRow
|
||||
onPaste={onPaste}
|
||||
indent={indent}
|
||||
indentSize={props.indentSize}
|
||||
needIndentSpaced={needIndentSpaced}
|
||||
className={`${className} ${this.props.rowDraggAble?' row-dragg-able ':''}`}
|
||||
className={`${className}`}
|
||||
record={record}
|
||||
expandIconAsCell={expandIconAsCell}
|
||||
onDestroy={this.onRowDestroy}
|
||||
|
|
@ -788,7 +830,7 @@ class Table extends Component {
|
|||
visible={visible}
|
||||
expandRowByClick={expandRowByClick}
|
||||
onExpand={this.onExpanded}
|
||||
expandable={expandedRowRender || ((childrenColumn && childrenColumn.length > 0) ? true : isLeaf === false)}
|
||||
expandable={expandedRowRender || ((childrenColumn && childrenColumn.length > 0) ? true : _isLeaf === false)}
|
||||
expanded={isRowExpanded}
|
||||
clsPrefix={`${props.clsPrefix}-row`}
|
||||
childrenColumnName={childrenColumnName}
|
||||
|
|
@ -812,7 +854,8 @@ class Table extends Component {
|
|||
rootIndex = {rootIndex}
|
||||
syncHover = {props.syncHover}
|
||||
bodyDisplayInRow = {props.bodyDisplayInRow}
|
||||
rowDraggAble={this.props.rowDraggAble}
|
||||
rowDraggAble={props.rowDraggAble}
|
||||
useDragHandle={props.useDragHandle}
|
||||
onDragRow={this.onDragRow}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
contentTable={this.contentTable}
|
||||
|
|
@ -824,6 +867,7 @@ class Table extends Component {
|
|||
centerColumnsLength={this.centerColumnsLength}
|
||||
leftColumnsLength={this.leftColumnsLength}
|
||||
expandIconCellWidth={expandIconCellWidth}
|
||||
getCellClassName = {props.getCellClassName}
|
||||
/>
|
||||
);
|
||||
this.treeRowIndex++;
|
||||
|
|
@ -845,7 +889,7 @@ class Table extends Component {
|
|||
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
|
|
@ -1109,7 +1153,7 @@ class Table extends Component {
|
|||
}
|
||||
// const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
// const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
let expandIconWidth = expandIconAsCell ? 33 : 0;
|
||||
let expandIconWidth = expandIconAsCell ? 32 : 0;
|
||||
let parStyle = {}
|
||||
if(!fixed){
|
||||
parStyle = {'marginLeft':leftFixedWidth + expandIconWidth,'marginRight':rightFixedWidth}
|
||||
|
|
@ -1159,6 +1203,20 @@ class Table extends Component {
|
|||
}
|
||||
return null;
|
||||
}
|
||||
getStyle(obj,attr){
|
||||
if(obj.currentStyle){
|
||||
return obj.currentStyle[attr];
|
||||
}
|
||||
else{
|
||||
return document.defaultView.getComputedStyle(obj,null)[attr];
|
||||
}
|
||||
}
|
||||
getTdPadding=(td)=>{
|
||||
let tdPaddingTop = this.getStyle(td,'paddingTop'),tdPaddingBottom = this.getStyle(td,'paddingBottom'),
|
||||
tdBorderTop = this.getStyle(td,'borderTopWidth'),tdBorderBottom = this.getStyle(td,'borderBottomWidth');
|
||||
return Number(tdPaddingTop.replace('px',''))+Number(tdPaddingBottom.replace('px',''))+Number(tdBorderTop.replace('px',''))+Number(tdBorderBottom.replace('px',''))
|
||||
|
||||
}
|
||||
|
||||
syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度,如果有值,所有行的高度都是固定的,主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
|
|
@ -1176,7 +1234,7 @@ class Table extends Component {
|
|||
if(headerHeight){
|
||||
height = (getMaxColChildrenLength(columns)+1)*headerHeight;
|
||||
}
|
||||
return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')}
|
||||
return headerHeight ? height : (parseInt(row.getBoundingClientRect().height) || 'auto')}
|
||||
);
|
||||
const fixedColumnsBodyRowsHeight = [].map.call(
|
||||
bodyRows, (row,index) =>{
|
||||
|
|
@ -1188,28 +1246,39 @@ class Table extends Component {
|
|||
// 内容折行显示,并又设置了 height 的情况下,也要获取主表高度
|
||||
if(heightConsistent || (!bodyDisplayInRow && rsHeight)){
|
||||
let leftHeight,rightHeight,currentHeight,maxHeight;
|
||||
leftHeight = leftBodyRows[index]?leftBodyRows[index].getBoundingClientRect().height:0;
|
||||
rightHeight = rightBodyRows[index]?rightBodyRows[index].getBoundingClientRect().height:0;
|
||||
currentHeight = row.getBoundingClientRect().height
|
||||
leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中,取到的高度是小数,直接parseInt有问题,保留两位小数处理
|
||||
rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0;
|
||||
currentHeight = Number(row.getBoundingClientRect().height).toFixed(2)
|
||||
maxHeight = Math.max(leftHeight,rightHeight,currentHeight);
|
||||
return maxHeight || 'auto'
|
||||
}else{
|
||||
return row.getBoundingClientRect().height || 'auto'
|
||||
return Number((Number(row.getBoundingClientRect().height)).toFixed(2)) || 'auto';
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
const fixedColumnsExpandedRowsHeight = {};
|
||||
expandedRows.length > 0 && expandedRows.forEach(row => {
|
||||
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
// expandedRows为NodeList Array.prototype.forEach ie 下报错 对象不支持 “forEach” 方法
|
||||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
|
||||
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key");
|
||||
let exHeight = row && parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
// fix: ie 展开表格计算渲染bug
|
||||
// try {//子表数据减少时,动态计算高度
|
||||
// let td = row.querySelector('td');
|
||||
// let tdPadding = this.getTdPadding(td);
|
||||
// let trueheight = parseInt(row.querySelectorAll('.u-table')[0].getBoundingClientRect().height);
|
||||
// exHeight = trueheight+tdPadding;
|
||||
// } catch (error) {
|
||||
|
||||
// }
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = parseInt(exHeight);
|
||||
})
|
||||
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
|
||||
shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) &&
|
||||
shallowequal(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
fixedColumnsHeadRowsHeight,
|
||||
fixedColumnsBodyRowsHeight,
|
||||
|
|
@ -1234,8 +1303,24 @@ class Table extends Component {
|
|||
isRowExpanded(record, index) {
|
||||
return typeof this.findExpandedRow(record, index) !== 'undefined';
|
||||
}
|
||||
|
||||
clearBodyMouseLeaveTimer = () => {
|
||||
if (this.bodyMouseLeaveTimmer) {
|
||||
clearTimeout(this.bodyMouseLeaveTimmer)
|
||||
this.bodyMouseLeaveTimmer = null
|
||||
}
|
||||
}
|
||||
|
||||
onBodyMouseLeave(e){
|
||||
this.hideHoverDom(e);
|
||||
const {onBodyMouseLeave} = this.props;
|
||||
if (typeof onBodyMouseLeave === 'function') {
|
||||
this.clearBodyMouseLeaveTimer();
|
||||
//因为鼠标移动到 hoverContent 中也会触发 onBodyMouseLeave,这是错误的
|
||||
//所以讲 onBodyMouseLeave 回调的调用放入 setTimeout中,
|
||||
// 当触发 hoverContent 的 onRowHoverMouseEnter 回调时,清除此定时器
|
||||
this.bodyMouseLeaveTimmer = setTimeout(onBodyMouseLeave, 0)
|
||||
}
|
||||
}
|
||||
|
||||
detectScrollTarget(e) {
|
||||
|
|
@ -1270,7 +1355,7 @@ class Table extends Component {
|
|||
if (e.target.scrollLeft === 0) {
|
||||
position='left';
|
||||
} else if (e.target.scrollLeft + 1 >=
|
||||
e.target.children[0].getBoundingClientRect().width -
|
||||
e.target.querySelector('table').getBoundingClientRect().width -
|
||||
e.target.getBoundingClientRect().width) {
|
||||
position='right';
|
||||
} else if (this.state.scrollPosition !== 'middle') {
|
||||
|
|
@ -1306,6 +1391,9 @@ class Table extends Component {
|
|||
debounce(
|
||||
handleScrollY(this.lastScrollTop,this.treeType,onBodyScroll),
|
||||
300)
|
||||
}else{
|
||||
//滚动回调
|
||||
onBodyScroll(this.lastScrollTop)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1342,8 +1430,11 @@ class Table extends Component {
|
|||
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.display = 'block';
|
||||
}
|
||||
this.setState({
|
||||
currentHoverIndex: currentIndex,
|
||||
currentHoverRecord: record
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onRowHover && onRowHover(currentIndex,record);
|
||||
|
|
@ -1356,6 +1447,7 @@ class Table extends Component {
|
|||
currentHoverKey: this.currentHoverKey,
|
||||
});
|
||||
this.hoverDom.style.display = 'block';
|
||||
this.clearBodyMouseLeaveTimer();
|
||||
|
||||
}
|
||||
onRowHoverMouseLeave = () =>{
|
||||
|
|
@ -1379,6 +1471,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { currentHoverRecord, currentHoverIndex } = this.state;
|
||||
const props = this.props;
|
||||
const clsPrefix = props.clsPrefix;
|
||||
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
|
|
@ -1395,6 +1488,9 @@ class Table extends Component {
|
|||
if (props.bordered) {
|
||||
className += ` ${clsPrefix}-bordered`;
|
||||
}
|
||||
if (props.onCopy) {
|
||||
className += ` copy`;
|
||||
}
|
||||
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
|
||||
//如果传入height说明是固定高度
|
||||
//内容过多折行显示时,height 属性会失效,为了避免产生错行
|
||||
|
|
@ -1448,7 +1544,7 @@ class Table extends Component {
|
|||
container={this}
|
||||
{...loading} />
|
||||
{ props.hoverContent && <div className="u-row-hover"
|
||||
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent()}</div>}
|
||||
onMouseEnter={this.onRowHoverMouseEnter} onMouseLeave={this.onRowHoverMouseLeave} ref={el=> this.hoverDom = el }>{props.hoverContent(currentHoverRecord, currentHoverIndex)}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ $icon-color:#505F79;
|
|||
position: relative;
|
||||
line-height: $line-height;
|
||||
overflow: hidden;
|
||||
&.copy .u-table-thead th {
|
||||
user-select: unset
|
||||
}
|
||||
&-body{
|
||||
// overflow: hidden!important;
|
||||
position: relative;
|
||||
|
|
@ -743,7 +746,7 @@ $icon-color:#505F79;
|
|||
display: none;
|
||||
}
|
||||
|
||||
.row-dragg-able{
|
||||
.drag-handle-column, .row-dragg-able{
|
||||
cursor:move;
|
||||
}
|
||||
.u-table-drag-hidden-cont{
|
||||
|
|
|
|||
168
src/TableCell.js
168
src/TableCell.js
|
|
@ -14,7 +14,8 @@ const propTypes = {
|
|||
indent: PropTypes.number,
|
||||
indentSize: PropTypes.number,
|
||||
column: PropTypes.object,
|
||||
expandIcon: PropTypes.node
|
||||
expandIcon: PropTypes.node,
|
||||
onPaste:PropTypes.func
|
||||
};
|
||||
|
||||
class TableCell extends Component{
|
||||
|
|
@ -173,75 +174,97 @@ class TableCell extends Component{
|
|||
showDropdowm: false,
|
||||
})
|
||||
}
|
||||
onPaste=(e)=>{
|
||||
let { index:row,onPaste,fixed,col } = this.props
|
||||
let position = {
|
||||
row,
|
||||
col,
|
||||
fixed:!!fixed
|
||||
}
|
||||
onPaste(e,position)
|
||||
}
|
||||
|
||||
onCellMouseOver = (e)=> {
|
||||
const {column} = this.props
|
||||
this.props.stopRowDrag(column.notRowDrag)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { record, indentSize, clsPrefix, indent,
|
||||
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
|
||||
const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor } = column;
|
||||
index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex, getCellClassName} = this.props;
|
||||
const { dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other } = column;
|
||||
let {className = ''} = column;
|
||||
|
||||
let text = objectPath.get(record, dataIndex);
|
||||
let tdProps;
|
||||
let colSpan;
|
||||
let rowSpan,title;
|
||||
|
||||
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;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
let colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
|
||||
// 根据 fieldType 来渲染数据
|
||||
if(!render){
|
||||
switch(column.fieldType){
|
||||
case 'link':{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
// 如果是固定列在主表格上就渲染null
|
||||
if(column.fixed && !fixed){
|
||||
text = null
|
||||
}else {
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index,{
|
||||
dataIndex, render, fieldType, linkConfig, fontColor, bgColor,...other
|
||||
});
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = (tdProps.rowSpan>lazyEndIndex && lazyEndIndex>5)?lazyEndIndex-index:tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
case 'bool':{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':{
|
||||
let config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
}
|
||||
|
||||
|
||||
// 根据 fieldType 来渲染数据
|
||||
if(!render){
|
||||
switch(column.fieldType){
|
||||
case 'link':{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.currencyConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':{
|
||||
let config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
case 'bool':{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':{
|
||||
let config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.currencyConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':{
|
||||
let config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '', // 后置符号
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.numberConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
case 'select':{
|
||||
text = this.renderSelect(text, column.selectConfig);
|
||||
break;
|
||||
}
|
||||
default : {
|
||||
break;
|
||||
}
|
||||
text = this.renderNumber(text, {...config,...column.numberConfig}, column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
case 'select':{
|
||||
text = this.renderSelect(text, column.selectConfig);
|
||||
break;
|
||||
}
|
||||
default : {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
|
|
@ -280,21 +303,28 @@ class TableCell extends Component{
|
|||
if(colMenu){
|
||||
className += ' u-table-inline-icon'
|
||||
}
|
||||
return (
|
||||
<td
|
||||
colSpan={colSpan}
|
||||
rowSpan={rowSpan}
|
||||
className={className}
|
||||
onClick={this.handleClick}
|
||||
title={title}
|
||||
style={{maxWidth:column.width, color:fontColor, backgroundColor:bgColor, ...column.style}}
|
||||
>
|
||||
{indentText}
|
||||
{expandIcon}
|
||||
{text}
|
||||
{colMenu}
|
||||
</td>
|
||||
);
|
||||
|
||||
if(typeof getCellClassName == 'function') {
|
||||
const selfClassName = getCellClassName(record, index, column) || ''
|
||||
className += ` ${selfClassName}`
|
||||
}
|
||||
|
||||
if(colSpan==0)return null;
|
||||
return <td
|
||||
draggable={column.draggable}
|
||||
colSpan={colSpan}
|
||||
rowSpan={rowSpan}
|
||||
className={className}
|
||||
onClick={this.handleClick}
|
||||
title={title}
|
||||
onPaste={this.onPaste}
|
||||
onMouseOver={this.onCellMouseOver}
|
||||
style={{maxWidth:column.width, color:fontColor, backgroundColor:bgColor, ...column.style}}>
|
||||
{indentText}
|
||||
{expandIcon}
|
||||
{text}
|
||||
{colMenu}
|
||||
</td>
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ class TableHeader extends Component {
|
|||
this.drag = {
|
||||
option:''
|
||||
};
|
||||
this.minWidth = 80;//确定最小宽度就是80
|
||||
this.minWidth = parseInt(props.minColumnWidth);
|
||||
this.table = null;
|
||||
this._thead = null;//当前对象
|
||||
this.event = false;//避免多次绑定问题
|
||||
|
|
@ -39,6 +39,24 @@ class TableHeader extends Component {
|
|||
contentWidthDiff: 0
|
||||
};
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// 表格column改变时,要重新绑定拖拽事件,否则拖拽不生效
|
||||
const { columnsChildrenList:oldCols } = this.props;
|
||||
const { columnsChildrenList:newCols } = nextProps;
|
||||
if (this._thead) {
|
||||
if(newCols.length !== oldCols.length){
|
||||
this.event = false;
|
||||
return;
|
||||
}
|
||||
oldCols.some((item, index) => {
|
||||
if (newCols[index] && newCols[index].dataIndex !== item.dataIndex) {
|
||||
this.event = false;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
this.initTable();
|
||||
this.initEvent();
|
||||
|
|
@ -82,17 +100,32 @@ class TableHeader extends Component {
|
|||
table.cols = tableDome.getElementsByTagName("col");
|
||||
table.ths = tableDome.getElementsByTagName("th");
|
||||
table.tr = tableDome.getElementsByTagName("tr");
|
||||
table.tableHeaderCols = contentTable.querySelector('.u-table-scroll .u-table-header') && contentTable.querySelector('.u-table-scroll .u-table-header').getElementsByTagName("col");
|
||||
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && 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.bodyRows = table.tableBody && table.tableBody.querySelectorAll('tr') || [];
|
||||
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
|
||||
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
||||
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
||||
table.fixedLeftBodyTable = contentTable.querySelectorAll('.u-table-fixed-left .u-table-body-outer') ;
|
||||
if (table.fixedLeftBodyTable) {
|
||||
const leftBodyTableIndex = table.fixedLeftBodyTable.length-1 < 0 ? 0 : table.fixedLeftBodyTable.length-1
|
||||
table.fixedLeftBodyTable = table.fixedLeftBodyTable[leftBodyTableIndex]
|
||||
}
|
||||
|
||||
table.fixedRightBodyTable = contentTable.querySelectorAll('.u-table-fixed-right .u-table-body-outer') ;
|
||||
if (table.fixedRightBodyTable) {
|
||||
const rightBodyTableIndex = table.fixedRightBodyTable.length-1 < 0 ? 0 : table.fixedRightBodyTable.length-1
|
||||
table.fixedRightBodyTable = table.fixedRightBodyTable[rightBodyTableIndex]
|
||||
}
|
||||
|
||||
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
|
||||
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
|
||||
}
|
||||
|
||||
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
|
||||
table.fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
|
||||
table.contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
|
||||
table.fixedLeftBodyTable = contentTable.querySelector('.u-table-fixed-left .u-table-body-outer') ;
|
||||
table.fixedRightBodyTable = contentTable.querySelector('.u-table-fixed-right .u-table-body-outer') ;
|
||||
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
|
||||
|
||||
this.table = table;
|
||||
|
||||
if(!this.props.dragborder)return;
|
||||
|
|
@ -148,14 +181,17 @@ class TableHeader extends Component {
|
|||
*/
|
||||
dragBorderEventInit (){
|
||||
if(!this.props.dragborder )return;
|
||||
let events = [
|
||||
{key:'mouseup', fun:this.onTrMouseUp},
|
||||
{key:'mousemove', fun:this.onTrMouseMove},
|
||||
// {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
|
||||
];
|
||||
this.doEventList(this.table.tr,(tr)=>{
|
||||
this.eventListen(events,'',tr);//表示把事件添加到th元素上
|
||||
})
|
||||
this.eventListen([{key:'mouseup', fun:this.onTrMouseUp}],'',document.body);
|
||||
this.eventListen([{key:'mousemove', fun:this.onTrMouseMove}],'',document.body);
|
||||
|
||||
// let events = [
|
||||
// {key:'mouseup', fun:this.onTrMouseUp},
|
||||
// {key:'mousemove', fun:this.onTrMouseMove},
|
||||
// // {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
|
||||
// ];
|
||||
// this.doEventList(this.table.tr,(tr)=>{
|
||||
// this.eventListen(events,'',tr);//表示把事件添加到th元素上
|
||||
// })
|
||||
// this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +249,8 @@ class TableHeader extends Component {
|
|||
* @memberof TableHeader
|
||||
*/
|
||||
onTrMouseDown = (e) => {
|
||||
Event.stopPropagation(e);
|
||||
const { eventNoStop } = this.props;
|
||||
!eventNoStop && Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e) ,
|
||||
targetEvent = Event.getTarget(event);
|
||||
const { clsPrefix, contentTable,lastShowIndex,columnsChildrenList } = this.props;
|
||||
|
|
@ -221,9 +258,10 @@ class TableHeader extends Component {
|
|||
let currentElement = this.getTargetToType(targetEvent);
|
||||
if(!currentElement)return;
|
||||
let type = currentElement.getAttribute('data-type');
|
||||
const fixedType = currentElement.getAttribute('data-th-fixed');
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
if(type == 'online' && this.props.dragborder){
|
||||
if(!this.props.dragborder)return;
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable',false);//添加交换列效果
|
||||
let currentIndex = -1;
|
||||
let defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
|
|
@ -234,19 +272,39 @@ class TableHeader extends Component {
|
|||
currentIndex = columnsChildrenList.findIndex(da=> (da.key && da.key.toLowerCase()) === columnKey.toLowerCase());
|
||||
}
|
||||
}
|
||||
// console.log("currentIndex :",currentIndex);
|
||||
if(currentIndex < 0){
|
||||
console.log('Key must be set for column!')
|
||||
return;
|
||||
}
|
||||
let currentObj = this.table.cols[currentIndex];
|
||||
this.drag.currIndex = currentIndex;
|
||||
this.drag.oldLeft = event.x;
|
||||
this.drag.oldLeft = event.clientX;
|
||||
this.drag.oldWidth = parseInt((currentObj).style.width);
|
||||
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
|
||||
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
|
||||
if(!this.tableOldWidth){
|
||||
this.tableOldWidth = this.drag.tableWidth;//this.getTableWidth();
|
||||
}
|
||||
if(!this.lastColumWidth){
|
||||
this.lastColumWidth = parseInt(this.table.cols[lastShowIndex].style.width);
|
||||
|
||||
// if(!this.lastColumWidth){
|
||||
const contentT = this.table.tableHeaderCols || this.table.cols ;
|
||||
this.lastColumWidth = parseInt(contentT[lastShowIndex].style.width);
|
||||
// console.log('begin--lastColumnWidth',this.lastColumWidth);
|
||||
// }
|
||||
this.drag.contentTableCWidth = this.table.contentTableHeader.clientWidth;
|
||||
this.drag.contentTableSWidth = this.table.contentTableHeader.scrollWidth;
|
||||
if(fixedType) {
|
||||
const contentTablePar = this.table.contentTableHeader.parentNode;
|
||||
|
||||
if(contentTablePar) {
|
||||
const originL = parseInt(contentTablePar.style.marginLeft);
|
||||
const originR = parseInt(contentTablePar.style.marginRight);
|
||||
// 内容区表格marginLef
|
||||
this.drag.contentTableML = originL;
|
||||
this.drag.contentTableMR = originR;
|
||||
}
|
||||
}
|
||||
this.drag.fixedType = fixedType;
|
||||
}else if(type != 'online' && this.props.draggable){
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!this.props.draggable) return;
|
||||
|
|
@ -302,31 +360,60 @@ class TableHeader extends Component {
|
|||
*/
|
||||
onTrMouseMove = (e) => {
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth} = this.props;
|
||||
Event.stopPropagation(e);
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll,lastShowIndex,onDraggingBorder, leftFixedWidth, rightFixedWidth, bodyDisplayInRow, eventNoStop} = this.props;
|
||||
!eventNoStop && Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
if(this.props.dragborder && this.drag.option == "border"){
|
||||
//移动改变宽度
|
||||
let currentCols = this.table.cols[this.drag.currIndex];
|
||||
let diff = (event.x - this.drag.oldLeft);
|
||||
let diff = (event.clientX - this.drag.oldLeft);
|
||||
let newWidth = this.drag.oldWidth + diff;
|
||||
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
|
||||
if(newWidth > this.minWidth){
|
||||
currentCols.style.width = newWidth +'px';
|
||||
|
||||
// displayinrow 判断、 固定行高判断
|
||||
if(!bodyDisplayInRow) {
|
||||
this.table.bodyRows.forEach((row,index)=>{
|
||||
const leftRow = this.table.fixedLeftBodyRows[index];
|
||||
const rightRow = this.table.fixedRightBodyRows[index];
|
||||
if(leftRow || rightRow) {
|
||||
const height = row.getBoundingClientRect().height;
|
||||
leftRow && (leftRow.style.height = height + "px")
|
||||
rightRow && (rightRow.style.height = height + "px")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if(this.fixedTable.cols){
|
||||
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
|
||||
if(newDiff > 0){//缩小
|
||||
let lastWidth = this.lastColumWidth + newDiff;
|
||||
this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
}
|
||||
let showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
|
||||
//表头滚动条处理
|
||||
if(headerScroll){
|
||||
const contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth;
|
||||
// console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
|
||||
if(diff<0 && contentTableSWidth+diff < 0) {
|
||||
const headerCols = this.table.tableHeaderCols || this.table.cols;
|
||||
const lastWidth =this.lastColumWidth - (contentTableSWidth+diff);
|
||||
// console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
|
||||
headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
}
|
||||
// 内容区非固定列场景拖拽
|
||||
if(!this.drag.fixedType) {
|
||||
|
||||
// let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
|
||||
// if(newDiff > 0){//缩小
|
||||
// let lastWidth = this.lastColumWidth + newDiff;
|
||||
// this.table.cols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
// this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
|
||||
// }
|
||||
|
||||
let showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (this.drag.tableWidth + diff) - scrollbarWidth ;
|
||||
|
||||
//表头滚动条处理
|
||||
if(headerScroll){
|
||||
if(showScroll < 0){ //小于 0 出现滚动条
|
||||
//找到固定列表格,设置表头的marginBottom值为scrollbarWidth;
|
||||
this.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
|
|
@ -337,7 +424,7 @@ class TableHeader extends Component {
|
|||
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
|
||||
this.optTableMargin( this.table.fixedRighHeadertTable,0);
|
||||
}
|
||||
}else{
|
||||
}else{
|
||||
if(showScroll < 0){
|
||||
this.table.tableBody.style.overflowX = 'auto';
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
|
||||
|
|
@ -351,7 +438,36 @@ class TableHeader extends Component {
|
|||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
|
||||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
|
||||
}
|
||||
}
|
||||
}else if(this.drag.fixedType) {
|
||||
if(this.table.ths[this.drag.currIndex]) {
|
||||
this.table.ths[this.drag.currIndex].width = newWidth
|
||||
}
|
||||
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
|
||||
// debugger
|
||||
|
||||
const contentTablePar = this.table.contentTableHeader.parentNode;
|
||||
// left、right缩小的内容,在没有滚动条时,需要将宽度同步到到最后一列
|
||||
// diff<0 往里拖,
|
||||
// const contentTableSWidth = this.drag.contentTableSWidth - this.drag.contentTableCWidth;
|
||||
// console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
|
||||
// if(diff<0 && contentTableSWidth+diff < 0) {
|
||||
// const headerCols = this.table.tableHeaderCols || this.table.cols;
|
||||
// const lastWidth =this.lastColumWidth - (contentTableSWidth+diff);
|
||||
// console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
|
||||
// headerCols[lastShowIndex].style.width = lastWidth +"px";//同步表头
|
||||
// this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px";//同步表体
|
||||
// }
|
||||
if(this.drag.fixedType == 'left') {
|
||||
contentTablePar.style.marginLeft = this.drag.contentTableML + diff + 'px'
|
||||
|
||||
}else {
|
||||
contentTablePar.style.marginRight = this.drag.contentTableMR + diff + 'px'
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}else {
|
||||
this.drag.newWidth = this.minWidth;
|
||||
}
|
||||
|
|
@ -367,7 +483,9 @@ class TableHeader extends Component {
|
|||
onTrMouseUp = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
let width = this.drag.newWidth;
|
||||
let opt = this.drag.option;
|
||||
this.mouseClear();
|
||||
if(opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
|
||||
this.props.onDropBorder && this.props.onDropBorder(event,width);
|
||||
};
|
||||
|
||||
|
|
@ -505,6 +623,8 @@ class TableHeader extends Component {
|
|||
}
|
||||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
event.preventDefault()
|
||||
event.stopPropagation();
|
||||
this.currentDome.setAttribute('draggable',false);//添加交换列效果
|
||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||
// if(!data){
|
||||
|
|
@ -534,6 +654,8 @@ class TableHeader extends Component {
|
|||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
this._dragCurrent.setAttribute("style","");
|
||||
event.preventDefault()
|
||||
event.stopPropagation();
|
||||
// this._dragCurrent.style = "";
|
||||
document.getElementById(this._table_none_cont_id).innerHTML = "";
|
||||
|
||||
|
|
@ -634,7 +756,7 @@ class TableHeader extends Component {
|
|||
clsPrefix={clsPrefix}//css前缀
|
||||
className={`${clsPrefix} filter-text`}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterChange={debounce(filterDelay || 300, this.handlerFilterChange)}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
|
|
@ -710,6 +832,57 @@ class TableHeader extends Component {
|
|||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期 年
|
||||
case "dateyear":
|
||||
return (
|
||||
<FilterType
|
||||
locale={locale}
|
||||
rendertype={type}
|
||||
className={`filter-date`}
|
||||
onClick={() => { }}
|
||||
format={rows[1][index]["format"] || "YYYY"}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期 月
|
||||
case "datemonth":
|
||||
return (
|
||||
<FilterType
|
||||
locale={locale}
|
||||
rendertype={type}
|
||||
className={`filter-date`}
|
||||
onClick={() => { }}
|
||||
format={rows[1][index]["format"] || "YYYY-MM"}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期 周
|
||||
case "dateweek":
|
||||
return (
|
||||
<FilterType
|
||||
locale={locale}
|
||||
rendertype={type}
|
||||
className={`filter-date`}
|
||||
onClick={() => { }}
|
||||
format={rows[1][index]["format"] || "YYYY-Wo"}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期范围
|
||||
case "daterange":
|
||||
return (
|
||||
|
|
@ -733,6 +906,12 @@ class TableHeader extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
onCopy = (data,index, event) => {
|
||||
if(this.props.onCopy) {
|
||||
this.props.onCopy(Object.assign(data,{col: index}),event)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { clsPrefix, rowStyle,draggable,
|
||||
|
|
@ -800,13 +979,13 @@ class TableHeader extends Component {
|
|||
thClassName += ` ${fixedStyle}`;
|
||||
if(!da.fixed ){
|
||||
return (<th {...da} {...keyTemp} className={thClassName} data-th-fixed={da.fixed} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width} data-type="draggable">
|
||||
data-line-index={columIndex} data-th-width={da.width} data-type="draggable" onCopy={(event) => {this.onCopy(da,columIndex,event)}}>
|
||||
{da.children}
|
||||
{
|
||||
// && columIndex != _rowLeng
|
||||
dragborder && lastObj && da.key != lastObj.key ? <div ref={el => (this.gap = el)} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width}
|
||||
data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
|
||||
data-type="online" data-th-fixed={da.fixed} className = {`${clsPrefix}-thead-th-drag-gap`}>
|
||||
<div className='online' /></div>:""
|
||||
}
|
||||
</th>)
|
||||
|
|
@ -816,7 +995,16 @@ class TableHeader extends Component {
|
|||
className:`${thClassName} ${fixedStyle}`,
|
||||
};
|
||||
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
|
||||
return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} />)
|
||||
return (<th {...thDefaultObj} {...keyTemp} data-th-fixed={da.fixed} style={{maxWidth: da.width}} onCopy={this.onCopy}>
|
||||
{da.children}
|
||||
{
|
||||
// && columIndex != _rowLeng
|
||||
dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key}
|
||||
data-line-index={columIndex} data-th-width={da.width}
|
||||
data-type="online" data-th-fixed={da.fixed} className = {`${clsPrefix}-thead-th-drag-gap`}>
|
||||
<div className='online' /></div>:""
|
||||
}
|
||||
</th>)
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const propTypes = {
|
|||
rowDraggAble: PropTypes.bool,
|
||||
onDragRow: PropTypes.func,
|
||||
onDragRowStart: PropTypes.func,
|
||||
syncRowHeight:PropTypes.bool
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -46,6 +47,7 @@ const defaultProps = {
|
|||
setRowParentIndex:()=>{},
|
||||
rowDraggAble:false,
|
||||
// onDragRow:()=>{}
|
||||
syncRowHeight:false
|
||||
};
|
||||
|
||||
class TableRow extends Component{
|
||||
|
|
@ -138,20 +140,20 @@ class TableRow extends Component{
|
|||
*/
|
||||
onDragStart = (e) => {
|
||||
let {onDragRowStart} = this.props;
|
||||
if (!this.props.rowDraggAble) return;
|
||||
if (!this.props.rowDraggAble || this.notRowDrag) return;
|
||||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
this._dragCurrent = target;
|
||||
if (target.tagName === 'TD') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
//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);
|
||||
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
// 拖拽其实index
|
||||
this.props.contentTable.startI = target.getAttribute("data-row-index");
|
||||
this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", this.currentIndex);
|
||||
onDragRowStart && onDragRowStart(this.currentIndex);
|
||||
}
|
||||
|
||||
onDragOver = (e) => {
|
||||
|
|
@ -164,11 +166,12 @@ class TableRow extends Component{
|
|||
* @memberof TableHeader
|
||||
*/
|
||||
onDrop = (e) => {
|
||||
let {rowDraggAble,onDragRow} = this.props;
|
||||
let {onDragRow, contentTable} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation();
|
||||
let currentKey = event.dataTransfer.getData("text");
|
||||
let targetKey = target.getAttribute("data-row-key");
|
||||
|
||||
|
|
@ -176,8 +179,6 @@ class TableRow extends Component{
|
|||
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);
|
||||
};
|
||||
|
|
@ -316,22 +317,27 @@ class TableRow extends Component{
|
|||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if(type){
|
||||
currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgb(30, 136, 229)");
|
||||
if(type == 'down'){
|
||||
currentObj && currentObj.setAttribute("style","border-bottom:2px solid #02B1FD");
|
||||
}else if(type){
|
||||
currentObj && currentObj.setAttribute("style","border-top:2px solid #02B1FD");
|
||||
}else{
|
||||
currentObj && currentObj.setAttribute("style","");
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnter = (e) => {
|
||||
const {contentTable} = this.props;
|
||||
let event = Event.getEvent(e) ,
|
||||
_target = Event.getTarget(event),target = _target.parentNode;
|
||||
let currentIndex = target.getAttribute("data-row-key");
|
||||
let dragEnterIndex = target.getAttribute("data-row-index");
|
||||
if(!currentIndex || currentIndex === this.currentIndex)return;
|
||||
const dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top'
|
||||
|
||||
contentTable.dragType = dragType;
|
||||
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.synchronizeTableTr(currentIndex,dragType);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -346,17 +352,19 @@ class TableRow extends Component{
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { rowDraggAble } = this.props;
|
||||
const { rowDraggAble,syncRowHeight } = this.props;
|
||||
if(!this.event){
|
||||
this.event = true;
|
||||
if(rowDraggAble){
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
if(this.props.treeType){
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
// if(syncRowHeight){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
this.setRowHeight()
|
||||
}
|
||||
|
||||
|
|
@ -434,6 +442,16 @@ class TableRow extends Component{
|
|||
onHover(false, hoverKey,e,fixedIndex,record);
|
||||
}
|
||||
|
||||
stopRowDrag = (isStop) => {
|
||||
const {rowDraggAble} = this.props;
|
||||
const {notRowDrag} = this.state;
|
||||
if(rowDraggAble && isStop!== notRowDrag) {
|
||||
this.setState({
|
||||
notRowDrag: isStop
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
set =(fn)=> {
|
||||
this.clear();
|
||||
this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -451,11 +469,12 @@ class TableRow extends Component{
|
|||
|
||||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,rowDraggAble,
|
||||
clsPrefix, columns, record, height, visible, index,onPaste,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth
|
||||
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth, getCellClassName
|
||||
} = this.props;
|
||||
const {notRowDrag} = this.state;
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
if (this.state.hovered) {
|
||||
|
|
@ -488,7 +507,8 @@ class TableRow extends Component{
|
|||
expandIndexInThisTable = expandIconColumnIndex
|
||||
}
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0 && !showSum ) {
|
||||
if (expandIconAsCell && i === 0) {
|
||||
showSum ? cells.push(<td width={expandIconCellWidth}></td>) :
|
||||
cells.push(
|
||||
<td
|
||||
className={`${clsPrefix}-expand-icon-cell ${isExpandIconAsCell}`}
|
||||
|
|
@ -499,7 +519,8 @@ class TableRow extends Component{
|
|||
</td>
|
||||
);
|
||||
}
|
||||
const isColumnHaveExpandIcon = (expandIconAsCell || expandRowByClick || showSum)
|
||||
// bugfix 设置expandRowByClick,无法显示箭头,去掉 expandRowByClick 判断
|
||||
const isColumnHaveExpandIcon = (expandIconAsCell || showSum)
|
||||
? false : (i === expandIndexInThisTable);
|
||||
cells.push(
|
||||
<TableCell
|
||||
|
|
@ -516,6 +537,10 @@ class TableRow extends Component{
|
|||
bodyDisplayInRow = {bodyDisplayInRow}
|
||||
lazyStartIndex={lazyStartIndex}
|
||||
lazyEndIndex={lazyEndIndex}
|
||||
onPaste={onPaste}
|
||||
stopRowDrag={this.stopRowDrag}
|
||||
col={i}
|
||||
getCellClassName = {getCellClassName}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -526,9 +551,14 @@ class TableRow extends Component{
|
|||
if(record && record._checked){
|
||||
className += ' selected';
|
||||
}
|
||||
|
||||
if(rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able'
|
||||
}
|
||||
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble}
|
||||
draggable={rowDraggAble && !useDragHandle && !notRowDrag}
|
||||
onClick={this.onRowClick}
|
||||
onDoubleClick={this.onRowDoubleClick}
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
|
|
@ -536,6 +566,7 @@ class TableRow extends Component{
|
|||
className={`${clsPrefix} ${className} ${clsPrefix}-level-${indent}`}
|
||||
style={style}
|
||||
data-row-key={record && record.key?record.key:hoverKey}
|
||||
data-row-index={this.props.index}
|
||||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -72,6 +72,13 @@ export default function bigData(Table) {
|
|||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
// fix:切换数据源,startIndex、endIndex错误
|
||||
if(_this.scrollTop <= 0) { // 增加scrollTop 判断,ncc场景下滚动条不在最上层, 会出现空白,因为重置了currentIndex没有重置滚动条
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount;
|
||||
}
|
||||
|
||||
}
|
||||
_this.treeData = [];
|
||||
_this.flatTreeData = [];
|
||||
|
|
@ -83,7 +90,7 @@ export default function bigData(Table) {
|
|||
}
|
||||
}
|
||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
||||
if(currentIndex != -1 && currentIndex !== this.currentIndex){
|
||||
_this.setStartAndEndIndex(currentIndex,dataLen);
|
||||
}
|
||||
}
|
||||
|
|
@ -132,16 +139,17 @@ export default function bigData(Table) {
|
|||
dataCopy = treeData;
|
||||
if(Array.isArray(dataCopy)){
|
||||
for (let i=0, l=dataCopy.length; i<l; i++) {
|
||||
let { key, children, ...props } = dataCopy[i],
|
||||
let { children, ...props } = dataCopy[i],
|
||||
key = this.getRowKey(dataCopy[i],i),//bugfix生成key字段,否则树无法展开
|
||||
dataCopyI = new Object(),
|
||||
isLeaf = (children && children.length > 0) ? false : true,
|
||||
_isLeaf = (children && children.length > 0) ? false : true,
|
||||
//如果父节点是收起状态,则子节点的展开状态无意义。(一级节点或根节点直接判断自身状态即可)
|
||||
isExpanded = (parentKey === null || expandedKeysSet.has(parentKey)) ? expandedKeysSet.has(key) : false;
|
||||
dataCopyI = Object.assign(dataCopyI,{
|
||||
key,
|
||||
isExpanded,
|
||||
parentKey : parentKey,
|
||||
isLeaf,
|
||||
_isLeaf,
|
||||
index: flatTreeData.length
|
||||
},{...props});
|
||||
|
||||
|
|
@ -166,7 +174,7 @@ export default function bigData(Table) {
|
|||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
rootId: null,
|
||||
isLeaf: 'isLeaf'
|
||||
_isLeaf: '_isLeaf'
|
||||
};
|
||||
let treeData = convertListToTree(treeList, attr, this.flatTreeKeysMap);
|
||||
|
||||
|
|
@ -287,7 +295,7 @@ export default function bigData(Table) {
|
|||
if (this.cachedRowHeight[i] == undefined) {
|
||||
if (this.treeType) {
|
||||
// currentKey = this.keys[i];
|
||||
currentKey = this.flatTreeData[i].key;
|
||||
currentKey = this.flatTreeData[i] && this.flatTreeData[i].key;
|
||||
currentRowHeight = 0;
|
||||
if (
|
||||
this.flatTreeKeysMap.hasOwnProperty(currentKey)
|
||||
|
|
|
|||
|
|
@ -17,20 +17,20 @@ module.exports = {
|
|||
"bool_true":"是",
|
||||
"bool_false":"否",
|
||||
'en-us': {
|
||||
'resetSettings': 'reset settings',
|
||||
'include': 'include',
|
||||
'exclusive': 'exclusive',
|
||||
'equal': 'equal',
|
||||
'unequal':'unequal',
|
||||
'begin':'begin',
|
||||
'end':'end',
|
||||
'greater_than':'greater than',
|
||||
'great_than_equal_to':'great than equal to',
|
||||
'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',
|
||||
'resetSettings': 'Reset',
|
||||
'include': 'Include',
|
||||
'exclusive': 'Not include',
|
||||
'equal': 'Equal to',
|
||||
'unequal':'Not equal to',
|
||||
'begin':'Begin with',
|
||||
'end':'End with',
|
||||
'greater_than':'Greater than',
|
||||
'great_than_equal_to':'Greater than or equal to',
|
||||
'less_than':'Less than',
|
||||
'less_than_equal_to':'Less than or equal to',
|
||||
'be_equal_to':'Equal to',
|
||||
'not_equal_to':'Not equal to',
|
||||
"no_data":'No data',
|
||||
"bool_true":"true",
|
||||
"bool_false":"false",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,24 +27,47 @@ export default function sort(Table, Icon) {
|
|||
let flatColumns = [];
|
||||
this._toFlatColumn(props.columns,-1,flatColumns);
|
||||
this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
|
||||
|
||||
this._initSort();
|
||||
}
|
||||
static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序,值为true为后端排序
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns,-1,flatColumns);
|
||||
this.setState({ columns: nextProps.columns ,flatColumns});
|
||||
}
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
}, function(){
|
||||
this._initSort(); // 数据更新后需要重新排序
|
||||
});
|
||||
|
||||
}
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
let flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns,-1,flatColumns);
|
||||
this.setState({ columns: nextProps.columns ,flatColumns});
|
||||
|
||||
|
||||
}
|
||||
|
||||
_initSort = () => {
|
||||
const {flatColumns} = this.state;
|
||||
let needSort = false;
|
||||
flatColumns.forEach(item => {
|
||||
if(item.order == 'descend' || item.order == 'ascend') {
|
||||
needSort = true;
|
||||
return
|
||||
}
|
||||
})
|
||||
if(needSort) {
|
||||
const data = this.multiSort(flatColumns)
|
||||
this.setState({
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*column扁平化处理,适应多表头避免递归操作
|
||||
*
|
||||
|
|
@ -116,8 +139,13 @@ export default function sort(Table, Icon) {
|
|||
*/
|
||||
_sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
|
||||
const currentCol = orderCols[currentIndex];
|
||||
const preKey = pre[currentCol.key];
|
||||
const afterKey = after[currentCol.key];
|
||||
const getMultiSorterValueFunc = currentCol.getMultiSorterValue
|
||||
let preKey = pre[currentCol.key];
|
||||
let afterKey = after[currentCol.key];
|
||||
if (getMultiSorterValueFunc) {
|
||||
preKey = getMultiSorterValueFunc(pre, currentCol)
|
||||
afterKey = getMultiSorterValueFunc(after, currentCol)
|
||||
}
|
||||
let colSortFun = currentCol.sorter;
|
||||
if(typeof colSortFun !== 'function'){
|
||||
colSortFun = () => preKey - afterKey;
|
||||
|
|
@ -135,7 +163,7 @@ export default function sort(Table, Icon) {
|
|||
* 多列排序 先排order为1的,其他的基于已排序的数据排
|
||||
*/
|
||||
multiSort = columns => {
|
||||
let { data, oldData } = this.state;
|
||||
let { data, oldData=[] } = this.state;
|
||||
const self = this;
|
||||
let orderCols = {},
|
||||
orderColslen = 0;
|
||||
|
|
@ -157,7 +185,7 @@ export default function sort(Table, Icon) {
|
|||
};
|
||||
|
||||
toggleSortOrder = (order, column) => {
|
||||
let { data, oldData, flatColumns } = this.state;
|
||||
let { data, oldData = [], flatColumns } = this.state;
|
||||
let { sort } = this.props;
|
||||
let seleObj;
|
||||
if (!oldData) {
|
||||
|
|
@ -195,7 +223,7 @@ export default function sort(Table, Icon) {
|
|||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol,data);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol,data,oldData);
|
||||
}
|
||||
} else {
|
||||
seleObj = flatColumns.find(da => da.key == column.key);
|
||||
|
|
@ -211,7 +239,7 @@ export default function sort(Table, Icon) {
|
|||
sort.sortFun(sortCol);
|
||||
} else {
|
||||
data = this.multiSort(flatColumns);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol,data);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol,data,oldData);
|
||||
}
|
||||
}
|
||||
this.setState({ data, oldData, flatColumns });
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
import {DicimalFormater} from "./utils";
|
||||
export default function sum(Table) {
|
||||
export default function sum(Table,precision=2) {
|
||||
return class SumTable extends React.Component {
|
||||
//无状态
|
||||
constructor(props) {
|
||||
|
|
@ -23,7 +23,7 @@ export default function sum(Table) {
|
|||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
*
|
||||
*/
|
||||
getTableType=()=>{
|
||||
const {columns} = this.props;
|
||||
|
|
@ -37,7 +37,18 @@ export default function sum(Table) {
|
|||
return type;
|
||||
}
|
||||
|
||||
|
||||
toThousands(num) {
|
||||
let result = '', counter = 0;
|
||||
num = (num || 0).toString();
|
||||
const numArr = num.split('.')
|
||||
num = numArr[0]
|
||||
for (var i = num.length - 1; i >= 0; i--) {
|
||||
counter++;
|
||||
result = num.charAt(i) + result;
|
||||
if (!(counter % 3) && i != 0) { result = ',' + result; }
|
||||
}
|
||||
return numArr.length === 1 ? result : result +'.' +numArr[1];
|
||||
}
|
||||
|
||||
addSumData=()=>{
|
||||
let {data=[],columns=[]} = this.props;
|
||||
|
|
@ -56,21 +67,29 @@ export default function sum(Table) {
|
|||
if(column.sumCol){
|
||||
let count = 0;
|
||||
data.forEach((da,i)=>{
|
||||
|
||||
|
||||
let _num = parseFloat(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if(_num == _num){
|
||||
count += _num;
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
sumdata[column.dataIndex] = DicimalFormater(count,2);
|
||||
let sum = DicimalFormater(count,precision);
|
||||
if(column.sumThousandth) {
|
||||
sum = this.toThousands(sum)
|
||||
}
|
||||
sumdata[column.dataIndex] = sum;
|
||||
if(column.sumRender&&typeof column.sumRender =='function'){
|
||||
sumdata[column.dataIndex] = column.sumRender(sum)
|
||||
}
|
||||
|
||||
}
|
||||
if(index == 0){
|
||||
sumdata[column.dataIndex] = "合计 "+sumdata[column.dataIndex];
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
newData.push(sumdata);
|
||||
return newData;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -347,11 +347,11 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
}else{
|
||||
// 用 treeKeysMap 判断,避免重复累加
|
||||
if (!treeKeysMap.hasOwnProperty(node[attr.id]) ) {
|
||||
let { key, title, children, isLeaf, ...otherProps } = node;
|
||||
let { key, title, children, _isLeaf, ...otherProps } = node;
|
||||
let obj = {
|
||||
key,
|
||||
title,
|
||||
isLeaf,
|
||||
_isLeaf,
|
||||
children: []
|
||||
}
|
||||
tree.push(Object.assign(obj, {...otherProps}));
|
||||
|
|
@ -366,7 +366,7 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
let { key, title, children, ...otherProps } = item;
|
||||
let obj = {
|
||||
key: item[attr.id],
|
||||
isLeaf: item[attr.isLeaf],
|
||||
_isLeaf: item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
tree.push(Object.assign(obj, {...otherProps}));
|
||||
|
|
@ -387,7 +387,7 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
|||
let { key, title, children, ...otherProps } = item;
|
||||
let obj = {
|
||||
key: item[attr.id],
|
||||
isLeaf: item[attr.isLeaf],
|
||||
_isLeaf: item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
treeArrs[i].children.push(Object.assign(obj, {...otherProps}));
|
||||
|
|
|
|||
Loading…
Reference in New Issue