99 lines
2.2 KiB
JavaScript
99 lines
2.2 KiB
JavaScript
|
/**
|
|||
|
|
*
|
|||
|
|
* @title 按条件和值过滤
|
|||
|
|
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
|
|||
|
|
import React, { Component } from 'react';
|
|||
|
|
import Table from '../../src';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const columns26 = [
|
|||
|
|
{ title: "姓名", width: 150, dataIndex: "name", key: "name", filterType: "text" },
|
|||
|
|
{ title: "年龄", width: 100, dataIndex: "age", key: "age", filterType: "dropdown" },
|
|||
|
|
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date" },
|
|||
|
|
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "text" },
|
|||
|
|
{ title: "备注", dataIndex: "mark", key: "mark" }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const data26 = [
|
|||
|
|
{
|
|||
|
|
key: "1",
|
|||
|
|
name: "John Brown",
|
|||
|
|
age: 32,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "朝阳区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "2",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 40,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "朝阳区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "3",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 40,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "东城区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "4",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 40,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "东城区",
|
|||
|
|
mark: "无"
|
|||
|
|
}, {
|
|||
|
|
key: "5",
|
|||
|
|
name: "John Brown",
|
|||
|
|
age: 32,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "海淀区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "6",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 48,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "海淀区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "7",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 40,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "海淀区",
|
|||
|
|
mark: "无"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "8",
|
|||
|
|
name: "Jim Green",
|
|||
|
|
age: 38,
|
|||
|
|
date: "2018-09-18 09:46:44",
|
|||
|
|
address: "海淀区",
|
|||
|
|
mark: "无"
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
class Demo6 extends Component {
|
|||
|
|
handlerFilterRowsChange = (key, val) => {
|
|||
|
|
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
|||
|
|
}
|
|||
|
|
handlerFilterRowsDropChange = (key, val) => {
|
|||
|
|
console.log('过滤条件类型:', key, val);
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
return <Table onFilterRowsDropChange={this.handlerFilterRowsDropChange} onFilterRowsChange={this.handlerFilterRowsChange} filterable={true} bordered columns={columns26} data={data26} />;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Demo6;
|