filter - 创建自定义过滤器
问题描述
我正在 React 中开发基于多选组合框的自定义过滤器。我创建了过滤器并添加到表中,但我无法定义自定义比较函数
这是过滤器组件
import React, { Component } from 'react'
import ReactDOM from "react-dom";
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Checkbox from '@material-ui/core/Checkbox';
import ListItemText from '@material-ui/core/ListItemText';
import Input from '@material-ui/core/Input';
import _ from 'lodash'
import PropTypes from 'prop-types'
class MultipleSelectionFilterComponent extends Component {
state = {
value: []
}
componentWillMount(){
this.setState({allValues: this.context.getActivityStatuses() })
}
valueGetter(data){
return data
}
isFilterActive() {
return this.state.value !== null && this.state.value !== undefined && this.state.value !== "";
}
doesFilterPass(params){
return this.state.text.toLowerCase()
.split(" ")
.every((filterWord) => {
return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
});
}
afterGuiAttached(params) {
this.focus();
}
focus() {
window.setTimeout(() => {
let container = ReactDOM.findDOMNode(this.refs.input);
if (container) {
container.focus();
}
});
}
onParentModelChanged(data){
if(data != null){
this.setState({value: data.filter})
}else{
this.setState({value: 'all'}) //sulla pressione del bottone "reset filter", data è nullo e così ripristino la select su {allLabel}
}
}
getModel(){
return this.state.value
}
setModel(value){
return this.setState({value})
}
onFloatingFilterChanged(params){
return true;
}
onChange = (event) => {
//console.log("onChange: ",event)
const filterInstance = this.props.api.getFilterInstance(this.props.column.colId)
filterInstance.filterText = event.target.value === 'all' ? '' : event.target.value
this.props.api.onFilterChanged()
}
render() {
const { trueLabel, falseLabel, allLabel } = this.props
const { allValues } = this.state
let realValue = this.state.value
//console.log("statevalues: ", allValues)
return (
<Select
multiple = {true}
className="boolean-selector select"
classes={{
selectMenu: 'select-menu'
}}
input={<Input id="select-multiple-checkbox" />}
renderValue={selected => _.size(selected) + " selected"}
onChange={this.onChange}
value={realValue}>
{Array.isArray(allValues) && allValues.map((item, index) =>
{
//console.log("realValue: ",item)
return(
<MenuItem value={item.id} key={index} className="flex flex-row">
<Checkbox checked={realValue.indexOf(item.id) > -1} />
<ListItemText primary={item.statusName} />
</MenuItem>)
})}
</Select>
);
}
static defaultProps = {
allLabel: "All values"
}
static contextTypes={
getActivityStatuses: PropTypes.func.isRequired
}
}
export default MultipleSelectionFilterComponent
我在createColums
方法中使用它
createColumns = () =>{
this.columns = [
...
{
headerName: "Status",
field: "activity.activityStatus.id",
cellClass: 'flex items-center',
cellRendererFramework: ActivityStatusCellRenderer,
//floatingFilterComponent:MultipleSelectionFilterComponent,
floatingFilterComponentFramework: MultipleSelectionFilterComponent,
//filter: MultipleSelectionFilterComponent,
}
....
]
return this.columns
}
当我使用上面的组件时,floatingFilterComponentFramework
我可以看到组合框,但我无法开发自定义比较功能。
当我使用上面的组件时,filter
我看不到任何东西......
解决方案
推荐阅读
- python - 如何在 Keras YOLOv3 解码输出上实现?
- shell - 如何在 shell 脚本中将十六进制转换为 Base64(预期不同的输出)?
- python - 如何限制 Django 应用程序中显示的项目数量
- c# - 初始化 C# IntPtr 以接受来自非托管 C++ DLL 的数据?
- bash - 如何将 avro 模式生成器的 bash 脚本转换为 java 代码
- javascript - 使用 Nodemailer 通过 Gmail 发送电子邮件时如何解决“未处理的承诺拒绝”
- java - 如何从 Ms Access 数据库中的 Java 中的 jLabel 中显示行?
- c++ - 将调用哪个重载模板?
- java - 优化 Java Cassandra PreparedStatementCache
- reactjs - Android 上的模态道具 onDismiss