制表符 - 基于另一个制表符过滤答案

【问题标题】：Tabulator - Filtering based on another Tabulator制表符 - 基于另一个制表符过滤
【发布时间】：2018-12-04 14:02:01
【问题描述】：

我有一个包含搜索结果的制表符。代码如下：

var table = new Tabulator("#json-table", {
    layout:"fitDataFill",
    //initialFilter:[{field:"title", type:"!=", value:"ignoreList.title"}],
    ajaxURL:tabUrl,
    ajaxResponse:function(url, params, response){
        return Object.values(response);
    },
    columns:
        [{title:"Title", field:"title", align:"center"},
        {title:"Price", field:"price", align:"center"},
        {title:"Shipping Cost", field:"shippingCost.shippingServiceCost.value", align:"center"},
        {title:"Watch List", align:"center", cellClick:function(e, cell){
            var data = cell.getData();
            watchListArray.push(data);
            localStorage.setItem("watchList", JSON.stringify(watchListArray));
    },},
        {title:"Ignore List", align:"center", cellClick:function(e, cell){
            var data = cell.getData();
            ignoreListArray.push(data);
            localStorage.setItem("ignoreList", JSON.stringify(ignoreListArray));
    },
        },
        {title:"Image", align:"center"},
    ],
});

我还有另一个包含忽略列表的制表器。代码如下：

ignoreListArray = JSON.parse(localStorage.getItem("ignoreList"));

var ignoreList = new Tabulator("#json-table", {
    data:ignoreListArray,
    layout:"fitDataFill",
    columns:
        [{title:"Title", field:"title", align:"center"},
        {title:"Price", field:"price", align:"center"},
        {title:"Shipping Cost", field:"shippingCost.shippingServiceCost.value", align:"center"},
        {title:"Watch List", align:"center"},
        {title:"Ignore List", align:"center"},
        {title:"Image", align:"center"},
        ],
    });

如果用户单击他们想要忽略的行的忽略列表单元格，我将使用localStorage 将搜索结果中的行存储在忽略列表制表器中。如果将一行放入 Ignore List，我想这样做，以便在将其从 Ignore List 中删除之前，该行永远不会出现在以后的搜索结果中。

是否有内置过滤器可以帮助我完成此操作？

【问题讨论】：

标签： javascript jquery json tabulator

【解决方案1】：

您需要使用自定义过滤器来实现此目的。

为了过滤掉行，您需要一种方法来比较忽略列表中的行与表中的行。通常您会为每一行分配一个 id 字段，然后检查该行的 id 是否在忽略列表中。我将在示例中使用这种方法，但您可以轻松调整它以查找行对象中任何属性的匹配值。

在我们的自定义过滤器中，我们将使用 JavaScript 数组中内置的 filter 函数来查找数组上的任何匹配项；

function customFilter(data, filterParams){
    //data - the data for the row being filtered
    //filterParams - params object passed to the filter

    //check for matches
    var matches = ignoreListArray.filter(function(element){
        return element.id == data.id
    });

    return !matches.length; //allow row if it does not match any row in the ignore list
}

//set filter on table
table.setFilter(customFilter);

有关使用自定义过滤器的详细信息，请参阅Filter Documentation

【讨论】：