controlled filterDropdown props, close #3003
afc163
8 years ago
parent
4b2e9bbd23
commit
a6d2de1a7b
@ -0,0 +1,125 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
en-US: Customized filter panel
|
||||
zh-CN: 自定义筛选菜单
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `filterDropdown`、`filterDropdownVisible` 和 `filterDropdownVisibleChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。
|
||||
|
||||
## en-US
|
||||
|
||||
Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
|
||||
|
||||
````jsx
|
||||
import { Table, Input, Button } from 'antd';
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}, {
|
||||
key: '4',
|
||||
name: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
const App = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
filterDropdownVisible: false,
|
||||
data,
|
||||
searchText: '',
|
||||
};
|
||||
},
|
||||
onInputChange(e) {
|
||||
this.setState({ searchText: e.target.value });
|
||||
},
|
||||
onSearch() {
|
||||
const { searchText } = this.state;
|
||||
const reg = new RegExp(searchText, 'gi');
|
||||
this.setState({
|
||||
filterDropdownVisible: false,
|
||||
data: data.map((record) => {
|
||||
const match = record.name.match(reg);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
...record,
|
||||
name: (
|
||||
<span>
|
||||
{record.name.split(reg).map((text, i) => (
|
||||
i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
|
||||
))}
|
||||
</span>
|
||||
),
|
||||
};
|
||||
}).filter(record => !!record),
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
filterDropdown: (
|
||||
<div className="custom-filter-dropdown">
|
||||
<Input
|
||||
placeholder="Search name"
|
||||
value={this.state.searchText}
|
||||
onChange={this.onInputChange}
|
||||
onPressEnter={this.onSearch}
|
||||
/>
|
||||
<Button type="primary" onClick={this.onSearch}>Search</Button>
|
||||
</div>
|
||||
),
|
||||
filterDropdownVisible: this.state.filterDropdownVisible,
|
||||
onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }),
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
}];
|
||||
return <Table columns={columns} dataSource={this.state.data} />;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.custom-filter-dropdown {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.custom-filter-dropdown input {
|
||||
width: 130px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #f50;
|
||||
}
|
||||
````
|
||||
Loading…
Reference in New Issue