Justin
8 years ago
committed by
Benjy Cui
Benjy Cui
6 changed files with 226 additions and 67 deletions
@ -0,0 +1,123 @@ |
|||
--- |
|||
order: 19 |
|||
title: 自定义筛选菜单 |
|||
--- |
|||
|
|||
## 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