Merge branch 'master' into lcj-demo-50x
This commit is contained in:
梁才军
commit
6fe1233f27
669
README.md
669
README.md
|
|
@ -1,333 +1,336 @@
|
||||||
# bee-table
|
# bee-table
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/bee-table)
|
[](https://www.npmjs.com/package/bee-table)
|
||||||
[](https://travis-ci.org/tinper-bee/bee-table)
|
[](https://travis-ci.org/tinper-bee/bee-table)
|
||||||
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
[](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
|
||||||
[](https://david-dm.org/tinper-bee/bee-table)
|
[](https://david-dm.org/tinper-bee/bee-table)
|
||||||
[](https://npmjs.org/package/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 "Average time to resolve an issue")
|
||||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||||
|
|
||||||
react bee-table component for tinper-bee
|
react bee-table component for tinper-bee
|
||||||
|
|
||||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||||
* 动态设置过滤列
|
* 动态设置过滤列
|
||||||
* 排序合计
|
* 排序合计
|
||||||
* 多选
|
* 多选
|
||||||
* 主子表
|
* 主子表
|
||||||
* 固定表头
|
* 固定表头
|
||||||
* 拖拽表头进行列交换
|
* 拖拽表头进行列交换
|
||||||
* 拖拽调整列宽度
|
* 拖拽调整列宽度
|
||||||
* 嵌套子表格
|
* 嵌套子表格
|
||||||
* 行、列合并
|
* 行、列合并
|
||||||
|
|
||||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||||
|
|
||||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||||
|
|
||||||
## 安装
|
## 安装
|
||||||
|
|
||||||
[](https://npmjs.org/package/bee-table)
|
[](https://npmjs.org/package/bee-table)
|
||||||
|
|
||||||
## 使用方法
|
## 使用方法
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
{ title: '用户名', dataIndex: 'a', key: 'a', width: 100 },
|
||||||
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
{ id: '123', title: '性别', dataIndex: 'b', key: 'b', width: 100 },
|
||||||
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
{ title: '年龄', dataIndex: 'c', key: 'c', width: 200 },
|
||||||
{
|
{
|
||||||
title: '操作', dataIndex: '', key: 'd', render() {
|
title: '操作', dataIndex: '', key: 'd', render() {
|
||||||
return <a href="#">一些操作</a>;
|
return <a href="#">一些操作</a>;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
{ a: '令狐冲', b: '男', c: 41, key: '1' },
|
||||||
{ a: '杨过', b: '男', c: 67, key: '2' },
|
{ a: '杨过', b: '男', c: 67, key: '2' },
|
||||||
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
{ a: '郭靖', b: '男', c: 25, key: '3' },
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo extends Component {
|
class Demo extends Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### Table
|
### Table
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
|
||||||
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
| data | 传入的表格数据（key值必需，否则会导致部分功能出现问题。建议使用唯一的值，如id） | array | [] |
|
||||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||||
| columns | 列的配置表，具体配置见下表 | array | - |
|
| columns | 列的配置表，具体配置见下表 | array | - |
|
||||||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||||
| style | 添加到table上的style | object | {} |
|
| style | 添加到table上的style | object | {} |
|
||||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||||
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' |
|
||||||
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' |
|
||||||
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' |
|
||||||
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' |
|
||||||
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 |
|
||||||
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
| onRowClick | 行的点击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||||
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index, event) | () => '' |
|
||||||
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false |
|
||||||
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 |
|
||||||
| showHeader | 是否显示表头 | bool | true |
|
| showHeader | 是否显示表头 | bool | true |
|
||||||
| title | 表格标题 | Function | - |
|
| title | 表格标题 | Function | - |
|
||||||
| footer | 表格尾部 | Function | - |
|
| footer | 表格尾部 | Function | - |
|
||||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
|
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number | true | 百分比, y: number }` | {} |
|
||||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||||
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
|
||||||
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
|
||||||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||||
| tabIndex | 设置焦点顺序 | number | 0
|
| tabIndex | 设置焦点顺序 | number | 0
|
||||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||||
|
| height | 自定义表格行高 | number | - |
|
||||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
| headerHeight | 自定义表头行高 | number | - |
|
||||||
|
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
|
||||||
|
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||||
|
|
||||||
### Column
|
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||||
|
|
||||||
|参数|说明|类型|默认值|
|
|
||||||
|:--|:---|:--|:---|
|
### Column
|
||||||
|key|列的键|string|-|
|
|
||||||
|className|传入列的classname|String |-|
|
|参数|说明|类型|默认值|
|
||||||
|colSpan|该列的colSpan|Number|-|
|
|:--|:---|:--|:---|
|
||||||
|title|列的标题|node|-|
|
|key|列的键|string|-|
|
||||||
|dataIndex| 显示数据记录的字段|String|-|
|
|className|传入列的classname|String |-|
|
||||||
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
|colSpan|该列的colSpan|Number|-|
|
||||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
|title|列的标题|node|-|
|
||||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
|dataIndex| 显示数据记录的字段|String|-|
|
||||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|
||||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||||
|
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||||
## 快捷键API
|
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||||
|
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
|
||||||
| --- | :--- | --- |--- |
|
## 快捷键API
|
||||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
|
||||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
| --- | :--- | --- |--- |
|
||||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||||
| tabIndex | 设置焦点顺序 | number | 0
|
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||||
|
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||||
|
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||||
## 如何引用
|
| tabIndex | 设置焦点顺序 | number | 0
|
||||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
|
||||||
|
|
||||||
* 在tinper-bee中引用
|
## 如何引用
|
||||||
|
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||||
```js
|
|
||||||
|
* 在tinper-bee中引用
|
||||||
import {Table} from 'tinper-bee'
|
|
||||||
|
```js
|
||||||
```
|
|
||||||
|
import {Table} from 'tinper-bee'
|
||||||
* 单独安装bee-table 方式
|
|
||||||
|
```
|
||||||
```js
|
|
||||||
|
* 单独安装bee-table 方式
|
||||||
import Table from 'bee-table'
|
|
||||||
|
```js
|
||||||
```
|
|
||||||
|
import Table from 'bee-table'
|
||||||
## 如何引用增强功能(multiSelect,sort,sum)
|
|
||||||
|
```
|
||||||
|
|
||||||
```js
|
## 如何引用增强功能(multiSelect,sort,sum)
|
||||||
|
|
||||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
|
||||||
|
```js
|
||||||
```
|
|
||||||
|
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||||
### multiSelect
|
|
||||||
|
```
|
||||||
全选功能
|
|
||||||
|
### multiSelect
|
||||||
#### data 数据中新增参数
|
|
||||||
|
全选功能
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------------------- | -------------------------- | -------- | -------- |
|
#### data 数据中新增参数
|
||||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
|
||||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
| ------------------- | -------------------------- | -------- | -------- |
|
||||||
|
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||||
### sort
|
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||||
|
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||||
排序功能
|
|
||||||
|
### sort
|
||||||
#### Column新增参数
|
|
||||||
|
排序功能
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------ | ---------- | -------- | ---- |
|
#### Column新增参数
|
||||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
|
||||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||||
|
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||||
|
|
||||||
### sum
|
|
||||||
|
|
||||||
合计功能
|
|
||||||
|
### sum
|
||||||
#### Column新增参数
|
|
||||||
|
合计功能
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------ | ---------- | -------- | ---- |
|
#### Column新增参数
|
||||||
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
### filterColumn
|
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||||
|
|
||||||
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
|
||||||
|
### filterColumn
|
||||||
|
|
||||||
### dragColumn
|
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
|
||||||
|
|
||||||
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
|
||||||
|
### dragColumn
|
||||||
#### dragColumn新增参数
|
|
||||||
|
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js)
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------ | ---------- | -------- | ---- |
|
#### dragColumn新增参数
|
||||||
| draggable | 可拖拽交换列 | boolean | false |
|
|
||||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| draggable | 可拖拽交换列 | boolean | false |
|
||||||
|
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||||
|
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||||
|
|
||||||
## rendertype
|
|
||||||
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
|
||||||
|
|
||||||
## 如何引用
|
## rendertype
|
||||||
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
|
||||||
|
|
||||||
```js
|
## 如何引用
|
||||||
import InputRender from "bee-table/render/InputRender.js"
|
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
|
||||||
```
|
|
||||||
|
```js
|
||||||
## 安装依赖包
|
import InputRender from "bee-table/render/InputRender.js"
|
||||||
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
|
```
|
||||||
|
|
||||||
### InputRender
|
## 安装依赖包
|
||||||
输入框类型render
|
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
|
||||||
|
|
||||||
#### 依赖的组件
|
### InputRender
|
||||||
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
|
输入框类型render
|
||||||
|
|
||||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
#### 依赖的组件
|
||||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
该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 |
|
| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
|
||||||
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
| placeholder | 输入框的提示信息 | string | - |
|
||||||
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
|
| value | 输入框中的显示值 | string | 无 |
|
||||||
| formItemClassName | FormItem的class | string | - |
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
| mesClassName | 校验错误信息的class | string | - |
|
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
||||||
| isRequire | 是否必填 | bool | false |
|
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
|
||||||
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
| formItemClassName | FormItem的class | string | - |
|
||||||
| method | 校验方式，change/blur | string | - |
|
| mesClassName | 校验错误信息的class | string | - |
|
||||||
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
| isRequire | 是否必填 | bool | false |
|
||||||
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
||||||
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
|
| method | 校验方式，change/blur | string | - |
|
||||||
|
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
||||||
### DateRender
|
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
||||||
日期类型render
|
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
|
||||||
|
|
||||||
#### 依赖的组件
|
### DateRender
|
||||||
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
|
日期类型render
|
||||||
|
|
||||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
#### 依赖的组件
|
||||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
该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" |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
||||||
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
注:其他参数参见bee-datepicker组件参数配置
|
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
|
||||||
|
|
||||||
|
|
||||||
### SelectRender
|
注:其他参数参见bee-datepicker组件参数配置
|
||||||
输入框类型render
|
|
||||||
|
|
||||||
#### 依赖的组件
|
### SelectRender
|
||||||
该render依赖于`bee-icon`,`bee-select`
|
输入框类型render
|
||||||
|
|
||||||
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save`
|
#### 依赖的组件
|
||||||
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
|
该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 | - |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| -------------- | ---------------------------------------- | ------- | ----- |
|
||||||
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如[{key:"张三",value:"01"}] | array | - |
|
||||||
注:其他参数参见bee-select组件参数配置
|
|
||||||
|
|
||||||
|
|
||||||
## 开发调试
|
注:其他参数参见bee-select组件参数配置
|
||||||
|
|
||||||
```sh
|
|
||||||
$ git clone https://github.com/tinper-bee/bee-table
|
## 开发调试
|
||||||
$ cd bee-table
|
|
||||||
$ npm install
|
```sh
|
||||||
$ npm run dev
|
$ git clone https://github.com/tinper-bee/bee-table
|
||||||
```
|
$ cd bee-table
|
||||||
|
$ npm install
|
||||||
|
$ npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 1.5;
|
line-height: 1.33;
|
||||||
overflow: hidden; }
|
overflow: hidden; }
|
||||||
.u-table-body {
|
.u-table-body {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
@ -47,13 +47,21 @@
|
||||||
background: rgb(235, 236, 240); }
|
background: rgb(235, 236, 240); }
|
||||||
.u-table th,
|
.u-table th,
|
||||||
.u-table td {
|
.u-table td {
|
||||||
padding: 12px 8px;
|
padding: 12px 16px;
|
||||||
word-break: break-all; }
|
word-break: break-all; }
|
||||||
|
.u-table th.text-center,
|
||||||
|
.u-table td.text-center {
|
||||||
|
text-align: center; }
|
||||||
|
.u-table th.text-right,
|
||||||
|
.u-table td.text-right {
|
||||||
|
text-align: right; }
|
||||||
.u-table tr.filterable th {
|
.u-table tr.filterable th {
|
||||||
padding-top: 5px !important;
|
padding-top: 5px !important;
|
||||||
padding-bottom: 5px !important; }
|
padding-bottom: 5px !important; }
|
||||||
.u-table tr.filterable th .filterContext {
|
.u-table tr.filterable th .filterContext {
|
||||||
height: 35px; }
|
height: 35px; }
|
||||||
|
.u-table tr.filterable th .u-select-selection--single {
|
||||||
|
height: 26px; }
|
||||||
.u-table-row-hover {
|
.u-table-row-hover {
|
||||||
background: rgb(235, 236, 240); }
|
background: rgb(235, 236, 240); }
|
||||||
.u-table-scroll {
|
.u-table-scroll {
|
||||||
|
|
@ -80,7 +88,7 @@
|
||||||
background: rgb(241, 242, 245);
|
background: rgb(241, 242, 245);
|
||||||
color: rgb(33, 33, 33); }
|
color: rgb(33, 33, 33); }
|
||||||
.u-table.fixed-height td {
|
.u-table.fixed-height td {
|
||||||
padding: 0px 8px; }
|
padding: 0px 16px; }
|
||||||
.u-table-fixed-header .u-table-body {
|
.u-table-fixed-header .u-table-body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
|
|
@ -98,17 +106,17 @@
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
.u-table-title {
|
.u-table-title {
|
||||||
padding: 12px 8px;
|
padding: 12px 16px;
|
||||||
border-top: 1px solid rgb(193, 199, 208); }
|
border-top: 1px solid rgb(193, 199, 208); }
|
||||||
.u-table-content {
|
.u-table-content {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
.u-table-footer {
|
.u-table-footer {
|
||||||
padding: 12px 8px;
|
padding: 12px 16px;
|
||||||
border-bottom: 1px solid rgb(193, 199, 208); }
|
border-bottom: 1px solid rgb(193, 199, 208); }
|
||||||
.u-table-footer .u-table-scroll {
|
.u-table-footer .u-table-scroll {
|
||||||
overflow-x: hidden; }
|
overflow-x: hidden; }
|
||||||
.u-table-footer .u-table {
|
.u-table-footer .u-table {
|
||||||
margin: -12px -8px; }
|
margin: -12px -16px; }
|
||||||
.u-table-placeholder {
|
.u-table-placeholder {
|
||||||
padding: 12px 8px;
|
padding: 12px 8px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -219,13 +227,18 @@
|
||||||
.u-table-thead th .bee-table-column-sorter {
|
.u-table-thead th .bee-table-column-sorter {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
height: 1em;
|
height: 16px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block; }
|
display: inline-block;
|
||||||
|
margin-top: -3px; }
|
||||||
|
.u-table-thead th .bee-table-column-sorter i {
|
||||||
|
padding: 0px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #505F79; }
|
||||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
|
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
|
||||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
|
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
|
||||||
line-height: 6px;
|
line-height: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 34px;
|
width: 34px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
@ -296,17 +309,18 @@
|
||||||
position: relative; }
|
position: relative; }
|
||||||
.u-table-filter-column-filter-icon {
|
.u-table-filter-column-filter-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
width: 30px;
|
||||||
right: 18px;
|
height: 38px;
|
||||||
width: 22px;
|
line-height: 38px;
|
||||||
height: 25px;
|
right: 12px;
|
||||||
line-height: 25px;
|
top: 1px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: rgb(241, 242, 245);
|
background: rgb(241, 242, 245);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.u-table-filter-column-filter-icon i.uf {
|
.u-table-filter-column-filter-icon i.uf {
|
||||||
padding: 0px; }
|
padding: 0px;
|
||||||
|
color: #505F79; }
|
||||||
.u-table-filter-column-pop-cont-item {
|
.u-table-filter-column-pop-cont-item {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
@ -329,9 +343,15 @@
|
||||||
display: none;
|
display: none;
|
||||||
pointer-events: none; }
|
pointer-events: none; }
|
||||||
.u-table .u-checkbox {
|
.u-table .u-checkbox {
|
||||||
height: 16px;
|
height: 14px;
|
||||||
line-height: 16px;
|
line-height: 14px;
|
||||||
margin: 0px; }
|
margin: 0px; }
|
||||||
|
.u-table .u-checkbox .u-checkbox-label {
|
||||||
|
line-height: 14px;
|
||||||
|
padding-left: 16px; }
|
||||||
|
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px; }
|
||||||
|
|
||||||
.u-table:focus {
|
.u-table:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -521,16 +541,16 @@
|
||||||
.u-filter-dropdown-menu-wrap {
|
.u-filter-dropdown-menu-wrap {
|
||||||
z-index: 1800; }
|
z-index: 1800; }
|
||||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||||
line-height: 28px;
|
line-height: 26px;
|
||||||
height: 28px;
|
height: 26px;
|
||||||
padding: 0px 16px 0 16px;
|
padding: 0px 16px 0 16px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
|
||||||
.filter-wrap .u-form-control {
|
.filter-wrap .u-form-control {
|
||||||
height: 28px; }
|
height: 26px; }
|
||||||
|
|
||||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
|
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
|
||||||
height: 28px; }
|
height: 26px; }
|
||||||
|
|
||||||
.u-row-hover {
|
.u-row-hover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -490,6 +490,7 @@ function bigData(Table) {
|
||||||
if (!_this.props.expandedRowKeys) {
|
if (!_this.props.expandedRowKeys) {
|
||||||
if (expandState) {
|
if (expandState) {
|
||||||
expandedRowKeys.push(rowKey);
|
expandedRowKeys.push(rowKey);
|
||||||
|
_this4.setState({ needRender: !needRender });
|
||||||
} else {
|
} else {
|
||||||
var _index = -1;
|
var _index = -1;
|
||||||
expandedRowKeys.forEach(function (r, i) {
|
expandedRowKeys.forEach(function (r, i) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
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; };
|
||||||
|
|
@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep');
|
||||||
|
|
||||||
function dragColumn(Table) {
|
function dragColumn(Table) {
|
||||||
|
|
||||||
return function (_Component) {
|
return function (_Component) {
|
||||||
_inherits(DragColumn, _Component);
|
_inherits(DragColumn, _Component);
|
||||||
|
|
||||||
function DragColumn(props) {
|
function DragColumn(props) {
|
||||||
_classCallCheck(this, DragColumn);
|
_classCallCheck(this, DragColumn);
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
_this.setColumOrderByIndex = function (_column) {
|
_this.setColumOrderByIndex = function (_column) {
|
||||||
_column.forEach(function (da, i) {
|
_column.forEach(function (da, i) {
|
||||||
da.dragIndex = i;
|
da.dragIndex = i;
|
||||||
da.drgHover = false;
|
da.drgHover = false;
|
||||||
});
|
|
||||||
return _column;
|
|
||||||
};
|
|
||||||
|
|
||||||
_this.onDrop = function (event, data) {
|
|
||||||
var dragSource = data.dragSource,
|
|
||||||
dragTarg = data.dragTarg;
|
|
||||||
var columns = _this.state.columns;
|
|
||||||
|
|
||||||
var sourceIndex = -1,
|
|
||||||
targetIndex = -1;
|
|
||||||
|
|
||||||
sourceIndex = columns.findIndex(function (da, i) {
|
|
||||||
return da.key == dragSource.key;
|
|
||||||
});
|
|
||||||
targetIndex = columns.findIndex(function (da, i) {
|
|
||||||
return da.key == dragTarg.key;
|
|
||||||
});
|
|
||||||
// for (let index = 0; index < columns.length; index++) {
|
|
||||||
// const da = columns[index];
|
|
||||||
// if(da.key === dragSource.key){
|
|
||||||
// columns[index] = dragTargColum;
|
|
||||||
// }
|
|
||||||
// if(da.key === dragTarg.key){
|
|
||||||
// columns[index] = dragSourceColum;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// 向前移动
|
|
||||||
if (targetIndex < sourceIndex) {
|
|
||||||
targetIndex = targetIndex + 1;
|
|
||||||
}
|
|
||||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
|
||||||
_this.setState({
|
|
||||||
columns: cloneDeep(columns)
|
|
||||||
});
|
|
||||||
if (_this.props.onDrop) {
|
|
||||||
_this.props.onDrop(event, data, columns);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
_this.getTarget = function (evt) {
|
|
||||||
return evt.target || evt.srcElement;
|
|
||||||
};
|
|
||||||
|
|
||||||
_this.state = {
|
|
||||||
columns: _this.setColumOrderByIndex(props.columns)
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
|
|
||||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
|
||||||
if (nextProps.columns != this.props.columns) {
|
|
||||||
this.setState({
|
|
||||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
|
|
||||||
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
var resultData = {};
|
|
||||||
return this.recursion(obj, resultData);
|
|
||||||
};
|
|
||||||
|
|
||||||
DragColumn.prototype.recursion = function (_recursion) {
|
|
||||||
function recursion(_x) {
|
|
||||||
return _recursion.apply(this, arguments);
|
|
||||||
}
|
|
||||||
|
|
||||||
recursion.toString = function () {
|
|
||||||
return _recursion.toString();
|
|
||||||
};
|
|
||||||
|
|
||||||
return recursion;
|
|
||||||
}(function (obj) {
|
|
||||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
||||||
|
|
||||||
for (key in obj) {
|
|
||||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
|
||||||
data[key] = recursion(obj[key]);
|
|
||||||
} else {
|
|
||||||
data[key] = obj[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
});
|
});
|
||||||
|
return _column;
|
||||||
|
};
|
||||||
|
|
||||||
DragColumn.prototype.render = function render() {
|
_this.onDrop = function (event, data) {
|
||||||
var _props = this.props,
|
var dragSource = data.dragSource,
|
||||||
data = _props.data,
|
dragTarg = data.dragTarg;
|
||||||
dragborder = _props.dragborder,
|
var columns = _this.state.columns;
|
||||||
draggable = _props.draggable,
|
|
||||||
className = _props.className,
|
|
||||||
columns = _props.columns,
|
|
||||||
onDragStart = _props.onDragStart,
|
|
||||||
onDragEnter = _props.onDragEnter,
|
|
||||||
onDragOver = _props.onDragOver,
|
|
||||||
onDrop = _props.onDrop,
|
|
||||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
|
||||||
|
|
||||||
var key = new Date().getTime();
|
var sourceIndex = -1,
|
||||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
targetIndex = -1;
|
||||||
columns: this.state.columns,
|
|
||||||
data: data,
|
|
||||||
className: className + ' u-table-drag-border',
|
|
||||||
onDragStart: this.onDragStart,
|
|
||||||
onDragOver: this.onDragOver,
|
|
||||||
onDrop: this.onDrop,
|
|
||||||
onDragEnter: this.onDragEnter,
|
|
||||||
draggable: draggable,
|
|
||||||
dragborder: dragborder
|
|
||||||
// dragborder={false}
|
|
||||||
, dragborderKey: key
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return DragColumn;
|
sourceIndex = columns.findIndex(function (da, i) {
|
||||||
}(_react.Component);
|
return da.key == dragSource.key;
|
||||||
|
});
|
||||||
|
targetIndex = columns.findIndex(function (da, i) {
|
||||||
|
return da.key == dragTarg.key;
|
||||||
|
});
|
||||||
|
// for (let index = 0; index < columns.length; index++) {
|
||||||
|
// const da = columns[index];
|
||||||
|
// if(da.key === dragSource.key){
|
||||||
|
// columns[index] = dragTargColum;
|
||||||
|
// }
|
||||||
|
// if(da.key === dragTarg.key){
|
||||||
|
// columns[index] = dragSourceColum;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// 向前移动
|
||||||
|
if (targetIndex < sourceIndex) {
|
||||||
|
targetIndex = targetIndex + 1;
|
||||||
|
}
|
||||||
|
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||||
|
_this.setState({
|
||||||
|
columns: cloneDeep(columns)
|
||||||
|
});
|
||||||
|
if (_this.props.onDrop) {
|
||||||
|
_this.props.onDrop(event, data, columns);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.getTarget = function (evt) {
|
||||||
|
return evt.target || evt.srcElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.state = {
|
||||||
|
columns: _this.setColumOrderByIndex(props.columns)
|
||||||
|
};
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||||
|
if (nextProps.columns != this.props.columns) {
|
||||||
|
this.setState({
|
||||||
|
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
|
||||||
|
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
var resultData = {};
|
||||||
|
return this.recursion(obj, resultData);
|
||||||
|
};
|
||||||
|
|
||||||
|
DragColumn.prototype.recursion = function (_recursion) {
|
||||||
|
function recursion(_x) {
|
||||||
|
return _recursion.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
recursion.toString = function () {
|
||||||
|
return _recursion.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
return recursion;
|
||||||
|
}(function (obj) {
|
||||||
|
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||||
|
|
||||||
|
for (key in obj) {
|
||||||
|
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||||
|
data[key] = recursion(obj[key]);
|
||||||
|
} else {
|
||||||
|
data[key] = obj[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
|
||||||
|
DragColumn.prototype.render = function render() {
|
||||||
|
var _props = this.props,
|
||||||
|
data = _props.data,
|
||||||
|
dragborder = _props.dragborder,
|
||||||
|
draggable = _props.draggable,
|
||||||
|
className = _props.className,
|
||||||
|
columns = _props.columns,
|
||||||
|
onDragStart = _props.onDragStart,
|
||||||
|
onDragEnter = _props.onDragEnter,
|
||||||
|
onDragOver = _props.onDragOver,
|
||||||
|
onDrop = _props.onDrop,
|
||||||
|
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||||
|
|
||||||
|
var key = new Date().getTime();
|
||||||
|
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||||
|
columns: this.state.columns,
|
||||||
|
data: data,
|
||||||
|
className: className + ' u-table-drag-border',
|
||||||
|
onDragStart: this.onDragStart,
|
||||||
|
onDragOver: this.onDragOver,
|
||||||
|
onDrop: this.onDrop,
|
||||||
|
onDragEnter: this.onDragEnter,
|
||||||
|
draggable: draggable,
|
||||||
|
dragborder: dragborder
|
||||||
|
// dragborder={false}
|
||||||
|
, dragborderKey: key
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return DragColumn;
|
||||||
|
}(_react.Component);
|
||||||
}
|
}
|
||||||
module.exports = exports['default'];
|
module.exports = exports['default'];
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
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; };
|
||||||
|
|
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function sortBy(arr, prop, desc) {
|
function sortBy(arr, prop, desc) {
|
||||||
var props = [],
|
var props = [],
|
||||||
ret = [],
|
ret = [],
|
||||||
i = 0,
|
i = 0,
|
||||||
len = arr.length;
|
len = arr.length;
|
||||||
if (typeof prop == 'string') {
|
if (typeof prop == 'string') {
|
||||||
for (; i < len; i++) {
|
for (; i < len; i++) {
|
||||||
var oI = arr[i];
|
var oI = arr[i];
|
||||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||||
|
}
|
||||||
|
} else if (typeof prop == 'function') {
|
||||||
|
for (; i < len; i++) {
|
||||||
|
var _oI = arr[i];
|
||||||
|
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw '参数类型错误';
|
||||||
}
|
}
|
||||||
} else if (typeof prop == 'function') {
|
props.sort();
|
||||||
for (; i < len; i++) {
|
for (i = 0; i < len; i++) {
|
||||||
var _oI = arr[i];
|
ret[i] = props[i]._obj;
|
||||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
|
||||||
}
|
}
|
||||||
} else {
|
if (desc) ret.reverse();
|
||||||
throw '参数类型错误';
|
return ret;
|
||||||
}
|
|
||||||
props.sort();
|
|
||||||
for (i = 0; i < len; i++) {
|
|
||||||
ret[i] = props[i]._obj;
|
|
||||||
}
|
|
||||||
if (desc) ret.reverse();
|
|
||||||
return ret;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
||||||
* @param {} property
|
* @param {} property
|
||||||
*/
|
*/
|
||||||
function compare(property) {
|
function compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
var value1 = a[property];
|
var value1 = a[property];
|
||||||
var value2 = b[property];
|
var value2 = b[property];
|
||||||
return value1 - value2;
|
return value1 - value2;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -63,17 +63,17 @@ function compare(property) {
|
||||||
* @param {*} obj 要拷贝的对象
|
* @param {*} obj 要拷贝的对象
|
||||||
*/
|
*/
|
||||||
function ObjectAssign(obj) {
|
function ObjectAssign(obj) {
|
||||||
var b = obj instanceof Array;
|
var b = obj instanceof Array;
|
||||||
var tagObj = b ? [] : {};
|
var tagObj = b ? [] : {};
|
||||||
if (b) {
|
if (b) {
|
||||||
//数组
|
//数组
|
||||||
obj.forEach(function (da) {
|
obj.forEach(function (da) {
|
||||||
var _da = {};
|
var _da = {};
|
||||||
_extends(_da, da);
|
_extends(_da, da);
|
||||||
tagObj.push(_da);
|
tagObj.push(_da);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
_extends(tagObj, obj);
|
_extends(tagObj, obj);
|
||||||
}
|
}
|
||||||
return tagObj;
|
return tagObj;
|
||||||
}
|
}
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
// @import "../node_modules/tinper-bee-core/scss/index.scss";
|
@import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||||
// @import "../node_modules/bee-panel/src/Panel.scss";
|
@import "../node_modules/bee-panel/src/Panel.scss";
|
||||||
// @import "../node_modules/bee-layout/src/Layout.scss";
|
@import "../node_modules/bee-layout/src/Layout.scss";
|
||||||
// @import "../node_modules/bee-button/src/Button.scss";
|
@import "../node_modules/bee-button/src/Button.scss";
|
||||||
// @import "../node_modules/bee-transition/src/Transition.scss";
|
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||||
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||||
// @import "../node_modules/bee-form-control/src/FormControl.scss";
|
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||||
// @import "../node_modules/bee-select/src/Select.scss";
|
@import "../node_modules/bee-select/src/Select.scss";
|
||||||
// @import "../node_modules/bee-form/src/Form.scss";
|
// @import "../node_modules/bee-form/src/Form.scss";
|
||||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
@import "../node_modules/bee-popover/src/Popover.scss";
|
||||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||||
// @import "../node_modules/bee-message/build/Message.css";
|
@import "../node_modules/bee-message/build/Message.css";
|
||||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
@import "../node_modules/bee-modal/build/Modal.css";
|
||||||
@import "../src/Table.scss";
|
@import "../src/Table.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -33,3 +33,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.opt-btns .u-button{
|
||||||
|
color: #fff;
|
||||||
|
background: #505F79;
|
||||||
|
&:hover, &:active{
|
||||||
|
background: #344563;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -1,8 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 基本表格
|
* @title 基本表格
|
||||||
* 【Tooltip】
|
* @parent 基础 Basic
|
||||||
* @description 鼠标hover行时呼出操作按钮
|
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
|
|
@ -11,14 +11,15 @@ import Table from "../../src";
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||||
fixed:'left',
|
fixed:'left',
|
||||||
|
textAlign:'center',
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return (
|
return (
|
||||||
<Tooltip inverse overlay={text}>
|
<Tooltip inverse overlay={text}>
|
||||||
<span tootip={text} style={{
|
<span tootip={text} style={{
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
width: "60px",
|
width: "80px",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
|
|
@ -28,14 +29,15 @@ const columns = [
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||||
|
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo01 extends Component {
|
class Demo01 extends Component {
|
||||||
|
|
@ -66,8 +68,7 @@ class Demo01 extends Component {
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
parentNodeId='parent'
|
parentNodeId='parent'
|
||||||
height={40}
|
bordered = {true}
|
||||||
headerHeight={40}
|
|
||||||
hoverContent={this.getHoverContent}
|
hoverContent={this.getHoverContent}
|
||||||
onRowHover={this.onRowHover}
|
onRowHover={this.onRowHover}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 默认无数据展示
|
* @title 默认无数据展示
|
||||||
|
* @parent 基础 Basic
|
||||||
* @description 无数据时显示效果展示（可自定义）
|
* @description 无数据时显示效果展示（可自定义）
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -10,30 +11,29 @@ import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import Icon from 'bee-icon';
|
import Icon from 'bee-icon';
|
||||||
|
|
||||||
|
|
||||||
const columns02 = [
|
const columns02 = [
|
||||||
{
|
{
|
||||||
title: "Name",
|
title: "员工编号",
|
||||||
dataIndex: "name",
|
dataIndex: "num",
|
||||||
key: "name",
|
key: "num",
|
||||||
width: "40%"
|
width: "40%"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Age",
|
title: "员工姓名",
|
||||||
dataIndex: "age",
|
dataIndex: "name",
|
||||||
key: "age",
|
key: "name",
|
||||||
width: "30%"
|
width: "30%"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Address",
|
title: "部门",
|
||||||
dataIndex: "address",
|
dataIndex: "department",
|
||||||
key: "address"
|
key: "department"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data02 = [];
|
const data02 = [];
|
||||||
|
|
||||||
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
||||||
|
|
||||||
class Demo02 extends Component {
|
class Demo02 extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
.demo02 {
|
.demo02 {
|
||||||
.u-table-placeholder i{
|
.u-table-placeholder i{
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
|
line-height: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 固定表头
|
* @title 固定表头
|
||||||
* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
|
* @parent 基础 Basic
|
||||||
|
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
@ -9,63 +10,167 @@ import Table from '../../src';
|
||||||
|
|
||||||
const columns03 = [
|
const columns03 = [
|
||||||
{
|
{
|
||||||
title: "Full Name",
|
title: "序号",
|
||||||
width: 100,
|
dataIndex: "index",
|
||||||
dataIndex: "name",
|
key: "index",
|
||||||
key: "name"
|
width: 80,
|
||||||
|
render(text, record, index) {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
{
|
||||||
{ title: "Address", dataIndex: "address", key: "1" }
|
title: "订单编号",
|
||||||
|
dataIndex: "orderCode",
|
||||||
|
key: "orderCode",
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "供应商名称",
|
||||||
|
dataIndex: "supplierName",
|
||||||
|
key: "supplierName",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "类型",
|
||||||
|
dataIndex: "type_name",
|
||||||
|
key: "type_name",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "采购组织",
|
||||||
|
dataIndex: "purchasing",
|
||||||
|
key: "purchasing",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "采购组",
|
||||||
|
dataIndex: "purchasingGroup",
|
||||||
|
key: "purchasingGroup",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "凭证日期",
|
||||||
|
dataIndex: "voucherDate",
|
||||||
|
key: "voucherDate",
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "审批状态",
|
||||||
|
dataIndex: "approvalState_name",
|
||||||
|
key: "approvalState_name",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "确认状态",
|
||||||
|
dataIndex: "confirmState_name",
|
||||||
|
key: "confirmState_name",
|
||||||
|
width: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "关闭状态",
|
||||||
|
dataIndex: "closeState_name",
|
||||||
|
key: "closeState_name",
|
||||||
|
width: 100
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data03 = [
|
const data03 = [
|
||||||
{
|
{
|
||||||
key: "1",
|
orderCode:"NU0391025",
|
||||||
name: "John Brown",
|
supplierName: "xx供应商",
|
||||||
age: 32,
|
type_name: "1",
|
||||||
address: "New York Park"
|
purchasing:'组织c',
|
||||||
|
purchasingGroup:"aa",
|
||||||
|
voucherDate:"2018年03月18日",
|
||||||
|
approvalState_name:"已审批",
|
||||||
|
confirmState_name:"执行中",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderCode:"NU0391026",
|
||||||
|
supplierName: "xx供应商",
|
||||||
|
type_name: "2",
|
||||||
|
purchasing:'组织a',
|
||||||
|
purchasingGroup:"bb",
|
||||||
|
voucherDate:"2018年02月05日",
|
||||||
|
approvalState_name:"已审批",
|
||||||
|
confirmState_name:"待确认",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "2",
|
orderCode:"NU0391027",
|
||||||
name: "Jim Green",
|
supplierName: "xx供应商",
|
||||||
age: 40,
|
type_name: "3",
|
||||||
address: "London Park"
|
purchasing:'组织b',
|
||||||
|
purchasingGroup:"aa",
|
||||||
|
voucherDate:"2018年07月01日",
|
||||||
|
approvalState_name:"已审批",
|
||||||
|
confirmState_name:"终止",
|
||||||
|
closeState_name:"已关闭",
|
||||||
|
key: "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "3",
|
orderCode:"NU0391028",
|
||||||
name: "Jim Green",
|
supplierName: "xx供应商",
|
||||||
age: 40,
|
type_name: "4",
|
||||||
address: "London Park"
|
purchasing:'组织c',
|
||||||
|
purchasingGroup:"cc",
|
||||||
|
voucherDate:"2019年03月01日",
|
||||||
|
approvalState_name:"未审批",
|
||||||
|
confirmState_name:"待确认",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "4"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "4",
|
orderCode:"NU0391029",
|
||||||
name: "Jim Green",
|
supplierName: "xx供应商",
|
||||||
age: 40,
|
type_name: "5",
|
||||||
address: "London Park"
|
purchasing:'组织d',
|
||||||
},{
|
purchasingGroup:"ss",
|
||||||
key: "11",
|
voucherDate:"2019年02月14日",
|
||||||
name: "John Brown",
|
approvalState_name:"未审批",
|
||||||
age: 32,
|
confirmState_name:"待确认",
|
||||||
address: "New York Park"
|
closeState_name:"未关闭",
|
||||||
|
key: "5"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "12",
|
orderCode:"NU0391030",
|
||||||
name: "Jim Green",
|
supplierName: "xx供应商",
|
||||||
age: 40,
|
type_name: "1",
|
||||||
address: "London Park"
|
purchasing:'组织e',
|
||||||
|
purchasingGroup:"zz",
|
||||||
|
voucherDate:"2019年02月18日",
|
||||||
|
approvalState_name:"已审批",
|
||||||
|
confirmState_name:"终止",
|
||||||
|
closeState_name:"已关闭",
|
||||||
|
key: "6"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "13",
|
orderCode:"NU0391031",
|
||||||
name: "Jim Green",
|
supplierName: "xx供应商",
|
||||||
age: 40,
|
type_name: "2",
|
||||||
address: "London Park"
|
purchasing:'组织f',
|
||||||
|
purchasingGroup:"qq",
|
||||||
|
voucherDate:"2019年01月01日",
|
||||||
|
approvalState_name:"已审批",
|
||||||
|
confirmState_name:"执行中",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderCode:"NU0391032",
|
||||||
|
supplierName: "xx供应商",
|
||||||
|
type_name: "3",
|
||||||
|
purchasing:'组织g',
|
||||||
|
purchasingGroup:"pp",
|
||||||
|
voucherDate:"2019年01月31日",
|
||||||
|
approvalState_name:"未审批",
|
||||||
|
confirmState_name:"待确认",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "8"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
key: "14",
|
|
||||||
name: "Jim Green",
|
|
||||||
age: 40,
|
|
||||||
address: "London Park"
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo03 extends Component {
|
class Demo03 extends Component {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 隔行换色
|
* @title 隔行换色
|
||||||
|
* @parent 基础 Basic
|
||||||
* @description 可自定义斑马线颜色
|
* @description 可自定义斑马线颜色
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -11,13 +12,13 @@ import Table from '../../src';
|
||||||
|
|
||||||
const columns04 = [
|
const columns04 = [
|
||||||
{
|
{
|
||||||
title: "Full Name",
|
title: "员工姓名",
|
||||||
width: 100,
|
width: 100,
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name"
|
key: "name"
|
||||||
},
|
},
|
||||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
{ title: "年龄", width: 100, dataIndex: "age", key: "age"},
|
||||||
{ title: "Address", dataIndex: "address", key: "1" }
|
{ title: "住址", dataIndex: "address", key: "1" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const data04 = [
|
const data04 = [
|
||||||
|
|
@ -72,7 +73,10 @@ const data04 = [
|
||||||
|
|
||||||
class Demo04 extends Component {
|
class Demo04 extends Component {
|
||||||
render() {
|
render() {
|
||||||
return <Table className="demo04" columns={columns04} data={data04} />;
|
return <Table
|
||||||
|
className="demo04"
|
||||||
|
columns={columns04}
|
||||||
|
data={data04} />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,26 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 表格 Loading 加载
|
* @title 表格 Loading 加载
|
||||||
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
|
* @parent 基础 Basic
|
||||||
|
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
import {Button,Popconfirm} from "tinper-bee";
|
import {Button,Tooltip} from "tinper-bee";
|
||||||
|
|
||||||
const columns05 = [
|
const columns05 = [
|
||||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||||
{
|
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||||
title: "操作",
|
|
||||||
dataIndex: "d",
|
|
||||||
key: "d",
|
|
||||||
render(text, record, index) {
|
|
||||||
return (
|
|
||||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
|
||||||
<a href="javascript:;">
|
|
||||||
一些操作
|
|
||||||
</a>
|
|
||||||
</Popconfirm>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const data05 = [
|
const data05 = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo05 extends Component {
|
class Demo05 extends Component {
|
||||||
|
|
@ -59,8 +47,6 @@ class Demo05 extends Component {
|
||||||
<Table
|
<Table
|
||||||
columns={columns05}
|
columns={columns05}
|
||||||
data={data05}
|
data={data05}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
|
||||||
// loading={this.state.loading}或者是boolean
|
// loading={this.state.loading}或者是boolean
|
||||||
loading={{show:this.state.loading}}
|
loading={{show:this.state.loading}}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 嵌套子表格
|
* @title 嵌套子表格
|
||||||
|
* @parent 扩展行 Expanded Row
|
||||||
* @description 通过expandedRowRender参数来实现子表格
|
* @description 通过expandedRowRender参数来实现子表格
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -118,8 +119,6 @@ class Demo16 extends Component {
|
||||||
scroll={{x:true}}
|
scroll={{x:true}}
|
||||||
dragborder={true}
|
dragborder={true}
|
||||||
draggable={true}
|
draggable={true}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 层级树型展示
|
* @title 树型表格数据展示
|
||||||
|
* @parent 扩展行 Expanded Row
|
||||||
* @description 通过在data中配置children数据，来自动生成树形表格
|
* @description 通过在data中配置children数据，来自动生成树形表格
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 选中行颜色、自定义表格标题和表尾
|
* @title 选中行颜色、自定义表格标题和表尾
|
||||||
* @description
|
* @parent 扩展行 Expanded Row
|
||||||
|
* @description 选中行的样式可自定义
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,74 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 自定义行高
|
* @title 紧凑型、宽松型
|
||||||
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
|
* @parent 扩展行 Expanded Row
|
||||||
|
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import {Button,Tooltip} from "tinper-bee";
|
import {Button,Tooltip,Tag} from "tinper-bee";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
|
||||||
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
||||||
fixed:'left',
|
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
||||||
render: (text, record, index) => {
|
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
||||||
return (
|
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
||||||
<Tooltip inverse overlay={text}>
|
{ title: "单据状态", dataIndex: "status", key: "status", width: 100 },
|
||||||
<span tootip={text} style={{
|
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
||||||
display: "inline-block",
|
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
||||||
width: "60px",
|
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
|
||||||
textOverflow: "ellipsis",
|
|
||||||
overflow: "hidden",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
verticalAlign: "middle",
|
|
||||||
}}>{text}</span>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
{
|
||||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
orderNum: "NU0391025",
|
||||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
org: "用友网络科技股份有限公司",
|
||||||
|
supplier: "xx供应商",
|
||||||
|
orderDate: '2018年03月18日',
|
||||||
|
quantity: '100.00',
|
||||||
|
status: '错误',
|
||||||
|
submitter: '小张',
|
||||||
|
unit: 'pc',
|
||||||
|
sum:'8,487.00',
|
||||||
|
key: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderNum: "NU0391026",
|
||||||
|
org: "用友网络科技股份有限公司",
|
||||||
|
supplier: "xx供应商",
|
||||||
|
orderDate: '2018年02月05日',
|
||||||
|
quantity: '91.00',
|
||||||
|
status: '正常',
|
||||||
|
submitter: '小红',
|
||||||
|
unit: 'pc',
|
||||||
|
sum:'675.00',
|
||||||
|
key: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderNum: "NU0391027",
|
||||||
|
org: "用友网络科技股份有限公司",
|
||||||
|
supplier: "xx供应商",
|
||||||
|
orderDate: '2018年07月01日',
|
||||||
|
quantity: '98.00',
|
||||||
|
status: '异常',
|
||||||
|
submitter: '小李',
|
||||||
|
unit: 'pc',
|
||||||
|
sum:'1,531.00',
|
||||||
|
key: "3"
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo1 extends Component {
|
class Demo1 extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
data: data,
|
|
||||||
selectedRowIndex: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handleClick = () => {
|
|
||||||
console.log('这是第' , this.currentIndex , '行');
|
|
||||||
console.log('内容：' , this.currentRecord);
|
|
||||||
}
|
|
||||||
|
|
||||||
onRowHover=(index,record)=>{
|
|
||||||
this.currentIndex = index;
|
|
||||||
this.currentRecord = record;
|
|
||||||
}
|
|
||||||
|
|
||||||
getHoverContent=()=>{
|
|
||||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
<Table
|
<h5>紧凑型表格</h5>
|
||||||
columns={columns}
|
<Table columns={columns} data={data} size="sm" />
|
||||||
data={data}
|
<h5>宽松型表格</h5>
|
||||||
parentNodeId='parent'
|
<Table columns={columns} data={data} size="lg" />
|
||||||
height={40}
|
</div>
|
||||||
headerHeight={40}
|
|
||||||
hoverContent={this.getHoverContent}
|
|
||||||
onRowHover={this.onRowHover}
|
|
||||||
onRowClick={(record, index, indent) => {
|
|
||||||
this.setState({
|
|
||||||
selectedRowIndex: index
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,122 +1,87 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 自定义行、列合并
|
* @title 自定义行高
|
||||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
* @parent 扩展行 Expanded Row
|
||||||
*
|
* @description 设置`height`属性自定义表格行高，设置`headerHeight`属性自定义表头高度。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
|
import {Button,Tooltip} from "tinper-bee";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const renderContent = (value, row, index) => {
|
const columns = [
|
||||||
const obj = {
|
{
|
||||||
children: value,
|
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||||
props: {},
|
fixed:'left',
|
||||||
};
|
render: (text, record, index) => {
|
||||||
if (index === 4) {
|
return (
|
||||||
obj.props.colSpan = 0;
|
<Tooltip inverse overlay={text}>
|
||||||
|
<span tootip={text} style={{
|
||||||
|
display: "inline-block",
|
||||||
|
width: "60px",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
verticalAlign: "middle",
|
||||||
|
}}>{text}</span>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||||
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
|
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
|
];
|
||||||
|
|
||||||
|
class Demo1 extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: data,
|
||||||
|
selectedRowIndex: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleClick = () => {
|
||||||
|
console.log('这是第' , this.currentIndex , '行');
|
||||||
|
console.log('内容：' , this.currentRecord);
|
||||||
}
|
}
|
||||||
return obj;
|
|
||||||
};
|
|
||||||
|
|
||||||
const columns = [{
|
onRowHover=(index,record)=>{
|
||||||
title: 'Name',
|
this.currentIndex = index;
|
||||||
key: "name",
|
this.currentRecord = record;
|
||||||
dataIndex: 'name',
|
}
|
||||||
render: (text, row, index) => {
|
|
||||||
if (index < 4) {
|
|
||||||
return <a href="#">{text}</a>;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
children: <a href="#">{text}</a>,
|
|
||||||
props: {
|
|
||||||
colSpan: 5,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
title: 'Age',
|
|
||||||
key: "Age",
|
|
||||||
dataIndex: 'age',
|
|
||||||
render: renderContent,
|
|
||||||
}, {
|
|
||||||
title: 'Home phone',
|
|
||||||
colSpan: 2,
|
|
||||||
key: "tel",
|
|
||||||
dataIndex: 'tel',
|
|
||||||
render: (value, row, index) => {
|
|
||||||
const obj = {
|
|
||||||
children: value,
|
|
||||||
props: {},
|
|
||||||
};
|
|
||||||
if (index === 2) {
|
|
||||||
obj.props.rowSpan = 2;
|
|
||||||
}
|
|
||||||
if (index === 3) {
|
|
||||||
obj.props.rowSpan = 0;
|
|
||||||
}
|
|
||||||
if (index === 4) {
|
|
||||||
obj.props.colSpan = 0;
|
|
||||||
}
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
title: 'Phone',
|
|
||||||
colSpan: 0,
|
|
||||||
key: "phone",
|
|
||||||
dataIndex: 'phone',
|
|
||||||
render: renderContent,
|
|
||||||
}, {
|
|
||||||
title: 'Address',
|
|
||||||
key: "address",
|
|
||||||
dataIndex: 'address',
|
|
||||||
render: renderContent,
|
|
||||||
}];
|
|
||||||
|
|
||||||
const data = [{
|
getHoverContent=()=>{
|
||||||
key: '1',
|
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||||
name: 'John Brown',
|
}
|
||||||
age: 32,
|
|
||||||
tel: '0571-22098909',
|
|
||||||
phone: 18889898989,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
}, {
|
|
||||||
key: '2',
|
|
||||||
name: 'Jim Green',
|
|
||||||
tel: '0571-22098333',
|
|
||||||
phone: 18889898888,
|
|
||||||
age: 42,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
}, {
|
|
||||||
key: '3',
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 32,
|
|
||||||
tel: '0575-22098909',
|
|
||||||
phone: 18900010002,
|
|
||||||
address: 'Sidney No. 1 Lake Park',
|
|
||||||
}, {
|
|
||||||
key: '4',
|
|
||||||
name: 'Jim Red',
|
|
||||||
age: 18,
|
|
||||||
tel: '0575-22098909',
|
|
||||||
phone: 18900010002,
|
|
||||||
address: 'London No. 2 Lake Park',
|
|
||||||
}, {
|
|
||||||
key: '5',
|
|
||||||
name: 'Jake White',
|
|
||||||
age: 18,
|
|
||||||
tel: '0575-22098909',
|
|
||||||
phone: 18900010002,
|
|
||||||
address: 'Dublin No. 2 Lake Park',
|
|
||||||
}];
|
|
||||||
|
|
||||||
class Demo15 extends Component {
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table columns={columns} data={data}/>
|
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={data}
|
||||||
|
parentNodeId='parent'
|
||||||
|
height={40}
|
||||||
|
headerHeight={40}
|
||||||
|
hoverContent={this.getHoverContent}
|
||||||
|
onRowHover={this.onRowHover}
|
||||||
|
onRowClick={(record, index, indent) => {
|
||||||
|
this.setState({
|
||||||
|
selectedRowIndex: index
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default Demo1;
|
||||||
export default Demo15;
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 图片在表格中的展示
|
||||||
|
* @parent 扩展行 Expanded Row
|
||||||
|
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import {Button,Tooltip} from "tinper-bee";
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "序号",
|
||||||
|
dataIndex: "index",
|
||||||
|
key: "index",
|
||||||
|
width: 80,
|
||||||
|
render(text, record, index) {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "组织部门",
|
||||||
|
dataIndex: "orgDept",
|
||||||
|
key: "orgDept",
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "设施管理部门",
|
||||||
|
dataIndex: "facilityManageUnit",
|
||||||
|
key: "facilityManageUnit",
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "案卷编号",
|
||||||
|
dataIndex: "docketnum",
|
||||||
|
key: "docketnum",
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "数量",
|
||||||
|
dataIndex: "num",
|
||||||
|
key: "num",
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "首次发现时间",
|
||||||
|
dataIndex: "discoveryTime",
|
||||||
|
key: "discoveryTime",
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "实际修复时间",
|
||||||
|
dataIndex: "repairTime",
|
||||||
|
key: "repairTime",
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "图样",
|
||||||
|
dataIndex: "picture",
|
||||||
|
key: "picture",
|
||||||
|
render(text, record, index) {
|
||||||
|
return <img style={{height:'50px'}} src={text} alt="Picture"/>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
|
||||||
|
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
|
||||||
|
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
|
||||||
|
];
|
||||||
|
|
||||||
|
class Demo105 extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: data,
|
||||||
|
selectedRowIndex: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleClick = () => {
|
||||||
|
console.log('这是第' , this.currentIndex , '行');
|
||||||
|
console.log('内容：' , this.currentRecord);
|
||||||
|
}
|
||||||
|
|
||||||
|
onRowHover=(index,record)=>{
|
||||||
|
this.currentIndex = index;
|
||||||
|
this.currentRecord = record;
|
||||||
|
}
|
||||||
|
|
||||||
|
getHoverContent=()=>{
|
||||||
|
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={data}
|
||||||
|
parentNodeId='parent'
|
||||||
|
hoverContent={this.getHoverContent}
|
||||||
|
onRowHover={this.onRowHover}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo105;
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 自定义行、列合并
|
||||||
|
* @parent 扩展行 Expanded Row
|
||||||
|
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const renderContent = (value, row, index) => {
|
||||||
|
const obj = {
|
||||||
|
children: value,
|
||||||
|
props: {},
|
||||||
|
};
|
||||||
|
if (index === 4) {
|
||||||
|
obj.props.colSpan = 0;
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [{
|
||||||
|
title: 'Name',
|
||||||
|
key: "name",
|
||||||
|
dataIndex: 'name',
|
||||||
|
render: (text, row, index) => {
|
||||||
|
if (index < 4) {
|
||||||
|
return <a href="#">{text}</a>;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
children: <a href="#">{text}</a>,
|
||||||
|
props: {
|
||||||
|
colSpan: 5,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
title: 'Age',
|
||||||
|
key: "Age",
|
||||||
|
dataIndex: 'age',
|
||||||
|
render: renderContent,
|
||||||
|
}, {
|
||||||
|
title: 'Home phone',
|
||||||
|
colSpan: 2,
|
||||||
|
key: "tel",
|
||||||
|
dataIndex: 'tel',
|
||||||
|
render: (value, row, index) => {
|
||||||
|
const obj = {
|
||||||
|
children: value,
|
||||||
|
props: {},
|
||||||
|
};
|
||||||
|
if (index === 2) {
|
||||||
|
obj.props.rowSpan = 2;
|
||||||
|
}
|
||||||
|
if (index === 3) {
|
||||||
|
obj.props.rowSpan = 0;
|
||||||
|
}
|
||||||
|
if (index === 4) {
|
||||||
|
obj.props.colSpan = 0;
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
title: 'Phone',
|
||||||
|
colSpan: 0,
|
||||||
|
key: "phone",
|
||||||
|
dataIndex: 'phone',
|
||||||
|
render: renderContent,
|
||||||
|
}, {
|
||||||
|
title: 'Address',
|
||||||
|
key: "address",
|
||||||
|
dataIndex: 'address',
|
||||||
|
render: renderContent,
|
||||||
|
}];
|
||||||
|
|
||||||
|
const data = [{
|
||||||
|
key: '1',
|
||||||
|
name: 'John Brown',
|
||||||
|
age: 32,
|
||||||
|
tel: '0571-22098909',
|
||||||
|
phone: 18889898989,
|
||||||
|
address: 'New York No. 1 Lake Park',
|
||||||
|
}, {
|
||||||
|
key: '2',
|
||||||
|
name: 'Jim Green',
|
||||||
|
tel: '0571-22098333',
|
||||||
|
phone: 18889898888,
|
||||||
|
age: 42,
|
||||||
|
address: 'London No. 1 Lake Park',
|
||||||
|
}, {
|
||||||
|
key: '3',
|
||||||
|
name: 'Joe Black',
|
||||||
|
age: 32,
|
||||||
|
tel: '0575-22098909',
|
||||||
|
phone: 18900010002,
|
||||||
|
address: 'Sidney No. 1 Lake Park',
|
||||||
|
}, {
|
||||||
|
key: '4',
|
||||||
|
name: 'Jim Red',
|
||||||
|
age: 18,
|
||||||
|
tel: '0575-22098909',
|
||||||
|
phone: 18900010002,
|
||||||
|
address: 'London No. 2 Lake Park',
|
||||||
|
}, {
|
||||||
|
key: '5',
|
||||||
|
name: 'Jake White',
|
||||||
|
age: 18,
|
||||||
|
tel: '0575-22098909',
|
||||||
|
phone: 18900010002,
|
||||||
|
address: 'Dublin No. 2 Lake Park',
|
||||||
|
}];
|
||||||
|
|
||||||
|
class Demo15 extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table columns={columns} data={data}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Demo15;
|
||||||
|
|
@ -1,24 +1,28 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 横向滚动条
|
* @title 横向滚动条
|
||||||
|
* @parent 滚动 Scroll View
|
||||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns11 = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: "序号",
|
title: "序号",
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
key: "index",
|
key: "index",
|
||||||
width: 200,
|
width: 100,
|
||||||
|
render(text, record, index) {
|
||||||
|
return index + 1;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "订单编号",
|
title: "订单编号",
|
||||||
dataIndex: "orderCode",
|
dataIndex: "orderCode",
|
||||||
key: "orderCode",
|
key: "orderCode",
|
||||||
width: 200,
|
width: 300,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "供应商名称",
|
title: "供应商名称",
|
||||||
|
|
@ -42,14 +46,13 @@ const columns11 = [
|
||||||
title: "采购组",
|
title: "采购组",
|
||||||
dataIndex: "purchasingGroup",
|
dataIndex: "purchasingGroup",
|
||||||
key: "purchasingGroup",
|
key: "purchasingGroup",
|
||||||
width: 300
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "凭证日期",
|
title: "凭证日期",
|
||||||
dataIndex: "voucherDate",
|
dataIndex: "voucherDate",
|
||||||
key: "voucherDate",
|
key: "voucherDate",
|
||||||
width: 200,
|
width: 300,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "审批状态",
|
title: "审批状态",
|
||||||
|
|
@ -67,71 +70,77 @@ const columns11 = [
|
||||||
title: "关闭状态",
|
title: "关闭状态",
|
||||||
dataIndex: "closeState_name",
|
dataIndex: "closeState_name",
|
||||||
key: "closeState_name",
|
key: "closeState_name",
|
||||||
width: 200
|
width: 100
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data11 = [
|
const data = [
|
||||||
{
|
{
|
||||||
index: 1,
|
orderCode:"NU0391025",
|
||||||
orderCode:"2343",
|
supplierName: "xx供应商",
|
||||||
supplierName: "xxx",
|
type_name: "1",
|
||||||
type_name: "123",
|
purchasing:'组织c',
|
||||||
purchasing:'内行',
|
purchasingGroup:"aa",
|
||||||
purchasingGroup:"323",
|
voucherDate:"2018年03月18日",
|
||||||
voucherDate:"kkkk",
|
approvalState_name:"已审批",
|
||||||
approvalState_name:"vvvv",
|
confirmState_name:"执行中",
|
||||||
confirmState_name:"aaaa",
|
closeState_name:"未关闭",
|
||||||
closeState_name:"vnnnnn",
|
key: "1"
|
||||||
key: "1"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 2,
|
orderCode:"NU0391026",
|
||||||
_checked:true,
|
supplierName: "xx供应商",
|
||||||
orderCode:"222",
|
type_name: "2",
|
||||||
supplierName: "22xxx",
|
purchasing:'组织a',
|
||||||
type_name: "1223",
|
purchasingGroup:"bb",
|
||||||
purchasing:'内行2',
|
voucherDate:"2018年02月05日",
|
||||||
purchasingGroup:"3223",
|
approvalState_name:"已审批",
|
||||||
voucherDate:"222kk",
|
confirmState_name:"待确认",
|
||||||
approvalState_name:"22vvvv",
|
closeState_name:"未关闭",
|
||||||
confirmState_name:"2aaaa",
|
|
||||||
closeState_name:"2vnnnnn",
|
|
||||||
key: "2"
|
key: "2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 3,
|
orderCode:"NU0391027",
|
||||||
orderCode:"222",
|
supplierName: "xx供应商",
|
||||||
supplierName: "22xxx",
|
type_name: "3",
|
||||||
_disabled:true,
|
purchasing:'组织b',
|
||||||
type_name: "1223",
|
purchasingGroup:"aa",
|
||||||
purchasing:'内行2',
|
voucherDate:"2018年07月01日",
|
||||||
purchasingGroup:"3223",
|
approvalState_name:"已审批",
|
||||||
voucherDate:"222kk",
|
confirmState_name:"终止",
|
||||||
approvalState_name:"22vvvv",
|
closeState_name:"已关闭",
|
||||||
confirmState_name:"2aaaa",
|
|
||||||
closeState_name:"2vnnnnn",
|
|
||||||
key: "3"
|
key: "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 4,
|
orderCode:"NU0391028",
|
||||||
orderCode:"222",
|
supplierName: "xx供应商",
|
||||||
supplierName: "22xxx",
|
type_name: "4",
|
||||||
type_name: "1223",
|
purchasing:'组织c',
|
||||||
purchasing:'内行2',
|
purchasingGroup:"cc",
|
||||||
purchasingGroup:"3223",
|
voucherDate:"2019年03月01日",
|
||||||
voucherDate:"222kk",
|
approvalState_name:"未审批",
|
||||||
approvalState_name:"22vvvv",
|
confirmState_name:"待确认",
|
||||||
confirmState_name:"2aaaa",
|
closeState_name:"未关闭",
|
||||||
closeState_name:"2vnnnnn",
|
|
||||||
key: "4"
|
key: "4"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
orderCode:"NU0391029",
|
||||||
|
supplierName: "xx供应商",
|
||||||
|
type_name: "5",
|
||||||
|
purchasing:'组织d',
|
||||||
|
purchasingGroup:"ss",
|
||||||
|
voucherDate:"2019年02月14日",
|
||||||
|
approvalState_name:"未审批",
|
||||||
|
confirmState_name:"待确认",
|
||||||
|
closeState_name:"未关闭",
|
||||||
|
key: "5"
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo11 extends Component {
|
class Demo11 extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table columns={columns11} data={data11} scroll={{x:true}} />
|
<Table columns={columns} data={data} scroll={{ x:true }} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 纵向滚动条
|
* @title 纵向滚动条
|
||||||
|
* @parent 滚动 Scroll View
|
||||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多选表格
|
* @title 多选表格
|
||||||
|
* @parent 行操作-选择
|
||||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
|
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 滚动加载
|
* @title 万行以上数据渲染
|
||||||
|
* @parent 无限滚动 Infinite-scroll
|
||||||
* @description 万行数据渲染
|
* @description 万行数据渲染
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -13,7 +14,7 @@ const columns = [
|
||||||
{
|
{
|
||||||
title:'序号',
|
title:'序号',
|
||||||
dataIndex:'index',
|
dataIndex:'index',
|
||||||
width:'50',
|
width:'60',
|
||||||
key:'index',
|
key:'index',
|
||||||
render:(text,record,index)=>{
|
render:(text,record,index)=>{
|
||||||
return index
|
return index
|
||||||
|
|
@ -66,7 +67,6 @@ class Demo30 extends Component {
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
scroll={{y:300}}
|
scroll={{y:300}}
|
||||||
height={40}
|
|
||||||
onRowClick={(record, index, indent) => {
|
onRowClick={(record, index, indent) => {
|
||||||
console.log('currentIndex--'+index);
|
console.log('currentIndex--'+index);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 嵌套子表格滚动加载
|
* @title 嵌套子表格滚动加载
|
||||||
|
* @parent 无限滚动 Infinite-scroll
|
||||||
* @description 通过expandedRowRender参数来实现子表格
|
* @description 通过expandedRowRender参数来实现子表格
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -131,8 +132,6 @@ class Demo31 extends Component {
|
||||||
expandedRowRender={this.expandedRowRender}
|
expandedRowRender={this.expandedRowRender}
|
||||||
scroll={{y:350}}
|
scroll={{y:350}}
|
||||||
// defaultExpandedRowKeys={[0,1]}
|
// defaultExpandedRowKeys={[0,1]}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多功能表格滚动加载
|
* @title 多功能表格滚动加载
|
||||||
|
* @parent 无限滚动 Infinite-scroll
|
||||||
* @description
|
* @description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -17,7 +18,7 @@ const columns = [
|
||||||
{
|
{
|
||||||
title:'序号',
|
title:'序号',
|
||||||
dataIndex:'index',
|
dataIndex:'index',
|
||||||
width:'50',
|
width:'80',
|
||||||
key:'index',
|
key:'index',
|
||||||
render:(text,record,index)=>{
|
render:(text,record,index)=>{
|
||||||
return index
|
return index
|
||||||
|
|
@ -73,7 +74,6 @@ class Demo32 extends Component {
|
||||||
data={data}
|
data={data}
|
||||||
parentNodeId='parent'
|
parentNodeId='parent'
|
||||||
scroll={{y:300}}
|
scroll={{y:300}}
|
||||||
height={40}
|
|
||||||
bordered
|
bordered
|
||||||
onRowClick={(record, index, indent) => {
|
onRowClick={(record, index, indent) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
* @title 层级树大数据场景
|
||||||
* @title 树状表滚动加载
|
* @parent 无限滚动 Infinite-scroll
|
||||||
* 【Tooltip】
|
|
||||||
* @description
|
* @description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import {Tooltip} from "tinper-bee";
|
import {Tooltip} from "tinper-bee";
|
||||||
|
|
||||||
|
|
@ -82,7 +80,7 @@ class Demo34 extends Component {
|
||||||
data={data}
|
data={data}
|
||||||
parentNodeId='parent'
|
parentNodeId='parent'
|
||||||
scroll={{y:300}}
|
scroll={{y:300}}
|
||||||
height={40}
|
onExpand={this.onExpand}
|
||||||
onRowClick={(record, index, indent) => {
|
onRowClick={(record, index, indent) => {
|
||||||
console.log('currentIndex--'+index);
|
console.log('currentIndex--'+index);
|
||||||
}}
|
}}
|
||||||
|
|
@ -93,4 +91,4 @@ class Demo34 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo34;
|
export default Demo34;
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
*
|
|
||||||
* @title 表格+分页
|
* @title 表格+分页
|
||||||
|
* @parent 分页 Pagination
|
||||||
* @description 点击分页联动表格
|
* @description 点击分页联动表格
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 表格+搜索
|
* @title 表格+搜索
|
||||||
|
* @parent 搜索 search
|
||||||
* @description 搜索刷新表格数据
|
* @description 搜索刷新表格数据
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @title 主子表
|
|
||||||
* @description 点击主表行，子表联动切换
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { Component } from "react";
|
|
||||||
import Table from "../../src";
|
|
||||||
|
|
||||||
const columns7 = [
|
|
||||||
{ title: "班级", dataIndex: "a", key: "a" },
|
|
||||||
{ title: "人数", dataIndex: "b", key: "b" },
|
|
||||||
{ title: "班主任", dataIndex: "c", key: "c" },
|
|
||||||
{
|
|
||||||
title: "武功级别",
|
|
||||||
dataIndex: "d",
|
|
||||||
key: "d"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const data7 = [
|
|
||||||
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
|
|
||||||
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
|
|
||||||
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
|
|
||||||
];
|
|
||||||
|
|
||||||
const columns7_1 = [
|
|
||||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
|
||||||
{ title: "班级", dataIndex: "b", key: "b" },
|
|
||||||
{ title: "系别", dataIndex: "c", key: "c" }
|
|
||||||
];
|
|
||||||
|
|
||||||
class Demo7 extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
children_data: [],
|
|
||||||
selectedRowIndex: -1
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
rowclick = (record, index) => {
|
|
||||||
if (record.a === "02级一班") {
|
|
||||||
this.setState({
|
|
||||||
children_data: [
|
|
||||||
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
|
|
||||||
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
|
|
||||||
],
|
|
||||||
selectedRowIndex: index
|
|
||||||
});
|
|
||||||
} else if (record.a === "03级二班") {
|
|
||||||
this.setState({
|
|
||||||
children_data: [
|
|
||||||
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
|
|
||||||
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
|
|
||||||
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
|
|
||||||
],
|
|
||||||
selectedRowIndex: index
|
|
||||||
});
|
|
||||||
} else if (record.a === "05级三班") {
|
|
||||||
this.setState({
|
|
||||||
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }],
|
|
||||||
selectedRowIndex: index
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Table
|
|
||||||
columns={columns7}
|
|
||||||
data={data7}
|
|
||||||
onRowClick={this.rowclick}
|
|
||||||
rowClassName={(record,index,indent)=>{
|
|
||||||
if (this.state.selectedRowIndex == index) {
|
|
||||||
return 'selected';
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
title={currentData => <div>标题: 我是主表</div>}
|
|
||||||
/>
|
|
||||||
<Table
|
|
||||||
style={{ marginTop: 40 }}
|
|
||||||
columns={columns7_1}
|
|
||||||
data={this.state.children_data}
|
|
||||||
title={currentData => <div>标题: 我是子表</div>}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Demo7;
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 渲染本地数据
|
||||||
|
* @parent 数据操作 Data Opetation
|
||||||
|
* @description 可自定义页头和页脚。
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import {Button,Tooltip} from "tinper-bee";
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||||
|
fixed:'left',
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<Tooltip inverse overlay={text}>
|
||||||
|
<span tootip={text} style={{
|
||||||
|
display: "inline-block",
|
||||||
|
width: "80px",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
verticalAlign: "middle",
|
||||||
|
}}>{text}</span>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||||
|
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||||
|
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||||
|
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||||
|
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||||
|
];
|
||||||
|
class Demo21 extends Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={data}
|
||||||
|
title={currentData => <div>员工信息统计表</div>}
|
||||||
|
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo21;
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 渲染远程数据
|
||||||
|
* @parent 数据操作 Data Opetation
|
||||||
|
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import {Button} from "tinper-bee";
|
||||||
|
import reqwest from 'reqwest';
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const columns = [{
|
||||||
|
title: 'Name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
sorter: true,
|
||||||
|
render: name => `${name.first} ${name.last}`,
|
||||||
|
width: '20%',
|
||||||
|
}, {
|
||||||
|
title: 'Gender',
|
||||||
|
dataIndex: 'gender',
|
||||||
|
filters: [
|
||||||
|
{ text: 'Male', value: 'male' },
|
||||||
|
{ text: 'Female', value: 'female' },
|
||||||
|
],
|
||||||
|
width: '20%',
|
||||||
|
}, {
|
||||||
|
title: 'Email',
|
||||||
|
dataIndex: 'email',
|
||||||
|
}];
|
||||||
|
|
||||||
|
class Demo22 extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: [],
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch = (params = {}) => {
|
||||||
|
console.log('params:', params);
|
||||||
|
this.setState({ loading: true });
|
||||||
|
reqwest({
|
||||||
|
url: 'https://randomuser.me/api',
|
||||||
|
method: 'get',
|
||||||
|
data: {
|
||||||
|
results: 10,
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
type: 'json',
|
||||||
|
}).then((data) => {
|
||||||
|
this.setState({
|
||||||
|
loading: false,
|
||||||
|
data: data.results,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="demo22">
|
||||||
|
<Button className="opt-btns" colors="primary" onClick={() => this.fetch()}>点击加载远程数据</Button>
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={this.state.data}
|
||||||
|
loading={this.state.loading}
|
||||||
|
scroll={{y:200}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo22;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.demo22{
|
||||||
|
.opt-btns{
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多列表头
|
* @title 多列表头
|
||||||
|
* @parent 列渲染 Custom Render
|
||||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||||
*
|
*
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 数据关联
|
||||||
|
* @parent 列渲染 Custom Render
|
||||||
|
* @description 数据行关联自定义菜单显示
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
|
||||||
|
import Table from '../../src';
|
||||||
|
import multiSelect from "../../src/lib/multiSelect";
|
||||||
|
import sort from "../../src/lib/sort";
|
||||||
|
|
||||||
|
const { Item } = Menu;
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
num:"NU0391025",
|
||||||
|
name: "aa",
|
||||||
|
sex: "男",
|
||||||
|
dept:'财务二科',
|
||||||
|
rank:"T1",
|
||||||
|
year:"1",
|
||||||
|
seniority:"1",
|
||||||
|
key: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
num:"NU0391026",
|
||||||
|
name: "bb",
|
||||||
|
sex: "女",
|
||||||
|
dept:'财务一科',
|
||||||
|
rank:"M1",
|
||||||
|
year:"1",
|
||||||
|
seniority:"1",
|
||||||
|
key: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
num:"NU0391027",
|
||||||
|
name: "dd",
|
||||||
|
sex: "女",
|
||||||
|
dept:'财务一科',
|
||||||
|
rank:"T2",
|
||||||
|
year:"2",
|
||||||
|
seniority:"2",
|
||||||
|
key: "3"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||||
|
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||||
|
|
||||||
|
class Demo33 extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
getSelectedDataFunc = data => {
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
onSelect = (item) => {
|
||||||
|
console.log(item);
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const menu1 = (
|
||||||
|
<Menu
|
||||||
|
onSelect={this.onSelect}>
|
||||||
|
<Item key="1">模态弹出</Item>
|
||||||
|
<Item key="2">链接跳转</Item>
|
||||||
|
<Item key="3">打开新页</Item>
|
||||||
|
</Menu>);
|
||||||
|
let columns = [
|
||||||
|
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
overlay={menu1}
|
||||||
|
animation="slide-up"
|
||||||
|
>
|
||||||
|
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
|
||||||
|
</Dropdown>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ title: "员工编号",dataIndex: "num",key: "num",width: 200 },
|
||||||
|
{ title: "员工姓名",dataIndex: "name",key: "name", width: 200},
|
||||||
|
{ title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
|
||||||
|
{ title: "部门",dataIndex: "dept",key: "dept",width: 200},
|
||||||
|
{ title: "职级",dataIndex: "rank",key: "rank",width: 200},
|
||||||
|
{ title: "工龄",dataIndex: "year",key: "year",width: 200},
|
||||||
|
{ title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
|
||||||
|
];
|
||||||
|
return <ComplexTable
|
||||||
|
bordered
|
||||||
|
columns={columns}
|
||||||
|
data={data}
|
||||||
|
multiSelect={{type: "checkbox"}}
|
||||||
|
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo33;
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 合并列后合计
|
* @title 合并列后合计
|
||||||
|
* @parent 列渲染 Custom Render
|
||||||
* @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
* @description 合并标题后的合计,且支持多字段统计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -17,7 +18,7 @@ const columns = [
|
||||||
title: "Name",
|
title: "Name",
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name",
|
key: "name",
|
||||||
width: 100,
|
width: 120,
|
||||||
fixed: "left"
|
fixed: "left"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 编辑态表格
|
* @title 编辑态表格
|
||||||
|
* @parent 编辑 Editor
|
||||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 左侧固定列
|
* @title 左侧固定列
|
||||||
|
* @parent 列操作-锁定 Fixed
|
||||||
* @description 固定列到表格的左侧
|
* @description 固定列到表格的左侧
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 右侧固定列
|
* @title 右侧固定列
|
||||||
|
* @parent 列操作-锁定 Fixed
|
||||||
* @description 固定列到表格的右侧
|
* @description 固定列到表格的右侧
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 动态设置列锁定、解除锁定
|
* @title 动态设置列锁定、解除锁定
|
||||||
* @description 动态设置固、取消固定列
|
* @parent 列操作-锁定 Fixed
|
||||||
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
|
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
@ -11,25 +11,6 @@ import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
const { Item } = Menu;
|
const { Item } = Menu;
|
||||||
// const columns24 = [
|
|
||||||
// {
|
|
||||||
// title: "Full Name",
|
|
||||||
// width: 100,
|
|
||||||
// dataIndex: "name",
|
|
||||||
// key: "name",
|
|
||||||
// fixed: "left",
|
|
||||||
// },
|
|
||||||
// { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
|
||||||
// { title: "Column 1", dataIndex: "address", key: "1" },
|
|
||||||
// { title: "Column 2", dataIndex: "address2", key: "2" },
|
|
||||||
// { title: "Column 3", dataIndex: "address", key: "3" },
|
|
||||||
// { title: "Column 4", dataIndex: "address", key: "4" },
|
|
||||||
// { title: "Column 24", dataIndex: "address", key: "24" },
|
|
||||||
// { title: "Column 6", dataIndex: "address", key: "6" },
|
|
||||||
// { title: "Column 7", dataIndex: "address", key: "7" },
|
|
||||||
// { title: "Column 8", dataIndex: "address", key: "8" }
|
|
||||||
// ];
|
|
||||||
|
|
||||||
|
|
||||||
const columns24 = [
|
const columns24 = [
|
||||||
{
|
{
|
||||||
|
|
@ -74,7 +55,7 @@ const columns24 = [
|
||||||
title: "武功类型",
|
title: "武功类型",
|
||||||
dataIndex: "g",
|
dataIndex: "g",
|
||||||
key: "g",
|
key: "g",
|
||||||
width: 100
|
width: 150
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "师傅",
|
title: "师傅",
|
||||||
|
|
@ -105,27 +86,26 @@ class Demo24 extends Component {
|
||||||
columns:columns24
|
columns:columns24
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onSelect = ({key,item})=>{
|
onSelect = ({key,item})=>{
|
||||||
console.log(`${key} selected`); //获取key
|
console.log(`${key} selected`); //获取key
|
||||||
let currentObject = item.props.data; //获取选中对象的数据
|
let currentObject = item.props.data; //获取选中对象的数据
|
||||||
let {columns} = this.state;
|
let {columns} = this.state;
|
||||||
let fixedCols = [];
|
let fixedCols = [];
|
||||||
let nonColums = [];
|
let nonColums = [];
|
||||||
columns.find(da=>{
|
columns.find(da=>{
|
||||||
if(da.key == key){
|
if(da.key == key){
|
||||||
da.fixed?delete da.fixed:da.fixed = 'left';
|
da.fixed?delete da.fixed:da.fixed = 'left';
|
||||||
}
|
}
|
||||||
da.fixed?fixedCols.push(da):nonColums.push(da);
|
da.fixed?fixedCols.push(da):nonColums.push(da);
|
||||||
});
|
});
|
||||||
|
|
||||||
columns = [...fixedCols,...nonColums]
|
columns = [...fixedCols,...nonColums]
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
columns
|
columns
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//表头增加下拉菜单
|
//表头增加下拉菜单
|
||||||
renderColumnsDropdown(columns) {
|
renderColumnsDropdown(columns) {
|
||||||
const icon ='uf-arrow-down';
|
const icon ='uf-arrow-down';
|
||||||
|
|
@ -166,10 +146,12 @@ class Demo24 extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let {columns} = this.state;
|
let {columns} = this.state;
|
||||||
columns = this.renderColumnsDropdown(columns);
|
columns = this.renderColumnsDropdown(columns);
|
||||||
return <div className="demo24">
|
return(
|
||||||
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
|
<div className="demo24">
|
||||||
</div>;
|
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 按条件、值过滤
|
* @title 按条件、值过滤
|
||||||
|
* @parent 列操作-过滤 Filter
|
||||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 复杂表格中行过滤
|
* @title 复杂表格中行过滤
|
||||||
|
* @parent 列操作-过滤 Filter
|
||||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 列过滤面板
|
* @title 列过滤面板
|
||||||
|
* @parent 列操作-隐藏 Hide
|
||||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
@ -55,22 +56,6 @@ class Demo21 extends Component {
|
||||||
title: "武功级别",
|
title: "武功级别",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
key: "d"
|
key: "d"
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
dataIndex: "e",
|
|
||||||
key: "e",
|
|
||||||
render(text, record, index){
|
|
||||||
return (
|
|
||||||
<div title={text} >
|
|
||||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
|
||||||
<a href="javascript:;" tooltip={text} >
|
|
||||||
一些操作
|
|
||||||
</a>
|
|
||||||
</Popconfirm>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]};
|
]};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* @title 列排序
|
* @title 列排序
|
||||||
|
* @parent 列操作-排序 Sort
|
||||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* @title 后端列排序
|
* @title 后端列排序
|
||||||
*
|
* @parent 列操作-排序 Sort
|
||||||
|
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多列排序
|
* @title 多列排序
|
||||||
|
* @parent 列操作-排序 Sort
|
||||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 拖拽改变列顺序
|
* @title 拖拽改变列顺序
|
||||||
|
* @parent 列操作-拖拽 Drag
|
||||||
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
|
* @description 点击列的表头，进行左右拖拽，注意：固定列不可以交换
|
||||||
*/
|
*/
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 拖拽改变列宽度
|
* @title 拖拽改变列宽度
|
||||||
|
* @parent 列操作-拖拽 Drag
|
||||||
* @description 注：不支持tree结构的表头、合并表头的table
|
* @description 注：不支持tree结构的表头、合并表头的table
|
||||||
*/
|
*/
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
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
|
|
@ -45,7 +45,7 @@ import 'bee-table/build/Table.css';
|
||||||
| title | 表格标题 | Function | - |
|
| title | 表格标题 | Function | - |
|
||||||
| footer | 表格尾部 | Function | - |
|
| footer | 表格尾部 | Function | - |
|
||||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
|
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度 | ` { x: number | true | 百分比 , y: number }` | {} |
|
||||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||||
|
|
@ -66,6 +66,9 @@ import 'bee-table/build/Table.css';
|
||||||
| hoverContent | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function|
|
| hoverContent | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function|
|
||||||
| onRowHover | 行hover时的回调函数 | Function|
|
| onRowHover | 行hover时的回调函数 | Function|
|
||||||
| heightConsistent | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容 可以显示成省略号 | bool|false
|
| heightConsistent | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容 可以显示成省略号 | bool|false
|
||||||
|
| height | 自定义表格行高 | number | - |
|
||||||
|
| headerHeight | 自定义表头行高 | number | - |
|
||||||
|
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||||
|
|
||||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,9 @@
|
||||||
"bee-clipboard": "^2.0.0",
|
"bee-clipboard": "^2.0.0",
|
||||||
"bee-drawer": "0.0.2",
|
"bee-drawer": "0.0.2",
|
||||||
"bee-layout": "latest",
|
"bee-layout": "latest",
|
||||||
|
"bee-pagination": "^2.0.5",
|
||||||
"bee-panel": "latest",
|
"bee-panel": "latest",
|
||||||
|
"bee-popover": "^2.0.0",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"console-polyfill": "~0.2.1",
|
"console-polyfill": "~0.2.1",
|
||||||
"cz-conventional-changelog": "^2.1.0",
|
"cz-conventional-changelog": "^2.1.0",
|
||||||
|
|
@ -86,8 +88,7 @@
|
||||||
"react": "^16.6.3",
|
"react": "^16.6.3",
|
||||||
"react-addons-test-utils": "^15.5.0",
|
"react-addons-test-utils": "^15.5.0",
|
||||||
"react-dom": "^16.6.3",
|
"react-dom": "^16.6.3",
|
||||||
"tinper-bee": "latest",
|
"reqwest": "^2.0.5",
|
||||||
"bee-pagination": "^2.0.5",
|
"tinper-bee": "latest"
|
||||||
"bee-popover": "^2.0.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
15
src/Table.js
15
src/Table.js
|
|
@ -51,7 +51,8 @@ const propTypes = {
|
||||||
onFilterClear: PropTypes.func,
|
onFilterClear: PropTypes.func,
|
||||||
syncHover: PropTypes.bool,
|
syncHover: PropTypes.bool,
|
||||||
tabIndex:PropTypes.string,
|
tabIndex:PropTypes.string,
|
||||||
hoverContent:PropTypes.func
|
hoverContent:PropTypes.func,
|
||||||
|
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
|
@ -85,7 +86,8 @@ const defaultProps = {
|
||||||
setRowHeight:()=>{},
|
setRowHeight:()=>{},
|
||||||
setRowParentIndex:()=>{},
|
setRowParentIndex:()=>{},
|
||||||
tabIndex:'0',
|
tabIndex:'0',
|
||||||
heightConsistent:false
|
heightConsistent:false,
|
||||||
|
size: 'md'
|
||||||
};
|
};
|
||||||
|
|
||||||
class Table extends Component {
|
class Table extends Component {
|
||||||
|
|
@ -158,7 +160,7 @@ class Table extends Component {
|
||||||
if (this.columnManager.isAnyColumnsFixed()) {
|
if (this.columnManager.isAnyColumnsFixed()) {
|
||||||
this.syncFixedTableRowHeight();
|
this.syncFixedTableRowHeight();
|
||||||
this.resizeEvent = addEventListener(
|
this.resizeEvent = addEventListener(
|
||||||
window, 'resize', debounce(this.syncFixedTableRowHeight, 150)
|
window, 'resize', this.resize
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -231,6 +233,10 @@ class Table extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resize(){
|
||||||
|
debounce(this.syncFixedTableRowHeight, 150);
|
||||||
|
this.computeTableWidth();
|
||||||
|
}
|
||||||
computeTableWidth() {
|
computeTableWidth() {
|
||||||
|
|
||||||
//如果用户传了scroll.x按用户传的为主
|
//如果用户传了scroll.x按用户传的为主
|
||||||
|
|
@ -1198,6 +1204,9 @@ class Table extends Component {
|
||||||
show: loading,
|
show: loading,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
if (props.size) {
|
||||||
|
className += ` ${clsPrefix}-${props.size}`;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,23 @@
|
||||||
|
|
||||||
$text-color: $font-color-base;
|
$text-color: $font-color-base;
|
||||||
$font-size-base: 12px;
|
$font-size-base: 12px;
|
||||||
$line-height: 1.5;
|
$line-height: 1.33;
|
||||||
// 主题定制border：
|
// 主题定制border：
|
||||||
$table-border-color: unquote("rgb(#{$table-border-color-base})");
|
$table-border-color: unquote("rgb(#{$table-border-color-base})");
|
||||||
// $table-head-background-color: #f7f7f7;
|
// $table-head-background-color: #f7f7f7;
|
||||||
// $table-head-text-color: #666;
|
// $table-head-text-color: #666;
|
||||||
$vertical-padding: 12px;
|
$vertical-padding: 12px;
|
||||||
$horizontal-padding: 8px;
|
$horizontal-padding: 16px;
|
||||||
// $table-border-color: #e9e9e9;
|
// $table-border-color: #e9e9e9;
|
||||||
|
|
||||||
$table-hover-color: #E7F2FC;
|
$table-hover-color: #E7F2FC;
|
||||||
$table-move-in-color: $bg-color-base;
|
$table-move-in-color: $bg-color-base;
|
||||||
$checkbox-height:16px;
|
$checkbox-height:14px;
|
||||||
$table-th-bottom-border:#C1C7D0;
|
$table-th-bottom-border:#C1C7D0;
|
||||||
|
|
||||||
$filter-form-control-height:28px;
|
$filter-form-control-height:26px;
|
||||||
$table-head-font-weight: bold;
|
$table-head-font-weight: bold;
|
||||||
|
$icon-color:#505F79;
|
||||||
.u-table {
|
.u-table {
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
|
@ -51,6 +52,7 @@ $table-head-font-weight: bold;
|
||||||
font-weight: $table-head-font-weight;
|
font-weight: $table-head-font-weight;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
// transition: background 0.3s ease;
|
// transition: background 0.3s ease;
|
||||||
|
line-height: 16px;
|
||||||
&[colspan] {
|
&[colspan] {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -61,6 +63,7 @@ $table-head-font-weight: bold;
|
||||||
|
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid $table-border-color;
|
border-bottom: 1px solid $table-border-color;
|
||||||
|
line-height: $line-height;
|
||||||
a{
|
a{
|
||||||
color: #2196F3;
|
color: #2196F3;
|
||||||
&:hover{
|
&:hover{
|
||||||
|
|
@ -105,6 +108,22 @@ $table-head-font-weight: bold;
|
||||||
td {
|
td {
|
||||||
padding: $vertical-padding $horizontal-padding;
|
padding: $vertical-padding $horizontal-padding;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
&.text-center{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&.text-right{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-sm {
|
||||||
|
td {
|
||||||
|
padding: 8px $horizontal-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-lg {
|
||||||
|
td {
|
||||||
|
padding: 16px $horizontal-padding;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
tr {
|
tr {
|
||||||
|
|
||||||
|
|
@ -115,6 +134,9 @@ $table-head-font-weight: bold;
|
||||||
.filterContext{
|
.filterContext{
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
|
.u-select-selection--single{
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -166,7 +188,7 @@ $table-head-font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fixed-height td {
|
&.fixed-height td {
|
||||||
padding: 0px 8px;
|
padding: 0px $horizontal-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-fixed-header &-body {
|
&-fixed-header &-body {
|
||||||
|
|
@ -389,14 +411,20 @@ $table-head-font-weight: bold;
|
||||||
.bee-table-column-sorter {
|
.bee-table-column-sorter {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
height: 1em;
|
height: 16px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-top: -3px;
|
||||||
|
i{
|
||||||
|
padding: 0px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $icon-color;
|
||||||
|
}
|
||||||
|
|
||||||
& > .bee-table-column-sorter-down,
|
& > .bee-table-column-sorter-down,
|
||||||
& > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
|
& > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
|
||||||
line-height: 6px;
|
line-height: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 34px;
|
width: 34px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -444,6 +472,7 @@ $table-head-font-weight: bold;
|
||||||
}
|
}
|
||||||
.th-drag:hover{
|
.th-drag:hover{
|
||||||
background: $hover-bg-color-base;
|
background: $hover-bg-color-base;
|
||||||
|
|
||||||
}
|
}
|
||||||
//为了区分是拖拽宽度还是交换列，先注释上面了
|
//为了区分是拖拽宽度还是交换列，先注释上面了
|
||||||
// .th-drag:hover{
|
// .th-drag:hover{
|
||||||
|
|
@ -512,17 +541,18 @@ $table-head-font-weight: bold;
|
||||||
}
|
}
|
||||||
&-filter-icon{
|
&-filter-icon{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
width: 30px;
|
||||||
right: 18px;
|
height: 38px ;
|
||||||
width: 22px;
|
line-height: 38px;
|
||||||
height: 25px;
|
right: 12px ;
|
||||||
line-height: 25px;
|
top:1px ;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: $table-head-background-color;
|
background: $table-head-background-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
i.uf{
|
i.uf{
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
color: $icon-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-pop-cont-item{
|
&-pop-cont-item{
|
||||||
|
|
@ -561,6 +591,14 @@ $table-head-font-weight: bold;
|
||||||
height: $checkbox-height;
|
height: $checkbox-height;
|
||||||
line-height: $checkbox-height;
|
line-height: $checkbox-height;
|
||||||
margin:0px;
|
margin:0px;
|
||||||
|
.u-checkbox-label{
|
||||||
|
line-height: $checkbox-height;
|
||||||
|
padding-left: 16px;
|
||||||
|
&:before,&:after {
|
||||||
|
width: $checkbox-height;
|
||||||
|
height: $checkbox-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.u-table:focus{
|
.u-table:focus{
|
||||||
|
|
|
||||||
|
|
@ -390,7 +390,7 @@ export default function bigData(Table) {
|
||||||
if(!_this.props.expandedRowKeys){
|
if(!_this.props.expandedRowKeys){
|
||||||
if(expandState){
|
if(expandState){
|
||||||
expandedRowKeys.push(rowKey);
|
expandedRowKeys.push(rowKey);
|
||||||
|
this.setState({ needRender: !needRender });
|
||||||
}else{
|
}else{
|
||||||
let index = -1;
|
let index = -1;
|
||||||
expandedRowKeys.forEach((r, i) => {
|
expandedRowKeys.forEach((r, i) => {
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export default function multiSelect(Table, Checkbox) {
|
||||||
let count = 0;
|
let count = 0;
|
||||||
let disabledCount = 0;
|
let disabledCount = 0;
|
||||||
data.forEach(da=>{
|
data.forEach(da=>{
|
||||||
if(da._checked){
|
if(da._checked && !da._disabled){
|
||||||
count ++;
|
count ++;
|
||||||
}
|
}
|
||||||
if(da._disabled){
|
if(da._disabled){
|
||||||
|
|
@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
|
||||||
key: "checkbox",
|
key: "checkbox",
|
||||||
dataIndex: "checkbox",
|
dataIndex: "checkbox",
|
||||||
fixed:"left",
|
fixed:"left",
|
||||||
width: 50,
|
width: 60,
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
let attr = {};
|
let attr = {};
|
||||||
record._disabled?attr.disabled = record._disabled:"";
|
record._disabled?attr.disabled = record._disabled:"";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue