import React, { Component } from 'react';
import { Table, Input, Button, Icon, DatePicker } from 'antd';
import moment from 'moment';
import Highlighter from 'react-highlight-words'; export default class RpoliceRecord extends Component { constructor(props) {
super(props);
this.state = {
searchText: '',
}
} render() {
// 添加搜索
this.getColumnSearchProps = (dataIndex, title) => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
this.searchInput = node;
}}
placeholder={`搜索 ${title}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}>
搜索
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text.toString()}
/>
),
});
//搜索
this.handleSearch = (selectedKeys, confirm) => {
confirm();
console.log(selectedKeys,confirm);
this.setState({ searchText: selectedKeys[0] });
};
this.handleSearchtime = (selectedKeys, confirm) => {
confirm();
this.setState({ searchText: selectedKeys });
};
//重置
this.handleReset = clearFilters => {
clearFilters();
this.setState({ searchText: '' });
};
const columns = [
{ title: '报警时间', dataIndex: 'time', key: 'time',
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<DatePicker placeholder={`搜索时间`}
value={selectedKeys[0]}
onChange={dateString => setSelectedKeys(dateString ? [dateString] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}/>
<Button
type="primary"
onClick={() => this.handleSearchtime(moment(selectedKeys[0]._d).format('YYYY-MM-DD'), confirm)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}>
搜索
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>重置</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) => {
return record.time.indexOf(moment(value).format('YYYY-MM-DD')) != -1},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={text.toString()}
/>
),
},
{ title: '来电', key: 'callnum', dataIndex: 'callnum', ...this.getColumnSearchProps('callnum', '来电'), },
{ title: '时长', key: 'longtime', dataIndex: 'longtime', }
];
const data = [
{ key: '1', time: '2019-07-30 16:31:05', callnum: '13546540218', longtime: '37秒' },
{ key: '2', time: '2019-06-24 22:08:05', callnum: '13546540218', longtime: '1分12秒' },
{ key: '3', time: '2017-08-15 12:31:05', callnum: '13546540218', longtime: '1分10秒' },
{ key: '4', time: '2016-12-30 06:15:00', callnum: '13546540218', longtime: '20秒' }
]; return (
<Table className="accidentTable" columns={columns} dataSource={data} bordered size="small" />
)
}
}

antd通过 filterDropdown 自定义--按某天时间搜索的更多相关文章

  1. python selenium 时间搜索框查询和日期大小比较

    在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...

  2. SpringJPA主键生成采用自定义ID,自定义ID采用年月日时间格式

    自定义主键生成策略 在entity类上添加注解 @Id @GeneratedValue(strategy = GenerationType.AUTO, generator = "custom ...

  3. Sublime2 DocBlocker插件在自动补全注释时输出自定义作者和当前时间等信息

    Sublime在进行前端开发时非常棒,当然也少不了众多的插件支持,DocBlocker是在Sublime平台上开发一款自动补全代码插件,支持JavaScript (including ES6), PH ...

  4. spring-redis-session 自定义 key 和过期时间

    对于分布式应用来说,最开始遇到的问题就是 session 的存储了,解决方案大致有如下几种 使用 spring-session 它可以把 session 存储到你想存储的位置,如 redis,mysq ...

  5. 小程序自定义pick(日期加时间组合)

    最近小程序有个需求要使用日期加时间的pick组件  翻了小程序文档似乎没有符合的 手写一个 新建组件picker.js: Component({ properties: { disabled: { t ...

  6. spring cache之自定义keys的过期时间

    spring @cacheable注解默认不支持方法级别的缓存失效时间,只能通过配置来配置全局的失效时间 如果需要实现对方法级别的缓存支持失效时间机制,有一种比较简单的方法,spring配置文件如下: ...

  7. 使用vue自定义组件以及动态时间

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. react中antd的表格自定义展开

    antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中 ...

  9. 【antd】如何自定义antd组件form表单中Form.Item里的内容组件

    需求:现有一个form表单,但是其中一个元素比较复杂,并不是简单的输入框或者下拉框之类的.但是我又希望能通过form.validateFields().then()去获得它的值,就不需要在当前页面写大 ...

随机推荐

  1. CCF 201709-3 JSON查询

    CCF 201709-3 JSON查询 试题编号: 201709-3 试题名称: JSON查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 JSON (JavaScript ...

  2. “知乎杯”2018 CCF 大学生计算机系统与程序设计竞赛 分组加密器(encryption)

    分组加密器(encryption) 题解点这里 #include<map> #include<stack> #include<vector> #include< ...

  3. WSL调用Windows下的ParaView对OpenFOAM进行后处理

    OpenFOAM可以在windows下的Linux子系统(WSL)安装,但是很麻烦的一个问题是WSL没有图形化的界面,只有一个控制台窗口,在后处理的过程中我们就没有办法直接调用paraFoam命令启动 ...

  4. adb命令和fastboot有什么区别

    ADB中文解释就是调试桥的作用.既然是调试作用,需要开机并连接电脑,所以adb的命令是需要手机开启usb调试,比较典型的命令比如从电脑端敲入adb命令来安应用:adb install .还有一个命令我 ...

  5. nohup: 无法运行命令"java": 没有那个文件或目录

    问题 在一个Linux服务器上有shell 脚本如下: nohup java -jar test.jar >> ./nohup.out 2>&1 & 直接执行脚本 s ...

  6. ChannelEventRunnable handle RECEIVED operation error, channel is NettyChannel解决方法

    [] 2019-11-23 16:17:40 [3673645] [c.a.d.r.t.d.ChannelEventRunnable]-[WARN] DubboServerHandler-10.20. ...

  7. tensorflow keras analysis

    目录 Q: where is Sequential defined? Q: where is compile()? tensorflow keras analysis code from keras. ...

  8. SSL证书原理讲解

    一直以来都对数字证书的签发,以及信任等事情一知半解.总算有个闲适的周末来总结和深入一下相关的知识. CA: CA(Certificate Authority)是证书的签发机构,它是负责管理和签发证书的 ...

  9. ubuntu 本地生成被浏览器信任的证书

    vhosts添加https证书两步: 1:生成证书: sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl ...

  10. docker stack删除network失败

    现象描述 删除stack的时候没太多提示,但再启动相同的stack会报错,提示网络创建失败:随后使用network ls命令可以看到之前的network还在: 使用docker network rm还 ...