如何过滤类中的制表符数据

问题描述

我想知道是否可以设置一个过滤器来根据类而不是实际的表数据来过滤行(例如,仅显示存在特定类的行)?如果是这样,那必须是自定义过滤器,还是可以使用标准过滤器运算符?

仅供参考,我正在使用Tabulator v3.5。任何示例将不胜感激:-)


感谢Oli的回复

我已经按照您的建议实施了变种器,以定义一些新属性,但是还有另一个问题,如何在不使用clearFilter的情况下删除特定属性的过滤器,据我了解,它会清除所有活动的过滤器?我已经尝试过removeFilter,但这似乎不起作用。

例如(选中复选框时):

 if (chk) {
  $("#allocations-table").tabulator("setFilter","Allocated","=","is-allocated");
 } else {
  $("#allocations-table").tabulator("removeFilter","is-allocated");
 }

解决方法

在使用Tabulator时,尝试基于类过滤行会有点反模式,因为您首先必须使用格式化程序来应用类,此时您也可能在行上设置一个属性,然后以常规方式过滤内容。

正确的方法是创建一个隐藏列,该隐藏列使用mutator在行上定义新属性,将其称为 class ,然后您可以使用行格式器将此格式应用于行,然后可以按常规对其进行过滤。

因此,让我们从创建我们的增变器开始,我将在其中添加一些任意逻辑以根据另一列的值(让我们说年龄)来设置类:

var classMutator = function(value,data){
    if(data.age >= 18){
        return "is-adult";
    }else{
        return "is-child";
    }
}

然后,我们想将其添加到使用此增幅器的隐藏列的列定义中:

{field:"class",mutator:classMutator,visible:false},

然后,我们将需要一个行格式化程序以将该类应用于行:

rowFormatter:function (row){
    row.getElement().classList.add(row.getData().class);
}

因此,我们在一起都有一个表构造器,如下所示:

var table = new Tabulator("#example-table",{
    columns:[
        {field:"class",//... other table columns go here
    ],rowFormatter:function (row){
        row.getElement().classList.add(row.getData().class);
    }
}

然后可以使用 setFilter 函数进行过滤:

table.setFilter("class","=","is-child");

作为旁注,我强烈建议升级到Tabulator的最新版本,此时v3.5已有近2年的历史,自那时以来已经有了重大的改进。如果您担心jQuery的兼容性,所有最新版本都附带[jQuery Wrapper](http://tabulator.info/docs/4.7/jquery],使迁移变得更容易