Compare commits
31 Commits
master
...
2.3.15-bet
| Author | SHA1 | Date |
|---|---|---|
gx
|
584104651f | |
|
gx
|
3b5ae93b7a | |
|
gx
|
74737239c3 | |
|
gx
|
e9f3088eb0 | |
|
gx
|
6524a1d9aa | |
|
gx
|
87ed08a724 | |
|
gx
|
7c9066da5b | |
|
gx-mac
|
929f501ff0 | |
|
gx
|
1ed2de9c61 | |
|
gx
|
3ccd8210a2 | |
|
gx
|
4215c4ec1e | |
|
gx
|
4db60bd1b6 | |
|
gx
|
a2024a9827 | |
|
gx
|
0c7e3d9d7e | |
|
gx
|
b98ef9d4e8 | |
|
gx
|
b0914c928e | |
|
=gx
|
d6e16c2ef1 | |
|
gx-mac
|
ffd42b97e6 | |
|
gx-mac
|
f1c585a850 | |
|
gx-mac
|
f1dfb9c85f | |
|
gx-mac
|
e072df43fb | |
|
gx-mac
|
290ba7aed8 | |
|
gx-mac
|
43193e089b | |
|
gx-mac
|
3c0aa855a7 | |
|
gx-mac
|
cb7d54be80 | |
|
gx-mac
|
06a8d7f6ff | |
|
gx-mac
|
6b8ad2414e | |
|
gx-mac
|
abf567d6da | |
|
houjitong
|
e1d73a9c33 | |
|
gx
|
6b609d1a3d | |
|
gx
|
d867fdff33 |
|
|
@ -43,5 +43,4 @@ demo/.DS_Store
|
|||
demo/demolist/.DS_Store
|
||||
|
||||
# vsCode
|
||||
.history
|
||||
.docker
|
||||
.history
|
||||
684
README.md
684
README.md
|
|
@ -1,343 +1,341 @@
|
|||
# bee-table
|
||||
|
||||
[](https://www.npmjs.com/package/bee-table)
|
||||
[](https://travis-ci.org/tinper-bee/bee-table)
|
||||
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
||||
[](https://david-dm.org/tinper-bee/bee-table)
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
|
||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||
* 动态设置过滤列
|
||||
* 排序合计
|
||||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
||||
## 使用方法
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||
{
|
||||
title: '操作', dataIndex: '', key: 'd', render() {
|
||||
return <a href="#">一些操作</a>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||
];
|
||||
|
||||
class Demo extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Table
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 列的配置表，具体配置见下表 | array | - |
|
||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||
| style | 添加到table上的style | object | {} |
|
||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
||||
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
||||
| showHeader | 是否显示表头 | bool | true |
|
||||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number / 百分比, y: number }` | {} |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
### Column
|
||||
|
||||
|参数|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|key|列的键|string|-|
|
||||
|className|传入列的classname|String |-|
|
||||
|colSpan|该列的colSpan|Number|-|
|
||||
|title|列的标题|node|-|
|
||||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|notRowDrag| rowDraggAble 为true时表示这个表格是可以行拖拽改变顺序的，notRowDrag为true可以实现某一列来控制这行是否可以拖拽|bool| 默认为false的，不会控制当前行是否拖拽。
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
||||
* 在tinper-bee中引用
|
||||
|
||||
```js
|
||||
|
||||
import {Table} from 'tinper-bee'
|
||||
|
||||
```
|
||||
|
||||
* 单独安装bee-table 方式
|
||||
|
||||
```js
|
||||
|
||||
import Table from 'bee-table'
|
||||
|
||||
```
|
||||
|
||||
## 如何引用增强功能(multiSelect,sort,sum)
|
||||
|
||||
|
||||
```js
|
||||
|
||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
|
||||
#### data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
### sort
|
||||
|
||||
排序功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
|
||||
|
||||
|
||||
### sum
|
||||
|
||||
合计功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
|
||||
### filterColumn
|
||||
|
||||
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
||||
|
||||
|
||||
### dragColumn
|
||||
|
||||
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
||||
|
||||
#### dragColumn新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
|
||||
| onDrop | 交换列的回调函数 | function | (event,data,columns) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||
|
||||
```js
|
||||
import InputRender from "bee-table/render/InputRender.js"
|
||||
```
|
||||
|
||||
## 安装依赖包
|
||||
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
|
||||
|
||||
### InputRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
|
||||
| placeholder | 输入框的提示信息 | string | - |
|
||||
| value | 输入框中的显示值 | string | 无 |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
||||
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
|
||||
| formItemClassName | FormItem的class | string | - |
|
||||
| mesClassName | 校验错误信息的class | string | - |
|
||||
| isRequire | 是否必填 | bool | false |
|
||||
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
||||
| method | 校验方式，change/blur | string | - |
|
||||
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
||||
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
||||
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
|
||||
|
||||
### DateRender
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见bee-datepicker组件参数配置
|
||||
|
||||
|
||||
### SelectRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-select`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见bee-select组件参数配置
|
||||
|
||||
|
||||
## 开发调试
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/tinper-bee/bee-table
|
||||
$ cd bee-table
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
##change
|
||||
|
||||
|
||||
# bee-table
|
||||
|
||||
[](https://www.npmjs.com/package/bee-table)
|
||||
[](https://travis-ci.org/tinper-bee/bee-table)
|
||||
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
||||
[](https://david-dm.org/tinper-bee/bee-table)
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
|
||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||
* 动态设置过滤列
|
||||
* 排序合计
|
||||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
||||
## 使用方法
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||
{
|
||||
title: '操作', dataIndex: '', key: 'd', render() {
|
||||
return <a href="#">一些操作</a>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||
];
|
||||
|
||||
class Demo extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Table
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 列的配置表，具体配置见下表 | array | - |
|
||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||
| style | 添加到table上的style | object | {} |
|
||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
||||
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
||||
| showHeader | 是否显示表头 | bool | true |
|
||||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number / 百分比, y: number }` | {} |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
### Column
|
||||
|
||||
|参数|说明|类型|默认值|
|
||||
|:--|:---|:--|:---|
|
||||
|key|列的键|string|-|
|
||||
|className|传入列的classname|String |-|
|
||||
|colSpan|该列的colSpan|Number|-|
|
||||
|title|列的标题|node|-|
|
||||
|dataIndex| 显示数据记录的字段|String|-|
|
||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|notRowDrag| rowDraggAble 为true时表示这个表格是可以行拖拽改变顺序的，notRowDrag为true可以实现某一列来控制这行是否可以拖拽|bool| 默认为false的，不会控制当前行是否拖拽。
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
||||
* 在tinper-bee中引用
|
||||
|
||||
```js
|
||||
|
||||
import {Table} from 'tinper-bee'
|
||||
|
||||
```
|
||||
|
||||
* 单独安装bee-table 方式
|
||||
|
||||
```js
|
||||
|
||||
import Table from 'bee-table'
|
||||
|
||||
```
|
||||
|
||||
## 如何引用增强功能(multiSelect,sort,sum)
|
||||
|
||||
|
||||
```js
|
||||
|
||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
|
||||
#### data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
### sort
|
||||
|
||||
排序功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
|
||||
|
||||
|
||||
### sum
|
||||
|
||||
合计功能
|
||||
|
||||
#### Column新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||
|
||||
|
||||
### filterColumn
|
||||
|
||||
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
||||
|
||||
|
||||
### dragColumn
|
||||
|
||||
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
||||
|
||||
#### dragColumn新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
|
||||
| onDrop | 交换列的回调函数 | function | (event,data,columns) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||
|
||||
```js
|
||||
import InputRender from "bee-table/render/InputRender.js"
|
||||
```
|
||||
|
||||
## 安装依赖包
|
||||
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
|
||||
|
||||
### InputRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
|
||||
| placeholder | 输入框的提示信息 | string | - |
|
||||
| value | 输入框中的显示值 | string | 无 |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
||||
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
|
||||
| formItemClassName | FormItem的class | string | - |
|
||||
| mesClassName | 校验错误信息的class | string | - |
|
||||
| isRequire | 是否必填 | bool | false |
|
||||
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
||||
| method | 校验方式，change/blur | string | - |
|
||||
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
||||
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
||||
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
|
||||
|
||||
### DateRender
|
||||
日期类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||
|
||||
|
||||
注:其他参数参见bee-datepicker组件参数配置
|
||||
|
||||
|
||||
### SelectRender
|
||||
输入框类型render
|
||||
|
||||
#### 依赖的组件
|
||||
该render依赖于`bee-icon`,`bee-select`
|
||||
|
||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
||||
|
||||
#### 配置
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array | - |
|
||||
|
||||
|
||||
|
||||
注:其他参数参见bee-select组件参数配置
|
||||
|
||||
|
||||
## 开发调试
|
||||
|
||||
```sh
|
||||
$ git clone https://github.com/tinper-bee/bee-table
|
||||
$ cd bee-table
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -902,3 +902,17 @@
|
|||
line-height: 30px; }
|
||||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
display: block !important; }
|
||||
.loading-td.pre-td {
|
||||
bottom: 0; }
|
||||
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
border: none !important; }
|
||||
.loading-div.pre {
|
||||
bottom: 0; }
|
||||
.loading-div.suf {
|
||||
top: 0; }
|
||||
|
|
|
|||
240
build/Table.js
240
build/Table.js
|
|
@ -58,6 +58,10 @@ var _i18n2 = _interopRequireDefault(_i18n);
|
|||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
|
||||
var _resizeObserverPolyfill = require('resize-observer-polyfill');
|
||||
|
||||
var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -168,6 +172,7 @@ var defaultProps = {
|
|||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false,
|
||||
syncFixedRowHeight: false,
|
||||
size: 'md',
|
||||
rowDraggAble: false,
|
||||
hideDragHandle: false,
|
||||
|
|
@ -241,6 +246,9 @@ var Table = function (_Component) {
|
|||
}
|
||||
});
|
||||
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({
|
||||
|
|
@ -289,6 +297,17 @@ var Table = function (_Component) {
|
|||
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
||||
};
|
||||
|
||||
_this.getFlatRecords = function (data) {
|
||||
var result = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
result.push(data[i]);
|
||||
if ((data[i].children || []).length) {
|
||||
result = result.concat(_this.getFlatRecords(data[i].children));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
_this.clearBodyMouseLeaveTimer = function () {
|
||||
if (_this.bodyMouseLeaveTimmer) {
|
||||
clearTimeout(_this.bodyMouseLeaveTimmer);
|
||||
|
|
@ -370,6 +389,7 @@ var Table = function (_Component) {
|
|||
_this.getFooter = _this.getFooter.bind(_this);
|
||||
_this.getEmptyText = _this.getEmptyText.bind(_this);
|
||||
_this.getHeaderRowStyle = _this.getHeaderRowStyle.bind(_this);
|
||||
_this.manualSyncFixedTableRowHeight = _this.manualSyncFixedTableRowHeight.bind(_this);
|
||||
_this.syncFixedTableRowHeight = _this.syncFixedTableRowHeight.bind(_this);
|
||||
_this.resetScrollX = _this.resetScrollX.bind(_this);
|
||||
_this.findExpandedRow = _this.findExpandedRow.bind(_this);
|
||||
|
|
@ -384,6 +404,7 @@ var Table = function (_Component) {
|
|||
_this.leftColumnsLength; //左侧固定列的长度
|
||||
_this.centerColumnsLength; //非固定列的长度
|
||||
_this.columnsChildrenList = []; //复杂表头、所有叶子节点
|
||||
_this.dataChanged = false; // 数据是否改变
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -393,6 +414,8 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.componentDidMount = function componentDidMount() {
|
||||
var _this2 = this;
|
||||
|
||||
this.getTableUID();
|
||||
_utils.EventUtil.addHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||||
_utils.EventUtil.addHandler(this.contentTable, 'focus', this.onFocus);
|
||||
|
|
@ -407,7 +430,14 @@ var Table = function (_Component) {
|
|||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
|
||||
|
||||
var targetNode = this.contentTable;
|
||||
if (targetNode) {
|
||||
this.resizeObserver = new _resizeObserverPolyfill2["default"](function () {
|
||||
_this2.resize();
|
||||
});
|
||||
this.resizeObserver.observe(targetNode);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -478,9 +508,63 @@ var Table = function (_Component) {
|
|||
// if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
|
||||
// this.resetScrollX();
|
||||
// }
|
||||
// 当懒加载手动设置的scroll.y发生变化时，滚动条回到顶部
|
||||
var prevScrollY = prevProps.scroll.y;
|
||||
var 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) {
|
||||
if (prevScrollY !== currentScrollY) {
|
||||
var bodyScrollTop = this.bodyTable.scrollTop;
|
||||
if (bodyScrollTop === 0) {
|
||||
// 在顶部的时候，滚动条不用动
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
var distance = bodyScrollTop + currentScrollY - prevScrollY;
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
var _bodyTable = this.bodyTable,
|
||||
scrollHeight = _bodyTable.scrollHeight,
|
||||
scrollTop = _bodyTable.scrollTop;
|
||||
|
||||
var bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY); // 在最底部的时候也不用滚动滚动条
|
||||
if (bottomDistance < 5) {
|
||||
// 有些dom计算不是十分精确，设置一个值来缓冲一下
|
||||
this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY;
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.bodyTable.scrollTop += 1;
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
if (this.bodyTable) {
|
||||
var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
|
||||
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
|
||||
// 此处应该对比一下实际的
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
this.bodyTable.style.overflowX = 'scroll';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.bodyTableOuter) {
|
||||
// 隐藏几个不需要真正滚动的父元素的滚动条
|
||||
this.bodyTableOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
if (this.fixedColumnsBodyLeftOuter) {
|
||||
this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
if (this.fixedColumnsBodyRightOuter) {
|
||||
this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden';
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
|
|
@ -488,8 +572,8 @@ var Table = function (_Component) {
|
|||
this.contentTable = null;
|
||||
_utils.EventUtil.removeHandler(this.contentTable, 'keydown', this.onKeyDown);
|
||||
_utils.EventUtil.removeHandler(this.contentTable, 'focus', this.onFocus);
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -705,7 +789,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getHeaderRows = function getHeaderRows(columns) {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
var currentRow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
var rows = arguments[2];
|
||||
|
|
@ -730,8 +814,8 @@ var Table = function (_Component) {
|
|||
}
|
||||
}
|
||||
var width = column.width;
|
||||
if (typeof width == 'string' && width.indexOf('%') > -1 && _this2.contentWidth) {
|
||||
width = parseInt(_this2.contentWidth * parseInt(width) / 100);
|
||||
if (typeof width == 'string' && width.indexOf('%') > -1 && _this3.contentWidth) {
|
||||
width = parseInt(_this3.contentWidth * parseInt(width) / 100);
|
||||
} else if (width) {
|
||||
width = parseInt(width);
|
||||
}
|
||||
|
|
@ -754,9 +838,9 @@ var Table = function (_Component) {
|
|||
cell.onClick = column.onHeadCellClick;
|
||||
}
|
||||
if (column.children) {
|
||||
_this2.getHeaderRows(column.children, currentRow + 1, rows);
|
||||
_this3.getHeaderRows(column.children, currentRow + 1, rows);
|
||||
} else {
|
||||
_this2.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
|
||||
_this3.columnsChildrenList.push(column); //复杂表头拖拽，所有叶子节点
|
||||
}
|
||||
if ('colSpan' in column) {
|
||||
cell.colSpan = column.colSpan;
|
||||
|
|
@ -768,7 +852,7 @@ var Table = function (_Component) {
|
|||
rows[currentRow].push(cell);
|
||||
}
|
||||
//判断是否启用过滤
|
||||
if (_this2.props.filterable) {
|
||||
if (_this3.props.filterable) {
|
||||
//组装Filter需要的Col
|
||||
filterCol.push({
|
||||
key: column.key,
|
||||
|
|
@ -776,7 +860,7 @@ var Table = function (_Component) {
|
|||
width: column.width,
|
||||
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
|
||||
dataindex: column.dataIndex, //field
|
||||
datasource: _this2.props.data, //需要单独拿到数据处理
|
||||
datasource: _this3.props.data, //需要单独拿到数据处理
|
||||
format: column.format, //设置日期的格式
|
||||
filterdropdown: column.filterDropdown, //是否显示 show hide
|
||||
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
|
||||
|
|
@ -916,7 +1000,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"], { onPaste: onPaste, height: props.lazyLoad.preHeight, columns: [], className: '', key: 'table_row_first', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isPre: true, 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;
|
||||
|
|
@ -926,7 +1010,7 @@ 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'];
|
||||
typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
|
||||
// _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
|
||||
var _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
|
|
@ -1049,7 +1133,7 @@ var Table = function (_Component) {
|
|||
}
|
||||
|
||||
if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], { onPaste: onPaste, containerWidth: this.contentDomWidth, isSuf: true, height: props.lazyLoad.sufHeight, key: 'table_row_end', columns: [], className: '', store: this.store, visible: true }));
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
this.treeType = false;
|
||||
|
|
@ -1067,7 +1151,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getColGroup = function getColGroup(columns, fixed) {
|
||||
var _this3 = this;
|
||||
var _this4 = this;
|
||||
|
||||
var cols = [];
|
||||
var self = this;
|
||||
|
|
@ -1106,7 +1190,7 @@ var Table = function (_Component) {
|
|||
width = width + contentWidthDiff;
|
||||
}
|
||||
if (!fixed && c.fixed) {
|
||||
fixedClass = ' ' + _this3.props.clsPrefix + '-row-fixed-columns-in-body';
|
||||
fixedClass = ' ' + _this4.props.clsPrefix + '-row-fixed-columns-in-body';
|
||||
}
|
||||
return _react2["default"].createElement('col', { key: c.key, style: { width: width, minWidth: c.width }, className: fixedClass });
|
||||
}));
|
||||
|
|
@ -1132,7 +1216,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.getTable = function getTable() {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var columns = options.columns,
|
||||
|
|
@ -1165,7 +1249,7 @@ var Table = function (_Component) {
|
|||
if (this.props.data.length == 0 && this.props.headerScroll) {
|
||||
bodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
if (!footerScroll) {
|
||||
if (!footerScroll && this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
}
|
||||
}
|
||||
|
|
@ -1177,6 +1261,11 @@ var Table = function (_Component) {
|
|||
// bodyStyle.height = bodyStyle.height || scroll.y;
|
||||
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'scroll';
|
||||
} else if (this.contentWidth === this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
} else {
|
||||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
}
|
||||
|
|
@ -1210,7 +1299,15 @@ var Table = function (_Component) {
|
|||
headStyle.overflow = 'hidden';
|
||||
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
|
||||
} else {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
var userAgent = navigator.userAgent; // 火狐浏览器，固定表格跟随resize事件产生的滚动条隐藏
|
||||
var isFF = userAgent.indexOf("Firefox") > -1;
|
||||
if (isFF) {
|
||||
// innerBodyStyle.overflowX = 'hidden';
|
||||
delete innerBodyStyle.overflowX;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 没有数据时，表头滚动条隐藏问题
|
||||
|
|
@ -1239,37 +1336,39 @@ var Table = function (_Component) {
|
|||
if (scroll.x === true) {
|
||||
tableStyle.tableLayout = 'fixed';
|
||||
} else {
|
||||
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
|
||||
tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
|
||||
}
|
||||
}
|
||||
// 自动出现滚动条
|
||||
if (!fixed && _this4.contentDomWidth < _this4.contentWidth) {
|
||||
tableStyle.width = _this4.contentWidth - _this4.columnManager.getLeftColumnsWidth(_this4.contentWidth) - _this4.columnManager.getRightColumnsWidth(_this4.contentWidth);
|
||||
if (!fixed && _this5.contentDomWidth < _this5.contentWidth) {
|
||||
tableStyle.width = _this5.contentWidth - _this5.columnManager.getLeftColumnsWidth(_this5.contentWidth) - _this5.columnManager.getRightColumnsWidth(_this5.contentWidth);
|
||||
}
|
||||
if (_this5.bodyTable && !fixed && _this5.contentDomWidth === _this5.contentWidth) {
|
||||
tableStyle.width = _this5.bodyTable.clientWidth;
|
||||
}
|
||||
var tableBody = hasBody ? getBodyWrapper(_react2["default"].createElement(
|
||||
'tbody',
|
||||
{ className: clsPrefix + '-tbody', onMouseLeave: _this4.onBodyMouseLeave },
|
||||
_this4.getRows(columns, fixed)
|
||||
{ className: clsPrefix + '-tbody', onMouseLeave: _this5.onBodyMouseLeave },
|
||||
_this5.getRows(columns, fixed)
|
||||
)) : null;
|
||||
var _drag_class = _this4.props.dragborder ? "table-drag-bordered" : "";
|
||||
var _drag_class = _this5.props.dragborder ? "table-drag-bordered" : "";
|
||||
return _react2["default"].createElement(
|
||||
'table',
|
||||
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
|
||||
_this4.getColGroup(columns, fixed),
|
||||
hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
|
||||
_this5.getColGroup(columns, fixed),
|
||||
hasHead ? _this5.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
|
||||
tableBody
|
||||
);
|
||||
};
|
||||
|
||||
var headTable = void 0;
|
||||
|
||||
if (useFixedHeader) {
|
||||
headTable = _react2["default"].createElement(
|
||||
'div',
|
||||
{
|
||||
className: clsPrefix + '-header',
|
||||
ref: function ref(el) {
|
||||
fixed ? _this4.fixedHeadTable = el : _this4.headTable = el;
|
||||
fixed ? _this5.fixedHeadTable = el : _this5.headTable = el;
|
||||
},
|
||||
style: headStyle,
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
|
|
@ -1284,16 +1383,21 @@ var Table = function (_Component) {
|
|||
{
|
||||
className: clsPrefix + '-body',
|
||||
style: bodyStyle,
|
||||
ref: function ref(el) {
|
||||
_this4.bodyTable = el;
|
||||
},
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll,
|
||||
ref: function ref(el) {
|
||||
_this5.bodyTableOuter = el;
|
||||
},
|
||||
onMouseLeave: this.onBodyMouseLeave
|
||||
},
|
||||
this.renderDragHideTable(),
|
||||
renderTable(!useFixedHeader)
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'scroll-container', onScroll: this.handleBodyScroll, ref: function ref(el) {
|
||||
_this5.bodyTable = el;
|
||||
}, style: _extends({}, bodyStyle) },
|
||||
renderTable(!useFixedHeader)
|
||||
)
|
||||
);
|
||||
|
||||
if (fixed && columns.length) {
|
||||
|
|
@ -1316,12 +1420,17 @@ var Table = function (_Component) {
|
|||
{
|
||||
style: _extends({}, innerBodyStyle),
|
||||
className: clsPrefix + '-body-inner',
|
||||
ref: refName,
|
||||
ref: function ref(el) {
|
||||
return _this5[refName + 'Outer'] = el;
|
||||
},
|
||||
onMouseOver: this.detectScrollTarget,
|
||||
onTouchStart: this.detectScrollTarget,
|
||||
onScroll: this.handleBodyScroll
|
||||
onTouchStart: this.detectScrollTarget
|
||||
},
|
||||
renderTable(!useFixedHeader)
|
||||
_react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'fixed-scroll-container', ref: refName, style: _extends({}, innerBodyStyle), onScroll: this.handleBodyScroll },
|
||||
renderTable(!useFixedHeader)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1415,9 +1524,12 @@ var Table = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var _this5 = this;
|
||||
Table.prototype.manualSyncFixedTableRowHeight = function manualSyncFixedTableRowHeight() {
|
||||
this.dataChanged = true;
|
||||
this.syncFixedTableRowHeight();
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
|
|
@ -1425,13 +1537,16 @@ var Table = function (_Component) {
|
|||
headerHeight = _props9.headerHeight,
|
||||
columns = _props9.columns,
|
||||
heightConsistent = _props9.heightConsistent,
|
||||
bodyDisplayInRow = _props9.bodyDisplayInRow;
|
||||
bodyDisplayInRow = _props9.bodyDisplayInRow,
|
||||
lazyLoad = _props9.lazyLoad,
|
||||
syncFixedRowHeight = _props9.syncFixedRowHeight;
|
||||
|
||||
var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
|
||||
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
|
||||
var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
var rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
|
||||
this.dataChanged = false;
|
||||
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
|
||||
var height = headerHeight;
|
||||
if (headerHeight) {
|
||||
|
|
@ -1439,25 +1554,35 @@ var Table = function (_Component) {
|
|||
}
|
||||
return headerHeight ? height : parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
});
|
||||
var flatRecords = this.getFlatRecords(this.props.data || []);
|
||||
var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row, index) {
|
||||
var rsHeight = height;
|
||||
if (bodyDisplayInRow && rsHeight) {
|
||||
return rsHeight;
|
||||
} else {
|
||||
var rowKey = row.getAttribute('data-row-key');
|
||||
var record = flatRecords.find(function (record) {
|
||||
return record.key === rowKey;
|
||||
}) || {};
|
||||
var leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null; // ncc传递这俩属性区分是否是子节点
|
||||
var isLeaf = leafKey && record[leafKey] === true;
|
||||
if (isLeaf) {
|
||||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||||
}
|
||||
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
|
||||
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
|
||||
if (heightConsistent || !bodyDisplayInRow && rsHeight) {
|
||||
if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) {
|
||||
var leftHeight = void 0,
|
||||
rightHeight = void 0,
|
||||
currentHeight = void 0,
|
||||
maxHeight = void 0;
|
||||
leftHeight = leftBodyRows[index] ? parseInt(leftBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
rightHeight = rightBodyRows[index] ? parseInt(rightBodyRows[index].getBoundingClientRect().height) : 0;
|
||||
currentHeight = parseInt(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 parseInt(row.getBoundingClientRect().height) || 'auto';
|
||||
return Number(Number(row.getBoundingClientRect().height).toFixed(2)) || 'auto';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1465,17 +1590,16 @@ var Table = function (_Component) {
|
|||
// 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) {}
|
||||
}
|
||||
var 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 ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||||
|
|
|
|||
|
|
@ -356,70 +356,74 @@ var TableCell = function (_Component) {
|
|||
var colSpan = void 0;
|
||||
var rowSpan = void 0,
|
||||
title = void 0;
|
||||
|
||||
if (render && !showSum) {
|
||||
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;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
var 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;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _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;
|
||||
}
|
||||
// 如果是固定列在主表格上就渲染null
|
||||
if (column.fixed && !fixed) {
|
||||
text = null;
|
||||
} else {
|
||||
if (render && !showSum) {
|
||||
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;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
// 根据 fieldType 来渲染数据
|
||||
if (!render) {
|
||||
switch (column.fieldType) {
|
||||
case 'link':
|
||||
{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -142,12 +142,13 @@ var TableHeader = function (_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.fixedRightHeaderTable = 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) {
|
||||
|
|
@ -162,6 +163,10 @@ var TableHeader = function (_Component) {
|
|||
}
|
||||
|
||||
table.innerTableBody = contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
|
||||
table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
|
||||
table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
|
||||
table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
|
||||
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
|
||||
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
|
||||
}
|
||||
|
|
@ -219,8 +224,10 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
TableHeader.prototype.doEventList = function doEventList(trs, action) {
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -230,13 +237,18 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.dragBorderEventInit = function dragBorderEventInit() {
|
||||
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) {
|
||||
_this5.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元素上
|
||||
};
|
||||
|
||||
|
|
@ -246,13 +258,15 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
|
||||
var _this6 = this;
|
||||
var _this5 = 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) {
|
||||
_this6.eventListen(events, 'remove', _this6.table.tr);
|
||||
});
|
||||
if (this.table && this.table.tr) {
|
||||
this.doEventList(this.table.tr, function (tr) {
|
||||
_this5.eventListen(events, 'remove', _this5.table.tr);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
TableHeader.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
|
|
@ -431,7 +445,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
|
||||
TableHeader.prototype.render = function render() {
|
||||
var _this7 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var _props2 = this.props,
|
||||
clsPrefix = _props2.clsPrefix,
|
||||
|
|
@ -449,7 +463,7 @@ var TableHeader = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
"thead",
|
||||
_extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll", ref: function ref(_thead) {
|
||||
return _this7._thead = _thead;
|
||||
return _this6._thead = _thead;
|
||||
} }),
|
||||
rows.map(function (row, index) {
|
||||
var _rowLeng = row.length - 1;
|
||||
|
|
@ -495,7 +509,7 @@ var TableHeader = function (_Component) {
|
|||
|
||||
// }
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this7.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
da.children = _this6.filterRenderType(da["filtertype"], da.dataindex, columIndex);
|
||||
if (da.key === undefined) {
|
||||
keyTemp.key = keyTemp.key + '-filterable';
|
||||
}
|
||||
|
|
@ -516,7 +530,7 @@ var TableHeader = function (_Component) {
|
|||
"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", onCopy: function onCopy(event) {
|
||||
_this7.onCopy(da, columIndex, event);
|
||||
_this6.onCopy(da, columIndex, event);
|
||||
} }),
|
||||
da.children,
|
||||
|
||||
|
|
@ -524,10 +538,10 @@ var TableHeader = function (_Component) {
|
|||
dragborder && lastObj && da.key != lastObj.key ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this7.gap = el;
|
||||
return _this6.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" },
|
||||
_react2["default"].createElement("div", { className: "online" })
|
||||
) : ""
|
||||
);
|
||||
|
|
@ -538,7 +552,22 @@ 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, style: { maxWidth: da.width }, onCopy: _this7.onCopy }));
|
||||
return _react2["default"].createElement(
|
||||
"th",
|
||||
_extends({}, thDefaultObj, keyTemp, { "data-th-fixed": da.fixed, style: { maxWidth: da.width }, onCopy: _this6.onCopy }),
|
||||
da.children,
|
||||
|
||||
// && columIndex != _rowLeng
|
||||
dragborder ? _react2["default"].createElement(
|
||||
"div",
|
||||
{ ref: function ref(el) {
|
||||
return _this6.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" },
|
||||
_react2["default"].createElement("div", { className: "online" })
|
||||
) : ""
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
|
@ -554,7 +583,7 @@ TableHeader.defaultProps = {
|
|||
};
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
var _this8 = this;
|
||||
var _this7 = this;
|
||||
|
||||
this.getOnLineObject = function (_element) {
|
||||
var type = _element.getAttribute('data-type'),
|
||||
|
|
@ -571,28 +600,29 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onTrMouseDown = function (e) {
|
||||
var eventNoStop = _this8.props.eventNoStop;
|
||||
var eventNoStop = _this7.props.eventNoStop;
|
||||
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e),
|
||||
targetEvent = _utils.Event.getTarget(event);
|
||||
var _props3 = _this8.props,
|
||||
var _props3 = _this7.props,
|
||||
clsPrefix = _props3.clsPrefix,
|
||||
contentTable = _props3.contentTable,
|
||||
lastShowIndex = _props3.lastShowIndex,
|
||||
columnsChildrenList = _props3.columnsChildrenList;
|
||||
// let currentElement = this.getOnLineObject(targetEvent);
|
||||
|
||||
var currentElement = _this8.getTargetToType(targetEvent);
|
||||
var currentElement = _this7.getTargetToType(targetEvent);
|
||||
if (!currentElement) return;
|
||||
var type = currentElement.getAttribute('data-type');
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
if (type == 'online' && _this8.props.dragborder) {
|
||||
var fixedType = currentElement.getAttribute('data-th-fixed');
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
if (type == 'online' && _this7.props.dragborder) {
|
||||
// if(!this.props.dragborder)return;
|
||||
targetEvent.setAttribute('draggable', false); //添加交换列效果
|
||||
var currentIndex = -1;
|
||||
var defaultWidth = currentElement.getAttribute("data-th-width");
|
||||
_this8.drag.option = "border"; //拖拽操作
|
||||
_this7.drag.option = "border"; //拖拽操作
|
||||
if (columnsChildrenList) {
|
||||
var columnKey = currentElement.getAttribute("data-line-key");
|
||||
if (columnKey) {
|
||||
|
|
@ -605,27 +635,50 @@ var _initialiseProps = function _initialiseProps() {
|
|||
console.log('Key must be set for column!');
|
||||
return;
|
||||
}
|
||||
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();
|
||||
var currentObj = _this7.table.cols[currentIndex];
|
||||
_this7.drag.currIndex = currentIndex;
|
||||
_this7.drag.oldLeft = event.clientX;
|
||||
_this7.drag.currentLeft = event.clientX;
|
||||
_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 (!_this8.lastColumWidth) {
|
||||
_this8.lastColumWidth = parseInt(_this8.table.cols[lastShowIndex].style.width);
|
||||
|
||||
// if(!this.lastColumWidth){
|
||||
var contentT = _this7.table.tableHeaderCols || _this7.table.cols;
|
||||
_this7.lastColumWidth = parseInt(contentT[lastShowIndex].style.width);
|
||||
// console.log('begin--lastColumnWidth',this.lastColumWidth);
|
||||
// }
|
||||
_this7.drag.contentTableCWidth = _this7.table.contentTableHeader.clientWidth;
|
||||
_this7.drag.contentTableSWidth = _this7.table.contentTableHeader.scrollWidth;
|
||||
if (fixedType) {
|
||||
var contentTablePar = _this7.table.contentTableHeader.parentNode;
|
||||
|
||||
if (contentTablePar) {
|
||||
var originL = parseInt(contentTablePar.style.marginLeft);
|
||||
var originR = parseInt(contentTablePar.style.marginRight);
|
||||
// 内容区表格marginLef
|
||||
_this7.drag.contentTableML = originL;
|
||||
_this7.drag.contentTableMR = originR;
|
||||
}
|
||||
}
|
||||
} else if (type != 'online' && _this8.props.draggable) {
|
||||
_this7.drag.fixedType = fixedType;
|
||||
if (fixedType === 'left' && _this7.table.fixedRightBodyTable) {
|
||||
_this7.drag.fixedRightBodyTableLeft = _this7.table.fixedRightBodyTable.getBoundingClientRect().left;
|
||||
} else {
|
||||
_this7.drag.fixedRightBodyTableLeft = null;
|
||||
}
|
||||
} else if (type != 'online' && _this7.props.draggable) {
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!_this8.props.draggable) return;
|
||||
var th = _this8.getTargetToType(targetEvent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var th = _this7.getTargetToType(targetEvent);
|
||||
th.setAttribute('draggable', true); //添加交换列效果
|
||||
_this8.drag.option = 'dragAble';
|
||||
_this8.currentDome = th;
|
||||
_this7.drag.option = 'dragAble';
|
||||
_this7.currentDome = th;
|
||||
var _currentIndex = parseInt(th.getAttribute("data-line-index"));
|
||||
_this8.drag.currIndex = _currentIndex;
|
||||
_this7.drag.currIndex = _currentIndex;
|
||||
} else {
|
||||
// console.log("onTrMouseDown dragborder or draggable is all false !");
|
||||
return;
|
||||
|
|
@ -635,8 +688,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTableWidth = function () {
|
||||
var tableWidth = 0,
|
||||
offWidth = 0; //this.table.cols.length;
|
||||
for (var index = 0; index < _this8.table.cols.length; index++) {
|
||||
var da = _this8.table.cols[index];
|
||||
for (var index = 0; index < _this7.table.cols.length; index++) {
|
||||
var da = _this7.table.cols[index];
|
||||
tableWidth += parseInt(da.style.width);
|
||||
}
|
||||
return tableWidth - offWidth;
|
||||
|
|
@ -645,7 +698,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToType = function (targetEvent) {
|
||||
var tag = targetEvent;
|
||||
if (targetEvent && !targetEvent.getAttribute("data-type")) {
|
||||
tag = _this8.getTargetToType(targetEvent.parentElement);
|
||||
tag = _this7.getTargetToType(targetEvent.parentElement);
|
||||
}
|
||||
return tag;
|
||||
};
|
||||
|
|
@ -653,15 +706,15 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.getTargetToTh = function (targetEvent) {
|
||||
var th = targetEvent;
|
||||
if (targetEvent.nodeName.toUpperCase() != "TH") {
|
||||
th = _this8.getThDome(targetEvent);
|
||||
th = _this7.getThDome(targetEvent);
|
||||
}
|
||||
// console.log(" getTargetToTh: ", th);
|
||||
return th;
|
||||
};
|
||||
|
||||
this.onTrMouseMove = function (e) {
|
||||
if (!_this8.props.dragborder && !_this8.props.draggable) return;
|
||||
var _props4 = _this8.props,
|
||||
if (!_this7.props.dragborder && !_this7.props.draggable) return;
|
||||
var _props4 = _this7.props,
|
||||
clsPrefix = _props4.clsPrefix,
|
||||
dragborder = _props4.dragborder,
|
||||
contentDomWidth = _props4.contentDomWidth,
|
||||
|
|
@ -677,97 +730,176 @@ var _initialiseProps = function _initialiseProps() {
|
|||
|
||||
!eventNoStop && _utils.Event.stopPropagation(e);
|
||||
var event = _utils.Event.getEvent(e);
|
||||
if (_this8.props.dragborder && _this8.drag.option == "border") {
|
||||
if (_this7.props.dragborder && _this7.drag.option == "border") {
|
||||
//移动改变宽度
|
||||
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");
|
||||
}
|
||||
});
|
||||
var isMoveToRight = _this7.drag.currentLeft < event.clientX;
|
||||
if (_this7.drag.fixedType === 'left' && isMoveToRight && _this7.drag.fixedRightBodyTableLeft) {
|
||||
if (_this7.drag.fixedRightBodyTableLeft - event.clientX < 100) {
|
||||
return; // 拖动左侧固定列，离右侧固定列距离小于100时，禁止拖动
|
||||
}
|
||||
}
|
||||
var currentCols = _this7.table.cols[_this7.drag.currIndex];
|
||||
var diff = event.clientX - _this7.drag.oldLeft;
|
||||
var newWidth = _this7.drag.oldWidth + diff;
|
||||
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
|
||||
_this7.drag.currentLeft = event.clientX;
|
||||
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
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 = _this8.lastColumWidth + newDiff;
|
||||
_this8.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this8.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this8.drag.tableWidth + diff) - scrollbarWidth;
|
||||
//表头滚动条处理
|
||||
if (headerScroll) {
|
||||
if (showScroll < 0) {
|
||||
//小于 0 出现滚动条
|
||||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
_this8.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, scrollbarWidth);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, scrollbarWidth);
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this8.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
|
||||
// displayinrow 判断、 固定行高判断
|
||||
if (!bodyDisplayInRow) {
|
||||
_this7.table.bodyRows.forEach(function (row, index) {
|
||||
var leftRow = _this7.table.fixedLeftBodyRows[index];
|
||||
var rightRow = _this7.table.fixedRightBodyRows[index];
|
||||
if (leftRow || rightRow) {
|
||||
var height = row.getBoundingClientRect().height;
|
||||
leftRow && (leftRow.style.height = height + "px");
|
||||
rightRow && (rightRow.style.height = height + "px");
|
||||
}
|
||||
} else {
|
||||
if (showScroll < 0) {
|
||||
_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' });
|
||||
});
|
||||
}
|
||||
|
||||
if (newWidth > _this7.minWidth) {
|
||||
currentCols.style.width = newWidth + 'px';
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if (_this7.fixedTable.cols) {
|
||||
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
var contentTableSWidth = _this7.drag.contentTableSWidth - _this7.drag.contentTableCWidth;
|
||||
// console.log('contentTableSWidth+diff',contentTableSWidth+diff,'diff',diff);
|
||||
if (diff < 0 && contentTableSWidth + diff < 0) {
|
||||
var headerCols = _this7.table.tableHeaderCols || _this7.table.cols;
|
||||
var lastWidth = _this7.lastColumWidth - (contentTableSWidth + diff);
|
||||
// console.log('lastWidth',lastWidth,'lastShowIndex',lastShowIndex);
|
||||
headerCols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
|
||||
_this7.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
|
||||
}
|
||||
// 内容区非固定列场景拖拽
|
||||
if (!_this7.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";//同步表体
|
||||
|
||||
// }
|
||||
|
||||
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this7.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.fixedRightHeaderTable, scrollbarWidth);
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this7.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRightHeaderTable, 0);
|
||||
}
|
||||
} else {
|
||||
_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' });
|
||||
var scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
|
||||
if (showScroll < 0) {
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null;
|
||||
_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' });
|
||||
} else {
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null;
|
||||
_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' });
|
||||
}
|
||||
}
|
||||
} else if (_this7.drag.fixedType) {
|
||||
if (_this7.table.ths[_this7.drag.currIndex]) {
|
||||
_this7.table.ths[_this7.drag.currIndex].width = newWidth;
|
||||
}
|
||||
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
|
||||
// debugger
|
||||
_this7.syncFixedBodyTableWidth(); // 同步body中table的宽度
|
||||
var contentTablePar = _this7.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 (_this7.drag.fixedType == 'left') {
|
||||
contentTablePar.style.marginLeft = _this7.drag.contentTableML + diff + 'px';
|
||||
} else {
|
||||
contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
|
||||
}
|
||||
var containerWidth = contentTablePar.getBoundingClientRect().width;
|
||||
var tableWidth = _this7.table.innerTableBody.getBoundingClientRect().width;
|
||||
var _scrollContainers = _this7.table.tableBody.querySelectorAll('.scroll-container') || [];
|
||||
if (tableWidth > containerWidth) {
|
||||
_scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'auto' : null;
|
||||
_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' });
|
||||
} else {
|
||||
_scrollContainers[0] ? _scrollContainers[0].style.overflowX = 'hidden' : null;
|
||||
_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' });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_this8.drag.newWidth = _this8.minWidth;
|
||||
_this7.drag.newWidth = _this7.minWidth;
|
||||
}
|
||||
}
|
||||
// 增加拖拽列宽动作的回调函数
|
||||
_this8.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this8.drag.newWidth);
|
||||
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
|
||||
};
|
||||
|
||||
this.syncFixedBodyTableWidth = function () {
|
||||
var _table = _this7.table,
|
||||
fixedLeftHeaderTableBody = _table.fixedLeftHeaderTableBody,
|
||||
fixedLeftInnerTableBody = _table.fixedLeftInnerTableBody,
|
||||
fixedRightHeaderTableBody = _table.fixedRightHeaderTableBody,
|
||||
fixedRightInnerTableBody = _table.fixedRightInnerTableBody;
|
||||
|
||||
if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
|
||||
fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px';
|
||||
}
|
||||
if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
|
||||
fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
this.onTrMouseUp = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
var width = _this8.drag.newWidth;
|
||||
var opt = _this8.drag.option;
|
||||
_this8.mouseClear();
|
||||
var width = _this7.drag.newWidth;
|
||||
var opt = _this7.drag.option;
|
||||
_this7.mouseClear();
|
||||
if (opt !== "border") return; // fix:点击表头会触发onDropBorder事件的问题
|
||||
_this8.props.onDropBorder && _this8.props.onDropBorder(event, width);
|
||||
_this7.props.onDropBorder && _this7.props.onDropBorder(event, width);
|
||||
};
|
||||
|
||||
this.clearThsDr = function () {
|
||||
var ths = _this8.table.ths;
|
||||
var ths = _this7.table.ths;
|
||||
for (var index = 0; index < ths.length; index++) {
|
||||
ths[index].setAttribute('draggable', false); //去掉交换列效果
|
||||
}
|
||||
};
|
||||
|
||||
this.bodyonLineMouseUp = function (events, type) {
|
||||
if (!_this8.drag || !_this8.drag.option) return;
|
||||
_this8.mouseClear();
|
||||
if (!_this7.drag || !_this7.drag.option) return;
|
||||
_this7.mouseClear();
|
||||
};
|
||||
|
||||
this.optTableMargin = function (table, scrollbarWidth) {
|
||||
|
|
@ -783,38 +915,44 @@ var _initialiseProps = function _initialiseProps() {
|
|||
var innerTable = table.querySelector('.u-table-body-inner');
|
||||
if (innerTable) {
|
||||
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
if (overflow.x) {
|
||||
var fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container');
|
||||
if (fixedScrollContainers && fixedScrollContainers.length) {
|
||||
fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
|
||||
fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
|
||||
}
|
||||
}
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.onDragStart = function (e) {
|
||||
if (!_this8.props.draggable) return;
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
if (!_this7.props.draggable) return;
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
|
||||
// target = Event.getTarget(event);
|
||||
target = _this8.getTargetToTh(_utils.Event.getTarget(event));
|
||||
target = _this7.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 = _this8.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.width = _this7.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this8._table_none_cont_id).appendChild(crt);
|
||||
document.getElementById(_this7._table_none_cont_id).appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt, 0, 0);
|
||||
}
|
||||
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", currentKey);
|
||||
_this8.currentObj = _this8.props.rows[0][currentIndex];
|
||||
_this7.currentObj = _this7.props.rows[0][currentIndex];
|
||||
};
|
||||
|
||||
this.onDragOver = function (e) {
|
||||
|
|
@ -823,34 +961,34 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onDrop = function (e) {
|
||||
if (!_this8.props.draggable) return;
|
||||
var props = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
if (!_this7.props.draggable) return;
|
||||
var props = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
e.column = { props: props };
|
||||
if (_this8.drag && _this8.drag.option != 'dragAble') {
|
||||
_this8.props.onDrop(e);
|
||||
if (_this7.drag && _this7.drag.option != 'dragAble') {
|
||||
_this7.props.onDrop(e);
|
||||
return;
|
||||
}
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this8.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
_this7.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
// let data = this.getCurrentEventData(this._dragCurrent);
|
||||
// if(!data){
|
||||
// this.props.onDrop(e);
|
||||
// return;
|
||||
// }
|
||||
if (!_this8.props.onDrop) return;
|
||||
if (!_this7.props.onDrop) return;
|
||||
// this.props.onDrop(event,target);
|
||||
_this8.props.onDrop(event, { dragSource: _this8.currentObj, dragTarg: e.column });
|
||||
_this7.props.onDrop(event, { dragSource: _this7.currentObj, dragTarg: e.column });
|
||||
};
|
||||
|
||||
this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this8._dragCurrent = target;
|
||||
_this7._dragCurrent = target;
|
||||
var currentIndex = target.getAttribute("data-line-index");
|
||||
if (!currentIndex || parseInt(currentIndex) === _this8.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.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)");
|
||||
|
|
@ -861,24 +999,24 @@ var _initialiseProps = function _initialiseProps() {
|
|||
this.onDragEnd = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this8._dragCurrent.setAttribute("style", "");
|
||||
_this7._dragCurrent.setAttribute("style", "");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// this._dragCurrent.style = "";
|
||||
document.getElementById(_this8._table_none_cont_id).innerHTML = "";
|
||||
document.getElementById(_this7._table_none_cont_id).innerHTML = "";
|
||||
|
||||
var data = _this8.getCurrentEventData(_this8._dragCurrent);
|
||||
var data = _this7.getCurrentEventData(_this7._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this8.currentObj || _this8.currentObj.key == data.key) return;
|
||||
if (!_this8.props.onDragEnd) return;
|
||||
_this8.props.onDragEnd(event, { dragSource: _this8.currentObj, dragTarg: data });
|
||||
if (!_this7.currentObj || _this7.currentObj.key == data.key) return;
|
||||
if (!_this7.props.onDragEnd) return;
|
||||
_this7.props.onDragEnd(event, { dragSource: _this7.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) === _this8.drag.currIndex) return;
|
||||
if (!currentIndex || parseInt(currentIndex) === _this7.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
target.setAttribute("style", "");
|
||||
// this._dragCurrent.style = "";
|
||||
|
|
@ -886,7 +1024,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterChange = function (key, value, condition) {
|
||||
var onFilterChange = _this8.props.onFilterChange;
|
||||
var onFilterChange = _this7.props.onFilterChange;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
|
|
@ -894,7 +1032,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.handlerFilterClear = function (field) {
|
||||
var onFilterClear = _this8.props.onFilterClear;
|
||||
var onFilterClear = _this7.props.onFilterClear;
|
||||
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
|
|
@ -902,7 +1040,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.filterRenderType = function (type, dataIndex, index) {
|
||||
var _props5 = _this8.props,
|
||||
var _props5 = _this7.props,
|
||||
clsPrefix = _props5.clsPrefix,
|
||||
rows = _props5.rows,
|
||||
filterDelay = _props5.filterDelay,
|
||||
|
|
@ -917,8 +1055,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
, clsPrefix: clsPrefix //css前缀
|
||||
, className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -931,8 +1069,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
clsPrefix: clsPrefix,
|
||||
className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this8.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this7.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -966,8 +1104,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
data: selectDataSource,
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
|
|
@ -982,8 +1120,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -997,8 +1135,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1012,8 +1150,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1027,8 +1165,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-Wo",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1042,8 +1180,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this8.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this8.handlerFilterClear //清除回调
|
||||
, onFilterChange: _this7.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this7.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
|
|
@ -1055,8 +1193,8 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
this.onCopy = function (data, index, event) {
|
||||
if (_this8.props.onCopy) {
|
||||
_this8.props.onCopy(_extends(data, { col: index }), event);
|
||||
if (_this7.props.onCopy) {
|
||||
_this7.props.onCopy(_extends(data, { col: index }), event);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -122,6 +122,9 @@ var TableRow = function (_Component) {
|
|||
target = target.parentNode;
|
||||
}
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
// 拖拽其实index
|
||||
_this.props.contentTable.startI = target.getAttribute("data-row-index");
|
||||
_this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
|
|
@ -134,7 +137,9 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
var _this$props = _this.props,
|
||||
onDragRow = _this$props.onDragRow,
|
||||
contentTable = _this$props.contentTable;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
|
|
@ -224,9 +229,9 @@ var TableRow = function (_Component) {
|
|||
};
|
||||
|
||||
_this.synchronizeTableTrShadow = function () {
|
||||
var _this$props = _this.props,
|
||||
contentTable = _this$props.contentTable,
|
||||
index = _this$props.index;
|
||||
var _this$props2 = _this.props,
|
||||
contentTable = _this$props2.contentTable,
|
||||
index = _this$props2.index;
|
||||
|
||||
|
||||
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
|
|
@ -277,21 +282,29 @@ var TableRow = function (_Component) {
|
|||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
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", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
var dragEnterIndex = target.getAttribute("data-row-index");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
var dragType = parseInt(dragEnterIndex) > parseInt(contentTable.startI) ? 'down' : 'top';
|
||||
|
||||
contentTable.dragType = dragType;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
_this.synchronizeTableTr(currentIndex, dragType);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -332,6 +345,15 @@ var TableRow = function (_Component) {
|
|||
_this.element = el;
|
||||
};
|
||||
|
||||
_this.getLoadingStyle = function (isPre, isSuf) {
|
||||
if (isPre) {
|
||||
return _this.element && _this.element.nextSibling ? _this.element.nextSibling.getBoundingClientRect() : {};
|
||||
}
|
||||
if (isSuf) {
|
||||
return _this.element && _this.element.previousSibling ? _this.element.previousSibling.getBoundingClientRect() : {};
|
||||
}
|
||||
};
|
||||
|
||||
_this._timeout = null;
|
||||
_this.state = {
|
||||
hovered: false
|
||||
|
|
@ -570,6 +592,9 @@ var TableRow = function (_Component) {
|
|||
visible = _props10.visible,
|
||||
index = _props10.index,
|
||||
onPaste = _props10.onPaste,
|
||||
isPre = _props10.isPre,
|
||||
isSuf = _props10.isSuf,
|
||||
containerWidth = _props10.containerWidth,
|
||||
expandIconColumnIndex = _props10.expandIconColumnIndex,
|
||||
expandIconAsCell = _props10.expandIconAsCell,
|
||||
expanded = _props10.expanded,
|
||||
|
|
@ -592,6 +617,7 @@ var TableRow = function (_Component) {
|
|||
getCellClassName = _props10.getCellClassName;
|
||||
var notRowDrag = this.state.notRowDrag;
|
||||
|
||||
var isEmptyTr = isPre || isSuf;
|
||||
var showSum = false;
|
||||
var className = this.props.className;
|
||||
|
||||
|
|
@ -667,7 +693,7 @@ var TableRow = function (_Component) {
|
|||
if (rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able';
|
||||
}
|
||||
|
||||
var tdStyle = !isEmptyTr ? {} : this.getLoadingStyle(isPre, isSuf);
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
|
|
@ -678,11 +704,13 @@ var TableRow = function (_Component) {
|
|||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : hoverKey
|
||||
'data-row-key': record && record.key ? record.key : hoverKey,
|
||||
'data-row-index': this.props.index
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
},
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
cells.length > 0 ? cells : isEmptyTr ? // loading暂时去掉
|
||||
_react2["default"].createElement('td', { style: { width: 0, padding: 0 } }) : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -321,6 +321,8 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
BigData.prototype.render = function render() {
|
||||
var _this4 = this;
|
||||
|
||||
var data = this.props.data;
|
||||
var scrollTop = this.scrollTop;
|
||||
var endIndex = this.endIndex,
|
||||
|
|
@ -356,6 +358,9 @@ function bigData(Table) {
|
|||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: dataSource,
|
||||
lazyLoad: lazyLoad,
|
||||
ref: function ref(el) {
|
||||
return _this4.table = el;
|
||||
},
|
||||
handleScrollY: this.handleScrollY,
|
||||
scrollTop: scrollTop,
|
||||
setRowHeight: this.setRowHeight,
|
||||
|
|
@ -380,28 +385,28 @@ function bigData(Table) {
|
|||
}, _class.propTypes = {
|
||||
loadBuffer: _propTypes2["default"].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
var _this5 = this;
|
||||
|
||||
this.getTreeData = function (expandedKeys, newData) {
|
||||
var startIndex = _this4.startIndex,
|
||||
endIndex = _this4.endIndex;
|
||||
var startIndex = _this5.startIndex,
|
||||
endIndex = _this5.endIndex;
|
||||
|
||||
var data = newData ? newData : _this4.props.data;
|
||||
_this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
|
||||
var data = newData ? newData : _this5.props.data;
|
||||
_this5.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
|
||||
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
|
||||
var sliceTreeList = [];
|
||||
var flatTreeData = _this4.deepTraversal(data);
|
||||
_this4.flatTreeData = flatTreeData;
|
||||
var flatTreeData = _this5.deepTraversal(data);
|
||||
_this5.flatTreeData = flatTreeData;
|
||||
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
|
||||
_this4.handleTreeListChange(sliceTreeList);
|
||||
_this5.handleTreeListChange(sliceTreeList);
|
||||
|
||||
_this4.cacheExpandedKeys = expandedKeys && null;
|
||||
_this5.cacheExpandedKeys = expandedKeys && null;
|
||||
};
|
||||
|
||||
this.deepTraversal = function (treeData) {
|
||||
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var cacheExpandedKeys = _this.cacheExpandedKeys,
|
||||
_this$expandedRowKeys = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys === undefined ? [] : _this$expandedRowKeys,
|
||||
|
|
@ -415,7 +420,7 @@ function bigData(Table) {
|
|||
var _dataCopy$i = dataCopy[i],
|
||||
children = _dataCopy$i.children,
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["children"]),
|
||||
key = _this4.getRowKey(dataCopy[i], i),
|
||||
key = _this5.getRowKey(dataCopy[i], i),
|
||||
dataCopyI = new Object(),
|
||||
_isLeaf = children && children.length > 0 ? false : true,
|
||||
isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
||||
|
|
@ -433,7 +438,7 @@ function bigData(Table) {
|
|||
|
||||
// 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
|
||||
if (Array.isArray(children) && children.length > 0 && isExpanded) {
|
||||
flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
|
||||
flatTreeData = flatTreeData.concat(_this5.deepTraversal(children, key));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -448,28 +453,28 @@ function bigData(Table) {
|
|||
rootId: null,
|
||||
_isLeaf: '_isLeaf'
|
||||
};
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this4.flatTreeKeysMap);
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this5.flatTreeKeysMap);
|
||||
|
||||
_this4.startIndex = typeof startIndex !== "undefined" ? startIndex : _this4.startIndex;
|
||||
_this4.endIndex = typeof endIndex !== "undefined" ? endIndex : _this4.endIndex;
|
||||
_this5.startIndex = typeof startIndex !== "undefined" ? startIndex : _this5.startIndex;
|
||||
_this5.endIndex = typeof endIndex !== "undefined" ? endIndex : _this5.endIndex;
|
||||
|
||||
_this4.treeData = treeData;
|
||||
_this5.treeData = treeData;
|
||||
};
|
||||
|
||||
this.computeCachedRowParentIndex = function (data) {
|
||||
var isTree = _this4.props.isTree;
|
||||
var isTree = _this5.props.isTree;
|
||||
|
||||
var isTreeType = isTree ? true : _this4.checkIsTreeType();
|
||||
var isTreeType = isTree ? true : _this5.checkIsTreeType();
|
||||
treeTypeIndex = 0;
|
||||
if (isTreeType) {
|
||||
data.forEach(function (item, index) {
|
||||
_this4.firstLevelKey[index] = _this4.getRowKey(item, index);
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
_this5.firstLevelKey[index] = _this5.getRowKey(item, index);
|
||||
_this5.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
|
||||
_this5.keys[treeTypeIndex] = _this5.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this4.getData(item.children, index);
|
||||
_this5.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -480,7 +485,7 @@ function bigData(Table) {
|
|||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var _this$props = _this.props,
|
||||
data = _this$props.data,
|
||||
height = _this$props.height,
|
||||
|
|
@ -506,13 +511,13 @@ function bigData(Table) {
|
|||
var temp = nextScrollTop;
|
||||
var currentKey = void 0;
|
||||
while (temp > 0) {
|
||||
var currentRowHeight = _this4.cachedRowHeight[index];
|
||||
var currentRowHeight = _this5.cachedRowHeight[index];
|
||||
if (currentRowHeight === undefined) {
|
||||
if (_this4.treeType) {
|
||||
if (_this5.treeType) {
|
||||
// currentKey = this.keys[index];
|
||||
currentKey = _this4.flatTreeData[index].key;
|
||||
currentKey = _this5.flatTreeData[index].key;
|
||||
currentRowHeight = 0;
|
||||
if (_this4.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
if (_this5.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -537,9 +542,9 @@ function bigData(Table) {
|
|||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
|
||||
if (_this4.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this4.cachedRowHeight[tempIndex];
|
||||
while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
|
||||
if (_this5.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this5.cachedRowHeight[tempIndex];
|
||||
// if (
|
||||
// (treeType &&
|
||||
// _this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
|
||||
|
|
@ -569,13 +574,13 @@ function bigData(Table) {
|
|||
if (treeType && endIndex > flatTreeData.length || !treeType && endIndex > data.length) {
|
||||
endIndex = treeType ? flatTreeData.length : data.length;
|
||||
}
|
||||
if (endIndex > _this4.endIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = endIndex;
|
||||
if (endIndex > _this5.endIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = endIndex;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
|
||||
_this5.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
}
|
||||
|
|
@ -585,13 +590,13 @@ function bigData(Table) {
|
|||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startIndex < _this4.startIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = _this4.startIndex + loadCount;
|
||||
if (startIndex < _this5.startIndex) {
|
||||
_this5.startIndex = startIndex;
|
||||
_this5.endIndex = _this5.startIndex + loadCount;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, _this4.endIndex), startIndex, _this4.endIndex);
|
||||
_this5.handleTreeListChange(flatTreeData.slice(startIndex, _this5.endIndex), startIndex, _this5.endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
// console.log(
|
||||
|
|
@ -605,7 +610,7 @@ function bigData(Table) {
|
|||
};
|
||||
|
||||
this.onExpand = function (expandState, record, index) {
|
||||
var _this = _this4;
|
||||
var _this = _this5;
|
||||
var _this$expandedRowKeys2 = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys2 === undefined ? [] : _this$expandedRowKeys2;
|
||||
var needRender = _this.state.needRender;
|
||||
|
|
@ -632,7 +637,7 @@ function bigData(Table) {
|
|||
if (!_this.props.expandedRowKeys) {
|
||||
if (expandState) {
|
||||
expandedRowKeys.push(rowKey);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
} else {
|
||||
var _index = -1;
|
||||
expandedRowKeys.forEach(function (r, i) {
|
||||
|
|
@ -642,7 +647,7 @@ function bigData(Table) {
|
|||
});
|
||||
if (_index !== -1) {
|
||||
expandedRowKeys.splice(_index, 1);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
_this5.setState({ needRender: !needRender });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -650,7 +655,7 @@ function bigData(Table) {
|
|||
// expandState为true时，记录下
|
||||
_this.props.onExpand(expandState, record);
|
||||
|
||||
if (_this4.treeType) {
|
||||
if (_this5.treeType) {
|
||||
//收起和展开时，缓存 expandedKeys
|
||||
_this.cacheExpandedKeys = new Set(expandedRowKeys);
|
||||
//重新递归数据
|
||||
|
|
|
|||
|
|
@ -126,6 +126,8 @@ function dragColumn(Table) {
|
|||
});
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
|
|
@ -136,6 +138,9 @@ function dragColumn(Table) {
|
|||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
ref: function ref(el) {
|
||||
return _this2.table = el;
|
||||
},
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragEnd: this.onDragEnd,
|
||||
draggable: draggable,
|
||||
|
|
|
|||
|
|
@ -228,8 +228,13 @@ function sort(Table, Icon) {
|
|||
|
||||
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var currentCol = orderCols[currentIndex];
|
||||
var getMultiSorterValueFunc = currentCol.getMultiSorterValue;
|
||||
var preKey = pre[currentCol.key];
|
||||
var afterKey = after[currentCol.key];
|
||||
if (getMultiSorterValueFunc) {
|
||||
preKey = getMultiSorterValueFunc(pre, currentCol);
|
||||
afterKey = getMultiSorterValueFunc(after, currentCol);
|
||||
}
|
||||
var colSortFun = currentCol.sorter;
|
||||
if (typeof colSortFun !== 'function') {
|
||||
colSortFun = function colSortFun() {
|
||||
|
|
@ -281,7 +286,7 @@ function sort(Table, Icon) {
|
|||
var sort = _this3.props.sort;
|
||||
|
||||
var seleObj = void 0;
|
||||
if (!oldData) {
|
||||
if (!oldData.length) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
var sortCol = void 0;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ exports.Event = exports.EventUtil = exports.tryParseInt = undefined;
|
|||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports.measureScrollbar = measureScrollbar;
|
||||
exports.myBrowser = myBrowser;
|
||||
exports.debounce = debounce;
|
||||
exports.warningOnce = warningOnce;
|
||||
exports.getOffset = getOffset;
|
||||
|
|
@ -75,6 +76,30 @@ function measureScrollbar() {
|
|||
return scrollbarSize;
|
||||
}
|
||||
|
||||
function myBrowser() {
|
||||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||||
var isOpera = userAgent.indexOf("Opera") > -1;
|
||||
if (isOpera) {
|
||||
//判断是否Opera浏览器
|
||||
return "Opera";
|
||||
}
|
||||
if (userAgent.indexOf("Firefox") > -1) {
|
||||
//判断是否Firefox浏览器
|
||||
return "FF";
|
||||
}
|
||||
if (userAgent.indexOf("Chrome") > -1) {
|
||||
return "Chrome";
|
||||
}
|
||||
if (userAgent.indexOf("Safari") > -1) {
|
||||
//判断是否Safari浏览器
|
||||
return "Safari";
|
||||
}
|
||||
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
|
||||
//判断是否IE浏览器
|
||||
return "IE";
|
||||
}
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const columns = [
|
|||
{
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
fixed: 'right',
|
||||
key: "d",
|
||||
width: 500,
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -452,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; }
|
||||
|
|
@ -894,6 +894,20 @@
|
|||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
display: block !important; }
|
||||
.loading-td.pre-td {
|
||||
bottom: 0; }
|
||||
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
border: none !important; }
|
||||
.loading-div.pre {
|
||||
bottom: 0; }
|
||||
.loading-div.suf {
|
||||
top: 0; }
|
||||
|
||||
.selected {
|
||||
background: #FFF7E7; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -76,6 +76,7 @@ import 'bee-table/build/Table.css';
|
|||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
| hoverContent | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function|
|
||||
| heightConsistent | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false
|
||||
| syncFixedRowHeight | 当bodyDisplayInRow为false的时候，同步固定列的高度 | bool | - |
|
||||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool | true |
|
||||
|
|
|
|||
|
|
@ -20,8 +20,5 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.3.14",
|
||||
"version": "2.3.15-beta.25",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -95,6 +95,7 @@
|
|||
"ref-tree": "2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest",
|
||||
"husky": "^4.2.5"
|
||||
"husky": "^4.2.5",
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
142
src/Table.js
142
src/Table.js
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||
import classes from 'component-classes';
|
||||
import TableRow from './TableRow';
|
||||
import TableHeader from './TableHeader';
|
||||
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './lib/utils';
|
||||
import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength } from './lib/utils';
|
||||
import shallowequal from 'shallowequal';
|
||||
import addEventListener from 'tinper-bee-core/lib/addEventListener';
|
||||
import ColumnManager from './ColumnManager';
|
||||
|
|
@ -13,6 +13,7 @@ import Icon from 'bee-icon';
|
|||
import { Event,EventUtil,closest} from "./lib/utils";
|
||||
import i18n from "./lib/i18n";
|
||||
import { getComponentLocale } from "bee-locale/build/tool";
|
||||
import ResizeObserver from 'resize-observer-polyfill';
|
||||
|
||||
const propTypes = {
|
||||
data: PropTypes.array,
|
||||
|
|
@ -103,6 +104,7 @@ const defaultProps = {
|
|||
setRowParentIndex:()=>{},
|
||||
tabIndex:'0',
|
||||
heightConsistent:false,
|
||||
syncFixedRowHeight: false,
|
||||
size: 'md',
|
||||
rowDraggAble:false,
|
||||
hideDragHandle:false,
|
||||
|
|
@ -164,6 +166,7 @@ class Table extends Component {
|
|||
this.getFooter = this.getFooter.bind(this);
|
||||
this.getEmptyText = this.getEmptyText.bind(this);
|
||||
this.getHeaderRowStyle = this.getHeaderRowStyle.bind(this);
|
||||
this.manualSyncFixedTableRowHeight = this.manualSyncFixedTableRowHeight.bind(this)
|
||||
this.syncFixedTableRowHeight = this.syncFixedTableRowHeight.bind(this);
|
||||
this.resetScrollX = this.resetScrollX.bind(this);
|
||||
this.findExpandedRow = this.findExpandedRow.bind(this);
|
||||
|
|
@ -178,6 +181,7 @@ class Table extends Component {
|
|||
this.leftColumnsLength //左侧固定列的长度
|
||||
this.centerColumnsLength //非固定列的长度
|
||||
this.columnsChildrenList = [];//复杂表头、所有叶子节点
|
||||
this.dataChanged = false; // 数据是否改变
|
||||
}
|
||||
componentWillMount() {
|
||||
this.centerColumnsLength = this.columnManager.centerColumns().length
|
||||
|
|
@ -199,9 +203,14 @@ class Table extends Component {
|
|||
}
|
||||
if (this.columnManager.isAnyColumnsFixed()) {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.resizeEvent = addEventListener(
|
||||
window, 'resize', this.resize
|
||||
);
|
||||
|
||||
const targetNode = this.contentTable
|
||||
if (targetNode) {
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.resize()
|
||||
});
|
||||
this.resizeObserver.observe(targetNode)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -275,16 +284,52 @@ class Table extends Component {
|
|||
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 if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY) {
|
||||
if (prevScrollY !== currentScrollY) {
|
||||
const bodyScrollTop = this.bodyTable.scrollTop
|
||||
if (bodyScrollTop === 0) { // 在顶部的时候，滚动条不用动
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
const distance = bodyScrollTop + currentScrollY - prevScrollY;
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
const { scrollHeight, scrollTop } = this.bodyTable
|
||||
const bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY) // 在最底部的时候也不用滚动滚动条
|
||||
if (bottomDistance < 5) { // 有些dom计算不是十分精确，设置一个值来缓冲一下
|
||||
this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance
|
||||
this.bodyTable.scrollTop += 1
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
if (this.bodyTable) {
|
||||
const currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX;
|
||||
if (!this.props.scroll.x && currentOverflowX === 'scroll') {
|
||||
this.bodyTable.style.overflowX = 'hidden';
|
||||
}
|
||||
if (this.props.scroll.x && currentOverflowX !== 'scroll') {
|
||||
// 此处应该对比一下实际的
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
this.bodyTable.style.overflowX = 'scroll';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条
|
||||
this.bodyTableOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
if (this.fixedColumnsBodyLeftOuter) {
|
||||
this.fixedColumnsBodyLeftOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
if (this.fixedColumnsBodyRightOuter) {
|
||||
this.fixedColumnsBodyRightOuter.style.overflowY = 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -292,8 +337,8 @@ class Table extends Component {
|
|||
this.contentTable = null;
|
||||
EventUtil.removeHandler(this.contentTable,'keydown',this.onKeyDown);
|
||||
EventUtil.removeHandler(this.contentTable,'focus',this.onFocus);
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -746,7 +791,7 @@ class Table extends Component {
|
|||
const expandIconColumnIndex = props.expandIconColumnIndex
|
||||
if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.preHeight} columns={[]} className='' key={'table_row_first'} store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} containerWidth={this.contentDomWidth} isPre 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;
|
||||
|
|
@ -757,7 +802,7 @@ 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'];
|
||||
typeof record['isleaf'] === 'boolean' && (record['_isLeaf'] = record['isleaf']);
|
||||
// _isLeaf 字段是在 bigData 里添加的，只有层级树大数据场景需要该字段
|
||||
// _isLeaf 有三种取值情况：true / false / null。（Table内部字段）
|
||||
const _isLeaf = typeof record['_isLeaf'] === 'boolean' ? record['_isLeaf'] : null;
|
||||
|
|
@ -889,7 +934,7 @@ class Table extends Component {
|
|||
|
||||
if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
|
||||
rst.push(
|
||||
<TableRow onPaste={onPaste} height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
<TableRow onPaste={onPaste} containerWidth={this.contentDomWidth} isSuf height={props.lazyLoad.sufHeight} key={'table_row_end'} columns={[]} className='' store={this.store} visible = {true}/>
|
||||
)
|
||||
}
|
||||
if (!this.isTreeType) {
|
||||
|
|
@ -995,7 +1040,7 @@ class Table extends Component {
|
|||
if(this.props.data.length == 0 && this.props.headerScroll ){
|
||||
bodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
if (!footerScroll) {
|
||||
if (!footerScroll && this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
}
|
||||
}
|
||||
|
|
@ -1007,6 +1052,11 @@ class Table extends Component {
|
|||
// bodyStyle.height = bodyStyle.height || scroll.y;
|
||||
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'scroll';
|
||||
} else if (this.contentWidth === this.contentDomWidth) {
|
||||
innerBodyStyle.overflowX = 'hidden';
|
||||
}
|
||||
} else {
|
||||
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
}
|
||||
|
|
@ -1040,7 +1090,15 @@ class Table extends Component {
|
|||
headStyle.overflow = 'hidden';
|
||||
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
|
||||
}else{
|
||||
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
|
||||
if (this.computeWidth > this.contentDomWidth) {
|
||||
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
|
||||
let userAgent = navigator.userAgent; // 火狐浏览器，固定表格跟随resize事件产生的滚动条隐藏
|
||||
let isFF = userAgent.indexOf("Firefox") > -1;
|
||||
if (isFF) {
|
||||
// innerBodyStyle.overflowX = 'hidden';
|
||||
delete innerBodyStyle.overflowX
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
|
|
@ -1076,6 +1134,9 @@ class Table extends Component {
|
|||
if ( !fixed && this.contentDomWidth < this.contentWidth) {
|
||||
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
}
|
||||
if (this.bodyTable && !fixed && this.contentDomWidth === this.contentWidth) {
|
||||
tableStyle.width = this.bodyTable.clientWidth
|
||||
}
|
||||
const tableBody = hasBody ? getBodyWrapper(
|
||||
<tbody className={`${clsPrefix}-tbody`} onMouseLeave={this.onBodyMouseLeave}>
|
||||
{this.getRows(columns, fixed)}
|
||||
|
|
@ -1093,7 +1154,6 @@ class Table extends Component {
|
|||
};
|
||||
|
||||
let headTable;
|
||||
|
||||
if (useFixedHeader) {
|
||||
headTable = (
|
||||
<div
|
||||
|
|
@ -1112,14 +1172,15 @@ class Table extends Component {
|
|||
<div
|
||||
className={`${clsPrefix}-body`}
|
||||
style={bodyStyle}
|
||||
ref={(el)=>{this.bodyTable = el}}
|
||||
onMouseOver={this.detectScrollTarget}
|
||||
onTouchStart={this.detectScrollTarget}
|
||||
onScroll={this.handleBodyScroll}
|
||||
ref={(el)=>{this.bodyTableOuter = el}}
|
||||
onMouseLeave={this.onBodyMouseLeave}
|
||||
>
|
||||
{this.renderDragHideTable()}
|
||||
{renderTable(!useFixedHeader)}
|
||||
<div className="scroll-container" onScroll={this.handleBodyScroll} ref={(el)=>{this.bodyTable = el}} style={{...bodyStyle}}>
|
||||
{renderTable(!useFixedHeader)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -1140,13 +1201,13 @@ class Table extends Component {
|
|||
<div
|
||||
style={{...innerBodyStyle}}
|
||||
className={`${clsPrefix}-body-inner`}
|
||||
ref={refName}
|
||||
ref={el => this[`${refName}Outer`] = el}
|
||||
onMouseOver={this.detectScrollTarget}
|
||||
onTouchStart={this.detectScrollTarget}
|
||||
onScroll={this.handleBodyScroll}
|
||||
>
|
||||
{renderTable(!useFixedHeader)}
|
||||
{/* <div className="scroll-dom" style={{height:`${this.scrollbarWidth}px`}}></div> */}
|
||||
<div className="fixed-scroll-container" ref={refName} style={{...innerBodyStyle}} onScroll={this.handleBodyScroll}>
|
||||
{renderTable(!useFixedHeader)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1218,16 +1279,33 @@ class Table extends Component {
|
|||
|
||||
}
|
||||
|
||||
getFlatRecords = data => {
|
||||
var result = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
result.push(data[i])
|
||||
if ((data[i].children || []).length) {
|
||||
result = result.concat(this.getFlatRecords(data[i].children))
|
||||
}
|
||||
}
|
||||
return result
|
||||
};
|
||||
|
||||
manualSyncFixedTableRowHeight() {
|
||||
this.dataChanged = true
|
||||
this.syncFixedTableRowHeight()
|
||||
}
|
||||
|
||||
syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow } = this.props;
|
||||
const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow, lazyLoad, syncFixedRowHeight } = this.props;
|
||||
const headRows = this.headTable ?
|
||||
this.headTable.querySelectorAll('thead') :
|
||||
this.bodyTable.querySelectorAll('thead');
|
||||
const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
|
||||
const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
const rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
|
||||
this.dataChanged = false
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(
|
||||
headRows, row =>{
|
||||
let height = headerHeight;
|
||||
|
|
@ -1236,15 +1314,23 @@ class Table extends Component {
|
|||
}
|
||||
return headerHeight ? height : (parseInt(row.getBoundingClientRect().height) || 'auto')}
|
||||
);
|
||||
const flatRecords = this.getFlatRecords(this.props.data || [])
|
||||
const fixedColumnsBodyRowsHeight = [].map.call(
|
||||
bodyRows, (row,index) =>{
|
||||
let rsHeight = height;
|
||||
if(bodyDisplayInRow && rsHeight){
|
||||
return rsHeight;
|
||||
}else{
|
||||
const rowKey = row.getAttribute('data-row-key')
|
||||
const record = flatRecords.find(record => record.key === rowKey) || {}
|
||||
const leafKey = 'isleaf' in record ? 'isleaf' : '_isLeaf' in record ? '_isLeaf' : null // ncc传递这俩属性区分是否是子节点
|
||||
const isLeaf = leafKey && record[leafKey] === true
|
||||
if (isLeaf) {
|
||||
return Number((Number(row.getBoundingClientRect().height)).toFixed(2)) || 'auto';
|
||||
}
|
||||
// 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置
|
||||
// 内容折行显示，并又设置了 height 的情况下，也要获取主表高度
|
||||
if(heightConsistent || (!bodyDisplayInRow && rsHeight)){
|
||||
if(heightConsistent || (!bodyDisplayInRow && rsHeight && syncFixedRowHeight)){
|
||||
let leftHeight,rightHeight,currentHeight,maxHeight;
|
||||
leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理
|
||||
rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0;
|
||||
|
|
|
|||
|
|
@ -1139,3 +1139,22 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-td {
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
|
||||
&.pre-td {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.loading-div {
|
||||
position: absolute;
|
||||
border: none !important;
|
||||
&.pre {
|
||||
bottom: 0;
|
||||
}
|
||||
&.suf {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ class TableHeader extends Component {
|
|||
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.fixedRightHeaderTable = 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) {
|
||||
|
|
@ -121,6 +121,10 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
table.innerTableBody= contentTable.querySelector('.u-table-scroll .u-table-body table');
|
||||
table.fixedLeftHeaderTableBody = table.fixedLeftHeaderTable && table.fixedLeftHeaderTable.querySelector('table') || null;
|
||||
table.fixedRightHeaderTableBody = table.fixedRightHeaderTable && table.fixedRightHeaderTable.querySelector('table') || null;
|
||||
table.fixedLeftInnerTableBody = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelector('table') || null;
|
||||
table.fixedRightInnerTableBody = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelector('table') || null;
|
||||
table.fixedLeftBodyRows = table.fixedLeftBodyTable && table.fixedLeftBodyTable.querySelectorAll('tr') || [];
|
||||
table.fixedRightBodyRows = table.fixedRightBodyTable && table.fixedRightBodyTable.querySelectorAll('tr') || [];
|
||||
}
|
||||
|
|
@ -171,8 +175,10 @@ class TableHeader extends Component {
|
|||
|
||||
|
||||
doEventList(trs,action){
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
if (trs && HTMLCollection.prototype.isPrototypeOf(trs) && action) {
|
||||
for (let index = 0; index < trs.length; index++) {
|
||||
action(trs[index]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -204,9 +210,11 @@ class TableHeader extends Component {
|
|||
{key:'mousemove', fun:this.onTrMouseMove},
|
||||
];
|
||||
// this.eventListen(events,'remove',this.table.tr[0]);
|
||||
this.doEventList(this.table.tr,(tr)=>{
|
||||
this.eventListen(events,'remove',this.table.tr);
|
||||
})
|
||||
if(this.table && this.table.tr){
|
||||
this.doEventList(this.table.tr,(tr)=>{
|
||||
this.eventListen(events,'remove',this.table.tr);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
eventListen(events,type,eventSource){
|
||||
|
|
@ -279,6 +287,7 @@ class TableHeader extends Component {
|
|||
let currentObj = this.table.cols[currentIndex];
|
||||
this.drag.currIndex = currentIndex;
|
||||
this.drag.oldLeft = event.clientX;
|
||||
this.drag.currentLeft = 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);
|
||||
|
|
@ -305,6 +314,11 @@ class TableHeader extends Component {
|
|||
}
|
||||
}
|
||||
this.drag.fixedType = fixedType;
|
||||
if (fixedType === 'left' && this.table.fixedRightBodyTable) {
|
||||
this.drag.fixedRightBodyTableLeft = this.table.fixedRightBodyTable.getBoundingClientRect().left
|
||||
} else {
|
||||
this.drag.fixedRightBodyTableLeft = null
|
||||
}
|
||||
}else if(type != 'online' && this.props.draggable){
|
||||
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
if (!this.props.draggable) return;
|
||||
|
|
@ -365,26 +379,34 @@ class TableHeader extends Component {
|
|||
let event = Event.getEvent(e);
|
||||
if(this.props.dragborder && this.drag.option == "border"){
|
||||
//移动改变宽度
|
||||
|
||||
const isMoveToRight = this.drag.currentLeft < event.clientX
|
||||
if (this.drag.fixedType === 'left' && isMoveToRight && this.drag.fixedRightBodyTableLeft) {
|
||||
if (this.drag.fixedRightBodyTableLeft - event.clientX < 100) {
|
||||
return // 拖动左侧固定列，离右侧固定列距离小于100时，禁止拖动
|
||||
}
|
||||
}
|
||||
let currentCols = this.table.cols[this.drag.currIndex];
|
||||
let diff = (event.clientX - this.drag.oldLeft);
|
||||
let newWidth = this.drag.oldWidth + diff;
|
||||
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
|
||||
this.drag.currentLeft = event.clientX;
|
||||
|
||||
// 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")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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";
|
||||
|
|
@ -418,21 +440,22 @@ class TableHeader extends Component {
|
|||
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
|
||||
this.table.contentTableHeader.style.overflowX = 'scroll';
|
||||
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
|
||||
this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
|
||||
this.optTableMargin( this.table.fixedRightHeaderTable,scrollbarWidth);
|
||||
}else{ //大于 0 不显示滚动条
|
||||
this.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
|
||||
this.optTableMargin( this.table.fixedRighHeadertTable,0);
|
||||
this.optTableMargin( this.table.fixedRightHeaderTable,0);
|
||||
}
|
||||
}else{
|
||||
const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
|
||||
if(showScroll < 0){
|
||||
this.table.tableBody.style.overflowX = 'auto';
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
|
||||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
|
||||
}else{
|
||||
this.table.tableBody.style.overflowX = 'hidden';
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,0);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,0);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
|
||||
|
|
@ -445,7 +468,7 @@ class TableHeader extends Component {
|
|||
}
|
||||
// console.log('this.drag.contentTableML',this.drag.contentTableML,'diff',diff);
|
||||
// debugger
|
||||
|
||||
this.syncFixedBodyTableWidth() // 同步body中table的宽度
|
||||
const contentTablePar = this.table.contentTableHeader.parentNode;
|
||||
// left、right缩小的内容，在没有滚动条时，需要将宽度同步到到最后一列
|
||||
// diff<0 往里拖，
|
||||
|
|
@ -460,12 +483,25 @@ class TableHeader extends Component {
|
|||
// }
|
||||
if(this.drag.fixedType == 'left') {
|
||||
contentTablePar.style.marginLeft = this.drag.contentTableML + diff + 'px'
|
||||
|
||||
}else {
|
||||
contentTablePar.style.marginRight = this.drag.contentTableMR + diff + 'px'
|
||||
}
|
||||
|
||||
|
||||
const containerWidth = contentTablePar.getBoundingClientRect().width
|
||||
const tableWidth = this.table.innerTableBody.getBoundingClientRect().width
|
||||
const scrollContainers = this.table.tableBody.querySelectorAll('.scroll-container') || []
|
||||
if (tableWidth > containerWidth) {
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'auto' : null
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'scroll'});
|
||||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'scroll'});
|
||||
} else {
|
||||
scrollContainers[0] ? scrollContainers[0].style.overflowX = 'hidden' : null
|
||||
this.optTableMargin( this.table.fixedLeftBodyTable,0);
|
||||
this.optTableMargin( this.table.fixedRightBodyTable,0);
|
||||
this.optTableScroll( this.table.fixedLeftBodyTable,{x:'auto'});
|
||||
this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
|
||||
}
|
||||
}
|
||||
|
||||
}else {
|
||||
|
|
@ -476,6 +512,16 @@ class TableHeader extends Component {
|
|||
this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);
|
||||
}
|
||||
|
||||
syncFixedBodyTableWidth = () => {
|
||||
let { fixedLeftHeaderTableBody, fixedLeftInnerTableBody, fixedRightHeaderTableBody, fixedRightInnerTableBody } = this.table
|
||||
if (fixedLeftHeaderTableBody && fixedLeftInnerTableBody) {
|
||||
fixedLeftInnerTableBody.style.width = fixedLeftHeaderTableBody.getBoundingClientRect().width + 'px'
|
||||
}
|
||||
if (fixedRightHeaderTableBody && fixedRightInnerTableBody) {
|
||||
fixedRightInnerTableBody.style.width = fixedRightHeaderTableBody.getBoundingClientRect().width + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整列宽的up事件
|
||||
* @memberof TableHeader
|
||||
|
|
@ -536,7 +582,13 @@ class TableHeader extends Component {
|
|||
const innerTable = table.querySelector('.u-table-body-inner');
|
||||
if(innerTable){
|
||||
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
|
||||
overflow.x && (innerTable.style.overflowX = overflow.x);
|
||||
if (overflow.x) {
|
||||
const fixedScrollContainers = innerTable.querySelectorAll('.fixed-scroll-container')
|
||||
if (fixedScrollContainers && fixedScrollContainers.length) {
|
||||
fixedScrollContainers[0] && (fixedScrollContainers[0].style.overflowX = overflow.x);
|
||||
fixedScrollContainers[1] && (fixedScrollContainers[1].style.overflowX = overflow.x);
|
||||
}
|
||||
}
|
||||
overflow.y && (innerTable.style.overflowY = overflow.y);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -467,14 +467,24 @@ class TableRow extends Component{
|
|||
this.element = el
|
||||
}
|
||||
|
||||
getLoadingStyle = (isPre, isSuf) => {
|
||||
if (isPre) {
|
||||
return this.element && this.element.nextSibling ? this.element.nextSibling .getBoundingClientRect() : {}
|
||||
}
|
||||
if (isSuf) {
|
||||
return this.element && this.element.previousSibling ? this.element.previousSibling.getBoundingClientRect() : {}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
clsPrefix, columns, record, height, visible, index,onPaste,
|
||||
clsPrefix, columns, record, height, visible, index,onPaste, isPre, isSuf, containerWidth,
|
||||
expandIconColumnIndex, expandIconAsCell, expanded, useDragHandle,rowDraggAble,
|
||||
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
|
||||
,expandedIcon,collapsedIcon, hoverKey,lazyStartIndex,lazyEndIndex, expandIconCellWidth, getCellClassName
|
||||
} = this.props;
|
||||
const {notRowDrag} = this.state;
|
||||
const isEmptyTr = isPre || isSuf
|
||||
let showSum = false;
|
||||
let { className } = this.props;
|
||||
if (this.state.hovered) {
|
||||
|
|
@ -555,7 +565,7 @@ class TableRow extends Component{
|
|||
if(rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able'
|
||||
}
|
||||
|
||||
const tdStyle = !isEmptyTr ? {} : this.getLoadingStyle(isPre, isSuf)
|
||||
return (
|
||||
<tr
|
||||
draggable={rowDraggAble && !useDragHandle && !notRowDrag}
|
||||
|
|
@ -570,7 +580,10 @@ class TableRow extends Component{
|
|||
// key={hoverKey}
|
||||
ref={this.bindElement}
|
||||
>
|
||||
{cells.length>0?cells:<td style={{width:0,padding:0}}></td>}
|
||||
{cells.length > 0 ? cells : isEmptyTr ? // loading暂时去掉
|
||||
<td style={{width: 0,padding: 0}}>
|
||||
</td> : <td style={{width: 0,padding: 0}}>
|
||||
</td>}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -573,6 +573,7 @@ export default function bigData(Table) {
|
|||
{...this.props}
|
||||
data={dataSource}
|
||||
lazyLoad={lazyLoad}
|
||||
ref={el => this.table = el}
|
||||
handleScrollY={this.handleScrollY}
|
||||
scrollTop={scrollTop}
|
||||
setRowHeight={this.setRowHeight}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,7 @@ export default function dragColumn(Table) {
|
|||
{...others}
|
||||
columns={this.state.columns}
|
||||
data={data}
|
||||
ref={el => this.table = el}
|
||||
className={`${className} u-table-drag-border`}
|
||||
onDragEnd={this.onDragEnd}
|
||||
draggable={draggable}
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ export default function sort(Table, Icon) {
|
|||
let { data, oldData = [], flatColumns } = this.state;
|
||||
let { sort } = this.props;
|
||||
let seleObj;
|
||||
if (!oldData) {
|
||||
if (!oldData.length) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
let sortCol ;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,25 @@ export function measureScrollbar(direction = 'vertical') {
|
|||
return scrollbarSize;
|
||||
}
|
||||
|
||||
export function myBrowser() {
|
||||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||||
var isOpera = userAgent.indexOf("Opera") > -1;
|
||||
if (isOpera) { //判断是否Opera浏览器
|
||||
return "Opera"
|
||||
}
|
||||
if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
|
||||
return "FF";
|
||||
}
|
||||
if (userAgent.indexOf("Chrome") > -1) {
|
||||
return "Chrome";
|
||||
}
|
||||
if (userAgent.indexOf("Safari") > -1) { //判断是否Safari浏览器
|
||||
return "Safari";
|
||||
}
|
||||
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { //判断是否IE浏览器
|
||||
return "IE";
|
||||
}
|
||||
}
|
||||
|
||||
export function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
|
|
|
|||
Loading…
Reference in New Issue