Compare commits
1 Commits
master
...
2.3.14-bet
| Author | SHA1 | Date |
|---|---|---|
gx
|
ecd8c5e211 |
|
|
@ -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
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -241,6 +241,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({
|
||||
|
|
@ -478,7 +481,19 @@ 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 && prevScrollY !== currentScrollY) {
|
||||
var distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY);
|
||||
if (distance < 0) {
|
||||
this.bodyTable.scrollTop = 0;
|
||||
} else {
|
||||
this.bodyTable.scrollTop = distance;
|
||||
}
|
||||
}
|
||||
// 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||
this.isShowScrollY();
|
||||
};
|
||||
|
|
@ -1416,8 +1431,6 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var _this5 = this;
|
||||
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
|
|
@ -1451,13 +1464,13 @@ var Table = function (_Component) {
|
|||
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 +1478,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)) {
|
||||
|
|
@ -1499,10 +1511,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||||
var _this6 = this;
|
||||
var _this5 = this;
|
||||
|
||||
var rows = this.getExpandedRows().filter(function (i) {
|
||||
return i === _this6.getRowKey(record, index);
|
||||
return i === _this5.getRowKey(record, index);
|
||||
});
|
||||
return rows[0];
|
||||
};
|
||||
|
|
@ -1646,7 +1658,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this7 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var _state3 = this.state,
|
||||
currentHoverRecord = _state3.currentHoverRecord,
|
||||
|
|
@ -1700,7 +1712,7 @@ var Table = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this7.contentTable = el;
|
||||
return _this6.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
this.getTitle(),
|
||||
|
|
@ -1732,7 +1744,7 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{ className: 'u-row-hover',
|
||||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||||
return _this7.hoverDom = el;
|
||||
return _this6.hoverDom = el;
|
||||
} },
|
||||
props.hoverContent(currentHoverRecord, currentHoverIndex)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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,6 +142,7 @@ 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') || [];
|
||||
|
|
@ -230,13 +231,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,12 +252,12 @@ 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);
|
||||
_this5.eventListen(events, 'remove', _this5.table.tr);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -431,7 +437,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 +455,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 +501,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 +522,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 +530,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 +544,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 +575,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 +592,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 +627,44 @@ 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.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;
|
||||
} 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 +674,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 +684,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 +692,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,20 +716,20 @@ 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) {
|
||||
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;
|
||||
if (newWidth > _this7.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];
|
||||
_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");
|
||||
|
|
@ -700,74 +739,113 @@ var _initialiseProps = function _initialiseProps() {
|
|||
}
|
||||
|
||||
//hao 支持固定表头拖拽 修改表体的width
|
||||
if (_this8.fixedTable.cols) {
|
||||
_this8.fixedTable.cols[_this8.drag.currIndex].style.width = newWidth + "px";
|
||||
if (_this7.fixedTable.cols) {
|
||||
_this7.fixedTable.cols[_this7.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 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"; //同步表体
|
||||
}
|
||||
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);
|
||||
// 内容区非固定列场景拖拽
|
||||
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.fixedRighHeadertTable, scrollbarWidth);
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this7.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, 0);
|
||||
}
|
||||
} else {
|
||||
//大于 0 不显示滚动条
|
||||
_this8.table.contentTableHeader.style.overflowX = 'hidden';
|
||||
_this8.optTableMargin(_this8.table.fixedLeftHeaderTable, 0);
|
||||
_this8.optTableMargin(_this8.table.fixedRighHeadertTable, 0);
|
||||
if (showScroll < 0) {
|
||||
_this7.table.tableBody.style.overflowX = 'auto';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, '-' + scrollbarWidth);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'scroll' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'scroll' });
|
||||
} else {
|
||||
_this7.table.tableBody.style.overflowX = 'hidden';
|
||||
_this7.optTableMargin(_this7.table.fixedLeftBodyTable, 0);
|
||||
_this7.optTableMargin(_this7.table.fixedRightBodyTable, 0);
|
||||
_this7.optTableScroll(_this7.table.fixedLeftBodyTable, { x: 'auto' });
|
||||
_this7.optTableScroll(_this7.table.fixedRightBodyTable, { x: 'auto' });
|
||||
}
|
||||
}
|
||||
} 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' });
|
||||
} 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
|
||||
|
||||
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 {
|
||||
_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' });
|
||||
contentTablePar.style.marginRight = _this7.drag.contentTableMR + diff + 'px';
|
||||
}
|
||||
}
|
||||
} 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.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) {
|
||||
|
|
@ -790,31 +868,31 @@ var _initialiseProps = function _initialiseProps() {
|
|||
};
|
||||
|
||||
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 +901,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 +939,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 +964,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 +972,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 +980,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 +995,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 +1009,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 +1044,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 +1060,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 +1075,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 +1090,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 +1105,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 +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去显示
|
||||
|
|
@ -1055,8 +1133,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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -347,6 +360,15 @@ var TableRow = function (_Component) {
|
|||
return _this;
|
||||
}
|
||||
|
||||
TableRow.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var rowDraggAble = this.props.rowDraggAble;
|
||||
|
||||
if (rowDraggAble !== nextProps.rowDraggAble) {
|
||||
this.event = false;
|
||||
this.initEvent();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.componentDidMount = function componentDidMount() {
|
||||
var _this2 = this;
|
||||
|
||||
|
|
@ -678,7 +700,8 @@ 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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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.14-beta.2",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -67,6 +67,13 @@ class TableRow extends Component{
|
|||
this.canBeTouch = true //受否允许拖动该行
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { rowDraggAble } = this.props;
|
||||
if(rowDraggAble !== nextProps.rowDraggAble) {
|
||||
this.event = false
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { store, hoverKey,treeType,rowDraggAble } = this.props;
|
||||
|
|
|
|||
Loading…
Reference in New Issue