提交 4d2ce026 编写于 作者: A afc163

row selection

上级 40bc7e32
# 选择
- order: 1
第一列是联动的选择框。
---
````jsx
````
# 选择
- order: 1
第一列是联动的选择框。
---
````jsx
var Table = antd.Table;
var columns = [{
title: '姓名',
dataIndex: 'name'
}, {
title: '年龄',
dataIndex: 'age'
}, {
title: '住址',
dataIndex: 'address',
render: function(text) {
return <a href="#">{text}</a>;
}
}];
var data = [{
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}, {
name: '李大嘴',
age: 32,
address: '西湖区湖底公园1号'
}];
var rowSelection = {
onSelect: function(record, selected) {
console.log(record, selected);
},
onSelectAll: function(selected) {
console.log(selected);
}
};
React.render(<Table rowSelection={rowSelection} columns={columns} data={data} />
, document.getElementById('components-table-demo-row-selection'));
````
'use strict';
import React from 'react';
import Table from 'rc-table';
let AntTable = React.createClass({
getInitialState() {
return {
selectedRowKeys: []
};
},
getDefaultProps() {
return {
prefixCls: 'ant-table',
useFixedHeader: false
useFixedHeader: false,
rowSelection: null
};
},
handleSelect(e) {
let checked = e.currentTarget.checked;
let currentRowIndex = e.currentTarget.parentElement.parentElement.rowIndex;
let selectedRow = this.props.data[currentRowIndex - 1];
if (checked) {
this.state.selectedRowKeys.push(currentRowIndex);
} else {
this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i){
return currentRowIndex !== i;
});
}
this.setState({
selectedRowKeys: this.state.selectedRowKeys
});
if (this.props.rowSelection.onSelect) {
this.props.rowSelection.onSelect(selectedRow, checked);
}
},
handleSelectAllRow(e) {
let checked = e.currentTarget.checked;
this.setState({
selectedRowKeys: checked ? this.props.data.map(function(item, i) {
return i + 1;
}) : []
});
if (this.props.rowSelection.onSelectAll) {
this.props.rowSelection.onSelectAll(checked);
}
},
renderSelectionCheckBox(value, record, index) {
let checked = this.state.selectedRowKeys.indexOf(index + 1) >= 0;
let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
return checkbox;
},
render() {
if (this.props.rowSelection) {
let checked = this.props.data.every(function(item, i) {
return this.state.selectedRowKeys.indexOf(i + 1) >= 0;
}, this);
let checkboxAll = <input type="checkbox" checked={checked} onChange={this.handleSelectAllRow} />;
let selectionColumn = {
key: 'selection-column',
title: checkboxAll,
render: this.renderSelectionCheckBox
};
if (this.props.columns[0] &&
this.props.columns[0].key === 'selection-column') {
this.props.columns[0] = selectionColumn;
} else {
this.props.columns.unshift(selectionColumn);
}
}
return <Table {...this.props} />;
}
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册