【问题标题】:Primereact datatable: filter null values or template valuesPrimereact 数据表:过滤空值或模板值
【发布时间】:2020-10-06 00:38:18
【问题描述】:

我在 primereact 中有一个数据表,其中包含一个客户列表,其中有一列 validTo 返回日期或 null。我想过滤所有有效客户,所以我会过滤等于 null,但这不起作用,因为 null 会重置过滤器。

第二个选项是在模板中将 null 替换为“-”之类的东西,但是如何过滤模板返回的值,看起来,数据表只过滤源数据?

更新 1:

我有点远了。

我的专栏是这样的

    <Column
       field="giltbis"
       header="giltbis"
       filter={true}
       filterElement={giltbisFilterElement}
       filterMatchMode="custom"
       filterFunction={filterGiltbis}
       sortable={true}
       body={dateTemplate_giltbis}
    />

这是我的过滤器设置:

  const handleFilterClick = (value) => {
    setgiltbisSelected(value);
    dt.current.filter(value, "giltbis", "custom");
  };
  const filterGiltbis = (value) => {
    if (giltbisSelected === "Gültig") {
      return value == null;
    } else if (giltbisSelected === "Ungültig") {
      return value != null;
    } else {
      //how to cancel filter or show all values
    }
  };
  const giltbisFilterElement = (
    <SelectButton
      style={{ width: "100%" }}
      value={giltbisSelected}
      options={giltbisoptions}
      onChange={(e) => handleFilterClick(e.value)}
    />
  );

所以只剩下一个问题了。如何取消过滤或显示所有值?

【问题讨论】:

    标签: reactjs datatable primereact


    【解决方案1】:

    您需要实现自定义过滤器功能。这是一个例子

    filterMatchMode="custom" filterFunction={customFunction}
    
    
    export const customFunction = (value, filter) => {
      return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0
    }
    

    【讨论】:

    • 好吧,这个例子引导我朝着正确的方向前进。你有解决我最后一个问题的方法吗?请参阅我的问题的更新 1。
    • 如果您在 SelectButton、All values 中添加第三个选项,然后在 filterGiltbis 函数中的 else 中添加 return true?这行得通吗?
    猜你喜欢
    • 2017-10-13
    • 1970-01-01
    • 1970-01-01
    • 2018-12-29
    • 2021-06-16
    • 1970-01-01
    • 2014-03-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多