ant-design/components/form/demo/advanced-search.md

137 lines
3.0 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 3
2016-07-31 09:53:51 +08:00
title:
zh-CN: 高级搜索
en-US: Advanced search
2016-03-31 09:40:55 +08:00
---
2015-12-29 23:39:21 +08:00
2016-07-31 09:53:51 +08:00
## zh-CN
2015-12-29 23:39:21 +08:00
三列栅格式的表单排列方式,常用于数据表格的高级搜索。
有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。
2016-07-31 09:53:51 +08:00
## en-US
Three columns layout is often used for advanced searching of data table.
2016-07-31 09:53:51 +08:00
Because the width of label is not fixed, you may need to adjust it by customizing its style.
2016-07-31 09:53:51 +08:00
2016-08-05 11:47:31 +08:00
2017-02-13 10:55:53 +08:00
````jsx
2018-11-28 15:00:03 +08:00
import {
Form, Row, Col, Input, Button, Icon,
} from 'antd';
2018-06-27 15:55:04 +08:00
2015-12-29 23:39:21 +08:00
const FormItem = Form.Item;
class AdvancedSearchForm extends React.Component {
state = {
expand: false,
};
2017-06-01 17:56:05 +08:00
// To generate mock Form.Item
getFields() {
const count = this.state.expand ? 10 : 6;
const { getFieldDecorator } = this.props.form;
const children = [];
for (let i = 0; i < 10; i++) {
children.push(
2017-06-01 17:56:05 +08:00
<Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
<FormItem label={`Field ${i}`}>
{getFieldDecorator(`field-${i}`, {
rules: [{
required: true,
message: 'Input something!',
}],
})(
<Input placeholder="placeholder" />
)}
</FormItem>
</Col>
);
}
2017-06-01 17:56:05 +08:00
return children;
}
2018-11-28 15:00:03 +08:00
handleSearch = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log('Received values of form: ', values);
});
}
handleReset = () => {
this.props.form.resetFields();
}
toggle = () => {
const { expand } = this.state;
this.setState({ expand: !expand });
}
2017-06-01 17:56:05 +08:00
render() {
return (
<Form
className="ant-advanced-search-form"
onSubmit={this.handleSearch}
>
<Row gutter={24}>{this.getFields()}</Row>
<Row>
<Col span={24} style={{ textAlign: 'right' }}>
<Button type="primary" htmlType="submit">Search</Button>
2016-11-02 18:08:48 +08:00
<Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
Clear
</Button>
<a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
2017-06-01 17:56:05 +08:00
Collapse <Icon type={this.state.expand ? 'up' : 'down'} />
2016-11-02 18:08:48 +08:00
</a>
</Col>
</Row>
</Form>
);
}
}
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);
ReactDOM.render(
<div>
<WrappedAdvancedSearchForm />
<div className="search-result-list">Search Result List</div>
</div>,
mountNode
);
2015-12-29 23:39:21 +08:00
````
````css
.ant-advanced-search-form {
padding: 24px;
2016-11-02 18:08:48 +08:00
background: #fbfbfb;
2015-12-29 23:39:21 +08:00
border: 1px solid #d9d9d9;
border-radius: 6px;
}
.ant-advanced-search-form .ant-form-item {
display: flex;
}
2018-03-12 21:52:13 +08:00
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
2015-12-29 23:39:21 +08:00
````
<style>
2017-01-05 16:57:41 +08:00
#components-form-demo-advanced-search .ant-form {
2015-12-29 23:39:21 +08:00
max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
2015-12-29 23:39:21 +08:00
</style>