绯一
9 years ago
3 changed files with 93 additions and 2 deletions
@ -0,0 +1,90 @@ |
|||
# 行点击事件 |
|||
|
|||
- order: 17 |
|||
|
|||
通过传入 `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 |
|||
); |
|||
```` |
|||
Loading…
Reference in new issue