JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

修改示例

This commit is contained in:
yangchch6 2019-04-18 09:50:03 +08:00
parent eecba75cf2
commit fbdceb7545
10 changed files with 1371 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

668
README.md
View File

@ -1,333 +1,335 @@
# bee-table # bee-table
[![npm version](https://img.shields.io/npm/v/bee-table.svg)](https://www.npmjs.com/package/bee-table) [![npm version](https://img.shields.io/npm/v/bee-table.svg)](https://www.npmjs.com/package/bee-table)
[![Build Status](https://img.shields.io/travis/tinper-bee/bee-table/master.svg)](https://travis-ci.org/tinper-bee/bee-table) [![Build Status](https://img.shields.io/travis/tinper-bee/bee-table/master.svg)](https://travis-ci.org/tinper-bee/bee-table)
[![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-table/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-table?branch=master) [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-table/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-table?branch=master)
[![dependencies Status](https://david-dm.org/tinper-bee/bee-table/status.svg)](https://david-dm.org/tinper-bee/bee-table) [![dependencies Status](https://david-dm.org/tinper-bee/bee-table/status.svg)](https://david-dm.org/tinper-bee/bee-table)
[![NPM downloads](http://img.shields.io/npm/dm/bee-table.svg?style=flat)](https://npmjs.org/package/bee-table) [![NPM downloads](http://img.shields.io/npm/dm/bee-table.svg?style=flat)](https://npmjs.org/package/bee-table)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue") [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
[![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open") [![Percentage of issues still open](http://isitmaintained.com/badge/open/tinper-bee/bee-table.svg)](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
react bee-table component for tinper-bee 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>
## 安装 ## 安装
[![bee-table](https://nodei.co/npm/bee-table.png)](https://npmjs.org/package/bee-table) [![bee-table](https://nodei.co/npm/bee-table.png)](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 | - |
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id* > 快捷键部分参考示例 (快捷键在table中的简单使用应用)
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
### Column
|参数|说明|类型|默认值| ### Column
|:--|:---|:--|:---|
|key|列的键|string|-| |参数|说明|类型|默认值|
|className|传入列的classname|String |-| |:--|:---|:--|:---|
|colSpan|该列的colSpan|Number|-| |key|列的键|string|-|
|title|列的标题|node|-| |className|传入列的classname|String |-|
|dataIndex| 显示数据记录的字段|String|-| |colSpan|该列的colSpan|Number|-|
|width|宽度的特定比例根据列的宽度计算|String/Number|-| |title|列的标题|node|-|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-| |dataIndex| 显示数据记录的字段|String|-|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-| |width|宽度的特定比例根据列的宽度计算|String/Number|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据| |render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
| order | 设置排序 | string（"descend"、"ascend"） | - | |onCellClick|单击列的单元格时调用|Function(row, event)|-|
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text | |onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show | | order | 设置排序 | string（"descend"、"ascend"） | - |
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD | | filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto | | filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] | | format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () | | filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string | filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有 | filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null | filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
## 快捷键API | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
| 快捷键 | 快捷键说明 | 类型 | 默认值 | ## 快捷键API
| --- | :--- | --- |--- |
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| - | 快捷键 | 快捷键说明 | 类型 | 默认值 |
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| - | --- | :--- | --- |--- |
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| - | onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
| onTableKeyDown | 触发table的所有快捷键 | function| - | onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
| tabIndex | 设置焦点顺序 | number | 0 | 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) ```
## 如何引用增强功能(multiSelect,sort,sum)
```js
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 |
| _disabled | 禁用当前选中数据 | boolean | true/false
### sort | getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
排序功能 ### sort
#### Column新增参数 排序功能
| 参数 | 说明 | 类型 | 默认值 | #### Column新增参数
| ------ | ---------- | -------- | ---- |
| sorter | 排序函数，可以自定义 | Function | 无 | | 参数 | 说明 | 类型 | 默认值 |
| sorterClick | 排序钩子函数| Function | (coloum,type) | | ------ | ---------- | -------- | ---- |
| sorter | 排序函数，可以自定义 | Function | 无 |
| sorterClick | 排序钩子函数| Function | (coloum,type) |
### sum
合计功能 ### sum
#### Column新增参数 合计功能
| 参数 | 说明 | 类型 | 默认值 | #### Column新增参数
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false | | 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
### filterColumn
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js) ### filterColumn
过滤表头列[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo21.js)
### dragColumn
拖拽表头交换顺序[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo22.js) ### dragColumn
#### 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
## 如何引用 在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等
需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
## 如何引用
```js 需要单独的去引用相应的js文件，目录在render文件夹，示例如下：
import InputRender from "bee-table/render/InputRender.js"
``` ```js
import InputRender from "bee-table/render/InputRender.js"
## 安装依赖包 ```
不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
## 安装依赖包
### InputRender 不同的render会依赖其他组件，因为此类render组件是作为bee-table的插件机制处理的，默认不会去自动下载所依赖的组件，所以在使用之前需要去安装相应的组件。
输入框类型render
### InputRender
#### 依赖的组件 输入框类型render
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
#### 依赖的组件
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save` 该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
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 | 无 | | name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | | placeholder | 输入框的提示信息 | string | - |
| onChange | 当值发生改变的时候触发的方法 | Function | 无 | | value | 输入框中的显示值 | string | 无 |
| format | 浏览态格式化类型，Currency:货币数字; | string | 无 | | isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
| formItemClassName | FormItem的class | string | - | | onChange | 当值发生改变的时候触发的方法 | Function | 无 |
| mesClassName | 校验错误信息的class | string | - | | format | 浏览态格式化类型，Currency:货币数字; | string | 无 |
| isRequire | 是否必填 | bool | false | | formItemClassName | FormItem的class | string | - |
| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - | | mesClassName | 校验错误信息的class | string | - |
| method | 校验方式，change/blur | string | - | | isRequire | 是否必填 | bool | false |
| errorMessage | 错误提示信息 | dom/string | "校验失败" | | check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - | | method | 校验方式，change/blur | string | - |
| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - | | errorMessage | 错误提示信息 | dom/string | "校验失败" |
| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
### DateRender | reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - |
日期类型render
### DateRender
#### 依赖的组件 日期类型render
该render依赖于`bee-icon`,`bee-datepicker`,`moment`
#### 依赖的组件
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save` 该render依赖于`bee-icon`,`bee-datepicker`,`moment`
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
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 |
| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" |
注:其他参数参见bee-datepicker组件参数配置
注:其他参数参见bee-datepicker组件参数配置
### SelectRender
输入框类型render
### SelectRender
#### 依赖的组件 输入框类型render
该render依赖于`bee-icon`,`bee-select`
#### 依赖的组件
1. 下载依赖。例如：`npm install bee-icon -S`或者`npm install bee-icon --save` 该render依赖于`bee-icon`,`bee-select`
2. 引入css文件。**注：如果引入了CSS的cdn资源，即可忽略此步骤。**例如：`import 'bee-icon/build/Icon.css;'`
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 ```sh
$ npm install $ git clone https://github.com/tinper-bee/bee-table
$ npm run dev $ cd bee-table
``` $ npm install
$ npm run dev
```

4
demo/demolist/Demo01.js
View File

@ -28,8 +28,8 @@ const columns = [
); );
} }
}, },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500}, { id: "123", title: "性别", dataIndex: "b", key: "b", width: 500, "textAlign":"center"},
{ title: "年龄", dataIndex: "c", key: "c", width: 200 } { title: "年龄", dataIndex: "c", key: "c", width: 200, "textAlign":"center"}
]; ];
const data = [ const data = [

2
demo/demolist/Demo131.js
View File

@ -1,6 +1,6 @@
/** /**
* *
* @title 滚动加载 * @title 无限滚动 Infinite Scroll
* @description 万行数据渲染 * @description 万行数据渲染
*/ */

96
demo/demolist/Demo181.js
View File

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

59
demo/demolist/Demo21.js Normal file
View File

@ -0,0 +1,59 @@
/**
*
* @title 渲染本地数据
* @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: "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 Demo21 extends Component {
constructor(props) {
super(props);
this.state = {
data: data
}
}
render() {
return (
<Table
columns={columns}
data={data}
/>
);
}
}
export default Demo21;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

1078
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/api.md
View File

@ -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,8 @@ 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 | - |
> 快捷键部分参考示例 (快捷键在table中的简单使用应用) > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

6
package.json
View File

@ -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,6 @@
"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", "tinper-bee": "latest"
"bee-pagination": "^2.0.5",
"bee-popover": "^2.0.0"
} }
} }