增加表格行/列合并示例,并增加文档说明

This commit is contained in:
huyueb 2017-11-22 10:07:10 +08:00
parent bc21709d6a
commit 47ea5fafaf
8 changed files with 2773 additions and 1977 deletions

View File

@ -288,14 +288,15 @@ class Demo14 extends React.Component {
type="ghost"
onClick={this.handleAdd}
>
添加
添加一行
</Button>
<Button
style={{marginLeft:"5px"}}
className="editable-add-btn"
type="ghost"
onClick={this.getData}
>
取数
取数
</Button>
<Table
bordered

117
demo/demolist/Demo15.js Normal file
View File

@ -0,0 +1,117 @@
/**
*
* @title 表格行/列合并
* @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',
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',
dataIndex: 'age',
render: renderContent,
}, {
title: 'Home phone',
colSpan: 2,
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,
dataIndex: 'phone',
render: renderContent,
}, {
title: '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;

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

4094
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -52,12 +52,12 @@ import 'bee-table/build/Table.css';
|:--|:---|:--|:---|
|key|列的键|string|-|
|className|传入列的classname|String |-|
|colSpan|该列的colSpan|Number|-|
|colSpan|该列的colSpan,设置列合并|Number|-|
|title|列的标题|node|-|
|dataIndex| 显示数据记录的字段|String|-|
|width|宽度的特定比例根据列的宽度计算|String/Number|-|
|fixed| 当表水平滚动时此列将被固定true或'left'或'right'| true/'left'/'right'|-|
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置|-|
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置,可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|

View File

@ -5,20 +5,22 @@
需要单独的去引用相应的js文件目录在render文件夹示例如下
```js
import InputRender from "bee-table/render/InputRender.js"
import InputRender from "bee-table/build/render/InputRender.js"
```
## 安装依赖包
不同的render会依赖其他组件因为此类render组件是作为bee-table的插件机制处理的默认不会去自动下载所依赖的组件所以在使用之前需要去安装相应的组件。
## 如何下载对应依赖的组件
1. 下载依赖。例如:`npm install bee-icon -S`或者`npm install bee-icon --save`
2. 引入css文件。**注如果引入了CSS的cdn资源即可忽略此步骤。**例如:`import 'bee-icon/build/Icon.css;'`
### InputRender
输入框类型render
#### 依赖的组件
该render依赖于`bee-icon`,`bee-form-control`,`bee-form`,`bee-tooltip`。
1. 下载依赖。例如:`npm install bee-icon -S`或者`npm install bee-icon --save`
2. 引入css文件。**注如果引入了CSS的cdn资源即可忽略此步骤。**例如:`import 'bee-icon/build/Icon.css;'`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
@ -44,8 +46,6 @@ import InputRender from "bee-table/render/InputRender.js"
#### 依赖的组件
该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;'`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
@ -61,8 +61,6 @@ import InputRender from "bee-table/render/InputRender.js"
#### 依赖的组件
该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;'`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |