代码之家  ›  专栏  ›  技术社区  ›  NIrav Modi

React引导表是否提供带有清除按钮的标题TextFilter?

  •  1
  • NIrav Modi  · 技术社区  · 7 年前

    我正在使用 react-bootstrap-table 以表格行-列格式显示数据。

    我需要使用带有清除按钮的标题过滤器选项来过滤数据。

    这样地

    enter image description here

    <TableHeaderColumn dataField='member' filter={ { type: 'TextFilter', delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>
    

    但此过滤器仅显示 文本框 . 我想添加清除按钮也。

    有没有办法通过在过滤器中启用属性来显示清除按钮?或者我需要为此编写一个自定义过滤器吗?

    <TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getCustomFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   NIrav Modi    7 年前

    我开发了带有清除按钮的文本框自定义过滤器。

    import React from "react";
    import PropTypes from 'prop-types';
    import {Form, InputGroup, FormControl, Glyphicon} from "react-bootstrap";
    
    export default class TextWithClearButtonFilter extends React.Component {
    
      constructor(props) {
        super(props);
        this.filter = this.filter.bind(this);
        this.cleanFiltered = this.cleanFiltered.bind(this);
    
        this.state = {
          value: this.props.defaultValue || ''
        };
    
      }
    
     cleanFiltered() {
    
        if (this.state.value) {
    
            var value = this.props.defaultValue ? this.props.defaultValue : '';
            this.setState(function () {
                return { value: value };
            });
    
            this.props.filterHandler(value);
        }
    
      }
    
     filter(event) {
    
          var _this2 = this;
    
          if (this.timeout) {
    
            clearTimeout(this.timeout);
          }
    
          var filterValue = event.target.value;
    
          this.setState(function () {
            return { value: filterValue };
          });
    
          this.timeout = setTimeout(function () {
            if(filterValue){
                _this2.props.filterHandler(filterValue);
            } else {
                _this2.props.filterHandler(_this2.props.defaultValue);
            }
          }, _this2.props.delay);
    
      }
    
      render() {
        return (
          <div>
                <InputGroup bsSize="small">
                    <FormControl
                        type="text"
                        placeholder="Search"
                        style={{width:90}}
                        onChange={this.filter}
                        value={this.state.value}
                    />
                    <InputGroup.Addon className="hoverHand" onClick={this.cleanFiltered}>
                        <Glyphicon glyph="remove" />
                    </InputGroup.Addon>
                </InputGroup>
          </div>
        );
      }
    }
    
    TextWithClearButtonFilter.propTypes = {
      filterHandler: PropTypes.func.isRequired,
      defaultValue: PropTypes.string,
      delay: PropTypes.number
    };
    
    TextWithClearButtonFilter.defaultProps = {
      delay: 2000
    };
    
    export function getTextWithClearButtonFilter(filterHandler, customFilterParameters) {
      return (
        <TextWithClearButtonFilter filterHandler={filterHandler} />
      );
    }
    

    用这种方式

    <TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getTextWithClearButtonFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>