没有合适的资源?快使用搜索试试~ 我知道了~
ant design pro中可控的筛选和排序实例
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
1 下载量 77 浏览量
2021-01-21
10:56:50
上传
评论
收藏 303KB PDF 举报
温馨提示
我就废话不多说了,大家还是直接看代码吧~ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table, Button } from 'antd'; const data = [{ key: '1', name: '张三', age: 22, address: '浙江省温州市', }, { key: '2', name: '李四', age: 42, address: '湖南省湘潭市', }, { key: '3', name: '王五',
资源推荐
资源详情
资源评论
ant design pro中可控的筛选和排序实例中可控的筛选和排序实例
我就废话不多说了,大家还是直接看代码吧~
/**
* Created by hao.cheng on 2017/4/15.
*/
import React from 'react';
import { Table, Button } from 'antd';
const data = [{
key: '1',
name: '张三',
age: 22,
address: '浙江省温州市',
}, {
key: '2',
name: '李四',
age: 42,
address: '湖南省湘潭市',
}, {
key: '3',
name: '王五',
age: 12,
address: '四川省成都市',
}, {
key: '4',
name: '赵六',
age: 25,
address: '河南省郑州市',
}, {
key: '5',
name: '宋二',
age: 74,
address: '海南省海口市',
}, {
key: '6',
name: '韩八',
age: 19,
address: '台湾省台北市',
}, {
key: '7',
name: '孙七',
age: 55,
address: '福建省福州市',
}, {
key: '8',
name: '金九',
age: 81,
address: '山西省运城市',
}];
class SortTable extends React.Component {
state = {
filteredInfo: null,
sortedInfo: null,
};
handleChange = (pagination, filters, sorter) => {
//pagination:{current: 1, pageSize: 10}
//filters:{name: null, address: null}
//sorter:{column: {…}, order: "ascend", field: "name", columnKey: "name"}
console.log('Various parameters', pagination);
console.log('Various parameters', filters);
console.log('Various parameters', sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
};
clearFilters = () => {
this.setState({ filteredInfo: null });
};
clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null,
});
};
setAgeSort = () => {
this.setState({
sortedInfo: {
order: 'descend',
columnKey: 'age',
},
});
};
render() {
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [{
title: '名字',
dataIndex: 'name',
key: 'name',
filters: [
{ text: '孙', value: '孙' },
{ text: '赵', value: '赵' },
],
filteredValue: filteredInfo.name || null,
onFilter: (value, record) => record.name.includes(value),
//sorter: (a, b) => a.name.length - b.name.length,
sorter: (a, b) => a.name.localeCompare(b.name),//排序规则
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
}, {
title: '地址',
dataIndex: 'address',
key: 'address',
filters: [ //筛选条件
{ text: '浙江省', value: '浙江省' },
{ text: '市', value: '市' },
],
filteredValue: filteredInfo.address || null,
onFilter: (value, record) => {
console.log(value,"value"); //浙江省 value
console.log(record,"record");//{key: "2", name: "李四", age: 42, address: "湖南省湘潭市"} 遍历数据
return record.address.includes(value);//所有的数据中 包含value(浙江省)的筛选出来
},
//sorter: (a, b) => a.address.length - b.address.length,
sorter: (a,b)=>(a.address).localeCompare(b.address),
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
}];
return (
<div>
<div className="table-operations">
<Button onClick={this.setAgeSort}>年龄排序</Button>
<Button onClick={this.clearFilters}>清除筛选</Button>
<Button onClick={this.clearAll}>清除筛选和年龄排序</Button>
</div>
{/*columns标题栏 dataSource内容栏根据标题填充数据*/}
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
剩余12页未读,继续阅读
资源评论
weixin_38720256
- 粉丝: 4
- 资源: 946
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 超临界超超临界机组材料的选用和焊接技术.ppsx
- 1.25Cr-0.5Mo-Si钢制加氢反应器焊接.doc
- 9Ni钢的手工焊焊接技术.doc
- 289-paper-激光焊接动态试验.doc
- 20R+0Cr18Ni10Ti复合板焊接工艺评定.doc
- ASME焊接文件及焊工过程管理.doc
- ASME锅炉和压力容器规范中有关焊接术语定义.doc
- 4000立方米球罐焊接施工方案.doc
- CO2焊接工艺指导书.doc
- DL5007-92电力建设施工及验收技术规范火力发电厂焊接篇 .doc
- JB 4708-2000《钢制压力容器焊接工艺评定》标准释义.doc
- Q3201 BST001-2000 钛制焊接压力容器.doc
- SHT 3527-2009《石油化工不锈钢复合钢焊接规程》解析题要.doc
- QSVSD 1-2010 结构用双面埋弧直缝焊接钢管.doc
- 储气罐焊接控制程序.doc
- 不锈钢复合板焊接裂纹的返修.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功