ant-design/components/table/demo/on-row-click.md

92 lines
1.7 KiB
Markdown
Raw Normal View History

2016-01-11 11:37:36 +08:00
# 行点击事件
- order: 17
2016-01-11 12:09:12 +08:00
- hidden: true
2016-01-11 11:37:36 +08:00
通过传入 `onRowClick` 处理表格行点击事件,函数的两个参数为 `record``index``index` 代表当前行在其兄弟节点中的次序
---
````jsx
import { Table } from 'antd';
const onRowClick = function(record, index) {
alert(`u click the nth(${index}) element of yourFather.children, record.name: ${record.name}`);
};
const onOperationClick = function(text, record) {
alert(`u click ${text}, record.name is ${record.name}`);
};
const columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
render: (text, record) => <a href="#" onClick={onOperationClick.bind(null, text, record)}>Alert: {text}, click will pop to row click</a>,
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
const data = [{
key: 1,
name: 'a',
age: 32,
address: '我是a',
children: [{
key: 11,
name: 'aa',
age: 33,
address: '我是aa',
}, {
key: 12,
name: 'ab',
age: 33,
address: '我是ab',
children: [{
key: 121,
name: 'aba',
age: 33,
address: '我是aba',
}],
}, {
key: 13,
name: 'ac',
age: 33,
address: '我是ac',
children: [{
key: 131,
name: 'aca',
age: 33,
address: '我是aca',
children: [{
key: 1311,
name: 'acaa',
age: 33,
address: '我是acaa',
}, {
key: 1312,
name: 'acab',
age: 33,
address: '我是acab',
}],
}],
}],
}, {
key: 2,
name: 'b',
age: 32,
address: '我是b',
}];
ReactDOM.render(
<Table columns={columns} dataSource={data} onRowClick={onRowClick} />,
mountNode
);
````