2016-05-18 15:32:49 +08:00
|
|
|
|
---
|
|
|
|
|
order: 3
|
2016-10-24 11:06:31 +08:00
|
|
|
|
title:
|
2016-08-03 10:10:13 +08:00
|
|
|
|
zh-CN: 自定义渲染行数据
|
|
|
|
|
en-US: Custom datasource
|
2016-05-18 15:32:49 +08:00
|
|
|
|
---
|
|
|
|
|
|
2016-08-03 10:10:13 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
2016-05-18 15:32:49 +08:00
|
|
|
|
自定义渲染每一个 Transfer Item,可用于渲染复杂数据。
|
|
|
|
|
|
2016-10-24 11:06:31 +08:00
|
|
|
|
## en-US
|
2016-08-03 10:10:13 +08:00
|
|
|
|
|
|
|
|
|
Custom each Transfer Item, and in this way you can render a complex datasource.
|
|
|
|
|
|
2017-01-19 15:19:03 +08:00
|
|
|
|
````__react
|
2016-08-10 17:46:36 +08:00
|
|
|
|
import { Transfer } from 'antd';
|
2016-05-18 15:32:49 +08:00
|
|
|
|
|
|
|
|
|
const App = React.createClass({
|
|
|
|
|
getInitialState() {
|
|
|
|
|
return {
|
|
|
|
|
mockData: [],
|
|
|
|
|
targetKeys: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.getMock();
|
|
|
|
|
},
|
|
|
|
|
getMock() {
|
|
|
|
|
const targetKeys = [];
|
|
|
|
|
const mockData = [];
|
|
|
|
|
for (let i = 0; i < 20; i++) {
|
|
|
|
|
const data = {
|
2016-10-24 11:06:31 +08:00
|
|
|
|
key: i.toString(),
|
2016-08-03 10:10:13 +08:00
|
|
|
|
title: `content${i + 1}`,
|
|
|
|
|
description: `description of content${i + 1}`,
|
2016-05-18 15:32:49 +08:00
|
|
|
|
chosen: Math.random() * 2 > 1,
|
|
|
|
|
};
|
|
|
|
|
if (data.chosen) {
|
|
|
|
|
targetKeys.push(data.key);
|
|
|
|
|
}
|
|
|
|
|
mockData.push(data);
|
|
|
|
|
}
|
|
|
|
|
this.setState({ mockData, targetKeys });
|
|
|
|
|
},
|
|
|
|
|
handleChange(targetKeys, direction, moveKeys) {
|
|
|
|
|
console.log(targetKeys, direction, moveKeys);
|
|
|
|
|
this.setState({ targetKeys });
|
|
|
|
|
},
|
|
|
|
|
renderItem(item) {
|
|
|
|
|
const customLabel = (
|
2016-08-10 17:46:36 +08:00
|
|
|
|
<span className="custom-item">
|
|
|
|
|
{item.title} - {item.description}
|
|
|
|
|
</span>
|
2016-05-18 15:32:49 +08:00
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
label: customLabel, // for displayed item
|
|
|
|
|
value: item.title, // for title and filter matching
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<Transfer
|
|
|
|
|
dataSource={this.state.mockData}
|
|
|
|
|
listStyle={{
|
|
|
|
|
width: 300,
|
|
|
|
|
height: 300,
|
|
|
|
|
}}
|
|
|
|
|
targetKeys={this.state.targetKeys}
|
|
|
|
|
onChange={this.handleChange}
|
2016-06-06 13:54:10 +08:00
|
|
|
|
render={this.renderItem}
|
|
|
|
|
/>
|
2016-05-18 15:32:49 +08:00
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
|
|
|
````
|