蚂蚁设计自定义筛选使用Ajax数据加载

Question

有没有方法来创建表的服装过滤控制

<div className="custom-filter-dropdown"> 
    <Input 
     ref={...} 
     placeholder="Search name" 
     value={...} 
     onChange={...} 
     onPressEnter={...}/> 
    <Button type="primary" onClick={...}>Search</Button> 
</div> 

调用表onChange事件来处理Ajax loadig数据

handleTableChange = (pagination, filters, sorter) => 
{ 
    let sc = sorter.columnKey; 
    let so = sorter.order ? sorter.order.replace('end', '') : undefined; 
    let filter = filters;//get filter from custome control? 
    this.props.getPagedList(pagination.current, sc, so, filter); 
} 

Answer 1

是居然还有一个Search控制内置于Ant。

我不确定你的意思是handleTableChange如果你想过滤表格，过滤事件将来自表Search控制。

const { 
 
    Table, Input 
 
} = antd; 
 

 
const Search = Input.Search; 
 
    
 
class TableControl extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {filter: ''}; 
 
    this._onFilterChange = this._onFilterChange.bind(this); 
 
    } 
 
    
 
    _onFilterChange(value) { 
 
    this.setState({ 
 
     filter: value, 
 
    }); 
 
    } 
 
    
 
    _getDataSource() { 
 
    return fetchResults(this.state.filter); 
 
    } 
 
    
 
    render() { 
 
    const myDataSource = this._getDataSource(); 
 
    return (
 
     <div> 
 
     <Search 
 
     placeholder="input search text" 
 
     style={{ width: 200 }} 
 
     onSearch={this._onFilterChange} /> 
 
     
 
     <Table dataSource={myDataSource} columns={columns} /> 
 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 
const fetchResults = (filter) => { 
 
    const lcFilter = filter.toLowerCase(); 
 
    let ret = dataSource.filter(e => { 
 
    const lcAddress = e.address.toLowerCase(); 
 
    return (lcAddress != null && 
 
     lcAddress.indexOf(lcFilter) != -1); 
 
    }); 
 
    return ret; 
 
} 
 

 
const dataSource = [{ 
 
    key: '1', 
 
    name: 'Mike', 
 
    age: 32, 
 
    address: '10 Downing Street' 
 
}, { 
 
    key: '2', 
 
    name: 'John', 
 
    age: 42, 
 
    address: '10 Broad Street' 
 
}, { 
 
    key: '3', 
 
    name: 'Dave', 
 
    age: 42, 
 
    address: '10 Church Street' 
 
} 
 
]; 
 

 
const columns = [{ 
 
    title: 'Name', 
 
    dataIndex: 'name', 
 
    key: 'name', 
 
}, { 
 
    title: 'Age', 
 
    dataIndex: 'age', 
 
    key: 'age', 
 
}, { 
 
    title: 'Address', 
 
    dataIndex: 'address', 
 
    key: 'address', 
 
}]; 
 

 
ReactDOM.render(<TableControl/>, 
 
    document.getElementById('app'));

<link href="https://unpkg.com/antd/dist/antd.min.css" rel="stylesheet"/> 
 
<div id="app"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/antd/dist/antd.min.js"></script>