Compare commits

...

164 Commits

Author SHA1 Message Date
tongChong ff38f7a6af test 2023-01-05 10:11:17 +08:00
tongChong 721a9ac7a6 修改.gitignore 2023-01-05 09:58:59 +08:00
tongChong ca7abb5b14 修改md文件 2022-12-09 11:32:12 +08:00
gx 7c71bcf6eb 2.3.14 2021-02-21 13:44:16 +08:00
gx 816617051a fix: 固定列中,元素高度保留两位小数 2021-02-21 13:35:10 +08:00
gx df2fd6d32c 2.3.13 2021-02-03 16:59:19 +08:00
gx a9ae23bf7d 2.3.12 2021-02-03 16:58:27 +08:00
gx b76fd30f8a 2.3.11 2021-02-03 16:52:56 +08:00
gx 5906420fc4 fix: scroll.Y变化时重新计算scrollTop 2021-02-03 16:52:30 +08:00
gx 0e2e866a5e 2.3.10 2021-02-03 14:50:12 +08:00
gx dcbb145328 fix: 加入ignoreScrollYChange参数 2021-02-03 14:47:16 +08:00
gx 84470fed2e 2.3.9 2021-02-03 14:04:17 +08:00
gx 69d6a2216b fix: 懒加载时修改table的scrollTop 2021-02-03 14:02:00 +08:00
izbz wh 27c08b3f0d 2.3.8 2021-01-14 09:49:45 +08:00
izbz wh 390a8a4e5f fix: 固定列在主表渲染引起的渲染多次问题 2021-01-14 09:48:51 +08:00
gx2025f 95637d9eac 2.3.7 2021-01-12 09:57:34 +08:00
gx2025f b487e67f45 fix: provide more parameters for getting multi-sort value 2021-01-12 09:56:54 +08:00
yoyoMM 17725af721
Update README.md 2021-01-11 23:09:57 +08:00
yoyoMM f376b31b44
Update README.md 2021-01-11 23:00:36 +08:00
izbz wh e62107a4b0 2.3.6 2021-01-11 19:27:04 +08:00
gx2025f d60a6c03b0 2.3.5 2021-01-11 18:43:18 +08:00
gx2025f ebd8269b9f 2.3.4 2021-01-11 18:03:14 +08:00
gx2025f f5f381c3f1 fix: 传入不同的scroll.y时,重置scrollTop 2021-01-11 18:02:44 +08:00
Gaox2025f 6e87593017 2.3.3 2021-01-07 20:50:38 +08:00
Gaox2025f 1da9313221 2.3.32 2021-01-07 20:30:43 +08:00
Gaox2025f fe869e7217 add: 添加api文档 2021-01-07 20:15:49 +08:00
Gaox2025f a19770beee fix: 多排序字段处理 2021-01-07 19:48:19 +08:00
izbz wh 464cc6fccf 2.3.1 2021-01-04 16:50:54 +08:00
izbz wh b7a75a3a1e fix: issues/655 表格拖拽没办法拖拽到第一行 2021-01-04 16:48:00 +08:00
izbz wh eb3af7d24e 2.3.0 2020-12-28 10:17:10 +08:00
izbz wh c2cf138000 feat: 固定列支持拖拽改变列宽 2020-12-28 10:16:11 +08:00
izbz wh 26cda00581 2.2.85 2020-12-24 14:36:31 +08:00
izbz wh 00f282ca7e fix: #JCJS-6424 表格展开高度计算bug 2020-12-24 14:35:13 +08:00
izbz wh 64bddec252 2.2.84 2020-12-23 14:06:00 +08:00
izbz wh 8a0bba14dd fix: ie 下展开表格当含有height时不再动态获取该表格高度 2020-12-23 14:05:37 +08:00
izbz wh 2e48c17f25 2.2.83 2020-12-15 20:56:28 +08:00
izbz wh 9e7b9f763d fix: update时判断表格数据 2020-12-15 20:55:48 +08:00
izbz wh 7558e57018 2.2.82 2020-12-10 20:55:12 +08:00
izbz wh b581de4fe9 fix: 浏览器IE拖拽不好使 2020-12-10 20:54:53 +08:00
izbz wh 3c3c47db32 2.2.81 2020-12-10 15:19:39 +08:00
izbz wh 4ec5557598 fix: 排序时data 为空处理 2020-12-10 15:19:03 +08:00
izbz wh a5d86534be 2.2.80 2020-12-01 21:04:59 +08:00
izbz wh aaed13e959 fix: 嵌套表格兼容问题 2020-12-01 21:04:38 +08:00
izbz wh 34e748e5b4 2.2.79 2020-11-24 17:06:24 +08:00
izbz wh 3acd6ea33e fix: 表格横向滚动条拖拽时右侧固定列style 2020-11-24 17:05:55 +08:00
izbz wh 36c309303a 2.2.78 2020-11-23 16:20:21 +08:00
izbz wh f8ff20f30a fix: 拖拽下的表格含有固定列的场景右侧固定列box-shaow bug 2020-11-23 16:15:36 +08:00
izbz wh 72a4e0c1c3 2.2.77 2020-11-20 15:16:04 +08:00
izbz wh 8d87472b4e fix: currentIndex 为-1 比较判断 2020-11-20 15:15:44 +08:00
izbz wh 205b89d00f 2.2.76 2020-11-19 19:56:21 +08:00
izbz wh 0262533133 Merge branch 'loongMa-master' 2020-11-19 19:55:08 +08:00
malong 3b1ffecacd fix: 优化onBodyMouseLeave调用 2020-11-19 18:51:02 +08:00
izbz wh 478f9853ec 2.2.75 2020-11-18 16:47:55 +08:00
izbz wh 2521dbbc53 docs: onBodyMouseLeave APi 2020-11-18 16:47:27 +08:00
izbz wh cb40026e8c feat: 增加onBodyMouseLeave回调函数 2020-11-18 16:46:19 +08:00
izbz wh bac23ca5c0 2.2.74 2020-11-12 10:08:26 +08:00
izbz wh 6c260cd227 fix: 特殊场景this.flatTreeData为空引起报错 2020-11-12 10:07:48 +08:00
izbz wh b93e8a78ca docs: orderNum属性说明 2020-11-05 10:01:11 +08:00
izbz wh 0b0de67e8c 2.2.73 2020-11-02 14:19:23 +08:00
izbz wh b2362185f5 fix: 默认前端排序点击分页后数据不更新 2020-11-02 14:17:11 +08:00
izbz wh 287758057f 2.2.72 2020-10-30 16:19:37 +08:00
izbz wh f346d7a45c feat: 支持表格初始化时根据soter属性进行默认排序 2020-10-30 16:19:12 +08:00
izbz wh 5bb2478cda 2.2.71 2020-10-30 14:02:16 +08:00
izbz wh ee3869e1af docs: getCellClassName API说明 2020-10-30 14:01:49 +08:00
izbz wh 05d175a94f feat: 增加getCellClassNameAPI支持自定义单元格样式 2020-10-30 13:57:05 +08:00
izbz wh 18863f483f 2.2.70 2020-10-21 10:17:31 +08:00
izbz wh b6eafe606d Merge branch 'master' of github.com:tinper-bee/bee-table 2020-10-21 10:16:05 +08:00
izbz wh 43266f2f0b fix: #JCJS-4815 表格没有数据滚动滚动条后,grid页头的隐藏无法操作 2020-10-21 10:15:47 +08:00
Jarvan ad20739ece 2.2.69 2020-10-14 15:25:23 +08:00
Jarvan 0a8f8c362b feat: 提供column.sumThousandth属性,用于设置合计行是否开启千分位功能 2020-10-14 15:25:17 +08:00
izbz wh 90f2de3bbb 2.2.68 2020-10-09 13:37:35 +08:00
izbz wh 5cbd047e6e fix: bigData 更改数据源表格数据空白 2020-10-09 13:34:44 +08:00
izbz wh 0a36b7aa7f 2.2.67 2020-09-29 09:46:20 +08:00
izbz wh c6e520db0f feat: 增加列拷贝钩子函数 2020-09-29 09:45:11 +08:00
izbz wh b23c699566 2.2.66 2020-09-24 15:54:11 +08:00
izbz wh e96497cf59 fix: #DDMPT-20421 火狐浏览器下拖拽后跳转新页面bug 2020-09-24 15:48:20 +08:00
izbz wh e26480451c 2.2.65 2020-09-21 11:06:12 +08:00
izbz wh dc00d42445 feat: 支持表头自定义mouseDown事件 2020-09-21 11:05:41 +08:00
izbz wh 3e3b11508d 2.2.64 2020-09-11 14:56:34 +08:00
izbz wh 0ea470deb0 chore: 增加notRowDrag说明 2020-09-11 14:55:47 +08:00
izbz wh 8aebc77957 feat: 自定义某列来控制当前行是否可以拖拽 2020-09-11 14:48:13 +08:00
izbz wh e8cb440d93 2.2.63 2020-09-07 13:48:57 +08:00
izbz wh 7147516dd3 fix: footer 返回含有固定列Table时,拖拽主表格高度不同步 2020-09-07 13:48:01 +08:00
izbz wh 4b551c777e 2.2.62 2020-08-29 15:23:07 +08:00
izbz wh c29a6cf112 fix: 拖拽列宽同步固定列的高度 2020-08-29 15:22:36 +08:00
izbz wh 422c4821a7 fix: commit 2020-08-29 14:50:01 +08:00
izbz wh 94e19ce4b9 fix: commit 2020-08-29 14:32:54 +08:00
izbz wh f34847484d fix: 拖拽列宽 2020-08-29 13:56:10 +08:00
yangchch6 13c9eb1ede 2.2.61 2020-07-29 14:00:54 +08:00
yangchch6 17bf7b9c49 feat: onDropRow增加参数targetIndex 2020-07-29 14:00:31 +08:00
liushaozhen 54f77ec52e 2.2.60 2020-07-23 09:39:28 +08:00
liushaozhen bc5aa63851 feat: setRowHeight性能优化 2020-07-23 09:38:08 +08:00
yangchch6 286a4f43be docs: changelog 2020-07-22 10:37:32 +08:00
yangchch6 4f2b4afd2c 2.2.59 2020-07-22 10:35:16 +08:00
yangchch6 f3541dfe03 fix: 合计和固定列错位[#540] 2020-07-22 10:32:45 +08:00
liushaozhen ecf0664a3c 2.2.58 2020-07-20 17:11:52 +08:00
liushaozhen bb7505cb8c feat: merge 2020-07-20 17:11:15 +08:00
liushaozhen b42d80b02a feat: 普通表格新增onBodyScroll回调 2020-07-20 17:09:25 +08:00
yangchch6 d096c7c52f 2.2.57 2020-07-17 14:40:11 +08:00
yangchch6 2a06e5fa8f feat: 条件过滤,输入框输入即查询[#605] 2020-07-17 14:37:35 +08:00
yangchch6 a0565cc3b1 2.2.56 2020-07-16 09:58:14 +08:00
yangchch6 2cb8982d67 feat: 行拖拽样式修改[JCJS-2307] 2020-07-16 09:57:18 +08:00
yangchch6 e84689ea91 demo 2020-07-16 09:31:03 +08:00
yangchch6 527a3b5f1e 2.2.55 2020-07-14 16:44:13 +08:00
yangchch6 b5eab50b9a feat: 增加 hideDragHandle 参数,隐藏行拖拽把手[#609] 2020-07-14 16:43:10 +08:00
yangchch6 3dd267d7a2 2.2.54 2020-07-14 09:49:30 +08:00
yangchch6 ba52c43140 feat: 增加useDragHandle参数,支持行手柄拖拽[#607] 2020-07-14 09:49:04 +08:00
yangchch6 02d962563b feat: 增加useDragHandle参数,支持行手柄拖拽[#607] 2020-07-13 21:14:33 +08:00
liushaozhen 45af804334 2.2.53 2020-07-09 15:26:40 +08:00
liushaozhen 4c6f69fcab feat: 新增sumRender自定义列合计render函数 2020-07-09 15:26:21 +08:00
liushaozhen aed4d447af 2.2.52 2020-07-09 11:15:43 +08:00
liushaozhen 3b8c65d02b fix: onPaste行列参数修改 2020-07-09 11:15:08 +08:00
liushaozhen 799b2c6725 2.2.51 2020-07-09 10:43:37 +08:00
liushaozhen b9fff29c57 feat:新增onPaste粘贴回调 2020-07-09 10:42:37 +08:00
liushaozhen 7bbf5e3f6b 2.2.50 2020-07-08 14:53:35 +08:00
liushaozhen 344e948141 feat: 排序回调新增data参数 2020-07-08 14:52:57 +08:00
liushaozhen ba317900d3 feat: changelog 2020-05-21 17:15:24 +08:00
liushaozhen 7bd56ddcb0 2.2.49 2020-05-21 17:14:37 +08:00
liushaozhen b80e703b77 feat: 列合计新增精度 2020-05-21 17:14:23 +08:00
liushaozhen 744a0f0f7b 2.2.49 2020-05-21 17:11:55 +08:00
liushaozhen 532fbb4851 feat: 列合计新增精度 2020-05-21 17:11:40 +08:00
liushaozhen 803ec7ce04 2.2.49 2020-05-21 17:07:41 +08:00
liushaozhen b9c99bb547 feat: 列合计新增精度 2020-05-21 17:07:15 +08:00
liushaozhen 386af02ce8 feat: 格式化 2020-05-06 14:51:46 +08:00
liushaozhen 0977659081 fix: 自动化 2020-04-24 17:14:57 +08:00
liushaozhen fb7446d973 publish 2.2.48 2020-04-16 14:19:28 +08:00
liushaozhen b4b0c95c9c feat(bee-table): column render方法新增第四个参数为column设置的属性 2020-04-16 14:19:24 +08:00
liushaozhen 3a6626c43b publish 2.2.47 2020-04-16 11:41:12 +08:00
liushaozhen a4df9cef69 feat(bee-table): 子表数据减少时,动态计算高度 2020-04-16 11:41:07 +08:00
liushaozhen fdc12b3d12 publish 2.2.46 2020-04-10 12:54:41 +08:00
liushaozhen ead7706fd8 fix(bee-table): bug修复:ie 下报错 对象不支持 “forEach” 方法、切换数据源,startIndex、endIndex错误 2020-04-10 12:54:37 +08:00
liushaozhen fd939c0855 publish 2.2.45 2020-04-01 14:54:48 +08:00
liushaozhen a24a865f7a fix(bee-table): 树形表格数据没有key无法展开bug 2020-04-01 14:54:41 +08:00
liushaozhen c9729d12ad publish 2.2.44 2020-03-30 12:49:21 +08:00
liushaozhen e112f641f4 feat(npm发包忽略 demo,docs,test,dist目录): 2020-03-30 12:49:18 +08:00
liushaozhen acfc791e3e react改为development npm发包忽略 demo,docs,test,dist目录 2020-03-30 11:24:00 +08:00
liushaozhen 80e92a7871 publish 2.2.43 2020-03-24 14:38:03 +08:00
liushaozhen 606ed5d901 fix(bee-table): TableCell去掉Frament 2020-03-24 14:37:58 +08:00
yangchch6 0e21ef0e3b publish 2.2.42 2020-03-22 16:48:57 +08:00
yangchch6 da2414b196 feat: 增加columnKey属性,column[columnKey]可作为主键 2020-03-22 16:47:08 +08:00
yangchch6 87be595ae5 publish 2.2.41 2020-03-13 14:59:32 +08:00
liushaozhen 98e5e14d9a publish 2.2.40 2020-03-11 13:52:16 +08:00
liushaozhen 4452dc6a69 feat(bee-table): tableCell colSpan==0 return null & isLeaf 改为 _isLeaf 2020-03-11 13:52:12 +08:00
liushaozhen 792698025a demo修改 2020-03-09 13:46:12 +08:00
liushaozhen 1fe5f5705c feat(bee-table): en_us.js默认翻译修改 2020-03-09 11:10:55 +08:00
liushaozhen 2eaf88a845 publish 2.2.39 2020-03-09 10:31:07 +08:00
liushaozhen 99c0289e09 fix(bee-table): 过滤行多语设置bug 2020-03-09 10:31:03 +08:00
liushaozhen 3aec58960d publish 2.2.38 2020-03-02 14:32:12 +08:00
liushaozhen f892ba3a17 feat(bee-table): 列过滤 filterType新增 dateyear(日期-年)、datemonth(日期-月)、dateweek(日期-周) 类型
列过滤 filterType新增 dateyear(日期-年)、datemonth(日期-月)、dateweek(日期-周) 类型
2020-03-02 14:32:05 +08:00
yangchch6 58f2e80ff0 publish 2.2.37 2020-02-28 20:58:07 +08:00
yangchch6 910c10469d 未设置key的容错 2020-02-28 20:57:09 +08:00
yangchch6 7ed1cd7693 publish 2.2.36 2020-02-12 15:03:26 +08:00
yangchch6 4a1c146f51 feature: 增加参数minColumnWidth,设置拖拽列宽度的最小限制 2020-02-12 15:02:13 +08:00
liushaozhen 32892ecd9a publish 2.2.35 2020-02-11 19:14:16 +08:00
liushaozhen 7a27bc5ed6 fix(bee-table): bugfix 设置expandRowByClick,无法显示箭头,去掉 expandRowByClick 判断 2020-02-11 19:14:12 +08:00
liushaozhen 4ec97d962d bugfix 设置expandRowByClick,无法显示箭头,去掉 expandRowByClick 判断 2020-02-11 16:57:57 +08:00
yangchch6 8ba7a7b552 publish 2.2.34 2020-02-10 17:48:44 +08:00
yangchch6 41a51ce2d4 fix: 解决treetable右侧出现空白的问题 2020-02-10 17:46:54 +08:00
yangchch6 1402f50d18 publish 2.2.33 2020-01-10 11:40:02 +08:00
yangchch6 ee5fa5123a fix:点击表头,会触发拖拽列宽事件问题 2020-01-10 11:39:13 +08:00
yangchch6 e7388e3d32 publish 2.2.32 2020-01-07 20:37:15 +08:00
yangchch6 b6201d7319 固定表头th 限制最大宽度 2020-01-07 20:35:04 +08:00
yangchch6 f3383c0675 publish 2.2.31 2020-01-07 15:17:51 +08:00
yangchch6 b183fde817 fix: 行拖拽,表头更新后,拖拽把手丢失 2020-01-07 15:16:46 +08:00
56 changed files with 82304 additions and 74427 deletions

46
.github/workflows/publish.yml vendored Normal file
View File

@ -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}}

6
.gitignore vendored
View File

@ -40,4 +40,8 @@ coverage
.*.swp
package-lock.json
demo/.DS_Store
demo/demolist/.DS_Store
demo/demolist/.DS_Store
# vsCode
.history
.docker

5
.huskyrc Normal file
View File

@ -0,0 +1,5 @@
{
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}

View File

@ -26,3 +26,8 @@ sea-modules
spm_modules
.cache
coverage
demo
docs
test
dist
.npmignore

File diff suppressed because it is too large Load Diff

682
README.md
View File

@ -1,339 +1,343 @@
# bee-table
[![npm version](https://img.shields.io/npm/v/bee-table.svg)](https://www.npmjs.com/package/bee-table)
[![Build Status](https://img.shields.io/travis/tinper-bee/bee-table/master.svg)](https://travis-ci.org/tinper-bee/bee-table)
[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-table/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
[![dependencies Status](https://david-dm.org/tinper-bee/bee-table/status.svg)](https://david-dm.org/tinper-bee/bee-table)
[![NPM downloads](http://img.shields.io/npm/dm/bee-table.svg?style=flat)](https://npmjs.org/package/bee-table)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-table.svg)](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>
## 安装
[![bee-table](https://nodei.co/npm/bee-table.png)](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`rowKeyrecord, 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函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'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
[![npm version](https://img.shields.io/npm/v/bee-table.svg)](https://www.npmjs.com/package/bee-table)
[![Build Status](https://img.shields.io/travis/tinper-bee/bee-table/master.svg)](https://travis-ci.org/tinper-bee/bee-table)
[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-table/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
[![dependencies Status](https://david-dm.org/tinper-bee/bee-table/status.svg)](https://david-dm.org/tinper-bee/bee-table)
[![NPM downloads](http://img.shields.io/npm/dm/bee-table.svg?style=flat)](https://npmjs.org/package/bee-table)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-table.svg)](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>
## 安装
[![bee-table](https://nodei.co/npm/bee-table.png)](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`rowKeyrecord, 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函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'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

View File

@ -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' });
}

View File

@ -313,5 +313,8 @@ FilterDropDown.defaultProps = {
filterDropdownType: 'string'
};
FilterDropDown.contextTypes = {
beeLocale: _propTypes2["default"].object
};
exports["default"] = FilterDropDown;
module.exports = exports['default'];

View File

@ -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
*/

View File

@ -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;

View File

@ -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)
)
);
};

View File

@ -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,

View File

@ -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;

View File

@ -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,

View File

@ -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);

View File

@ -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"
},

View File

@ -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 });

View File

@ -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,

View File

@ -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)));

3
commitlint.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
extends: ['@commitlint/config-conventional']
}

62
demo/demolist/Demo0401.js Normal file
View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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

View File

@ -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',
},
{

View File

@ -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;

View File

@ -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;

View File

@ -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);

View File

@ -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;

View File

@ -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;

View File

@ -123,7 +123,7 @@ class Demo4 extends Component {
selectedRow: selectedRow
});
}}
rowKey="key"//每条数据的唯一标示默认为key如果不是key必须传
columns={columns4} data={data4} />;
}
}

View File

@ -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;

View File

@ -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;

View File

@ -87,6 +87,7 @@ class Demo34 extends Component {
onRowClick={(record, index, indent) => {
console.log('currentIndex--' + index);
}}
rowKey="key"//每条数据的唯一标示默认为key如果不是key必须传
/>
</div>

View File

@ -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

10
dist/demo.css vendored
View File

@ -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;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

152236
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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`rowKeyrecord, index`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
| rowKey | 如果rowKey是字符串`record [rowKey]`将被用作键。如果rowKey是function`rowKeyrecord, 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函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-|
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'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) => {} |

View File

@ -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>

View File

@ -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"
}
}
}

View File

@ -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);

View File

@ -184,4 +184,7 @@ FilterDropDown.defaultProps = {
filterDropdownType: 'string'
}
FilterDropDown.contextTypes = {
beeLocale: PropTypes.object
};
export default FilterDropDown;

View File

@ -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

View File

@ -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>
);
}

View File

@ -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{

View File

@ -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>
}
};

View File

@ -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>

View File

@ -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}
>

View File

@ -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)

View File

@ -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",
},

View File

@ -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 });

View File

@ -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;
}

View File

@ -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}));