Handsontable - 过滤菜单中“按值过滤”的自定义操作

Question

我已将过滤器选项添加到我构建的手动实例中。并且过滤器加载并正常运行。按照以下链接中的说明：

https://docs.handsontable.com/pro/1.12.0/demo-filtering.html

但是，我遇到的问题是过滤器菜单中的“按值过滤”功能不是很直观，并且让我们的一些用户感到困惑。

例如。如果您查看上面链接中的演示，请打开 A 列的过滤器菜单，然后在“按值过滤”字段中输入“Lorem”，最后单击“确定”。什么都没发生。您可能会认为它只会过滤所有包含“Lorem”的值。

但是，如果您首先单击“清除”，然后输入“Lorem”，然后单击“Lorem”值旁边的复选框，则过滤器将起作用。请参阅下面的屏幕截图来澄清这些问题。

有什么方法可以让它运行，这样我就可以在按值过滤字段中输入“Lor”，然后只需单击“确定”即可删除所有其他繁琐的步骤？与列上的 Excel 筛选器的工作方式非常相似。

Answer 1

问题提出已经六年多了，作者可能不再需要答案了。因此，让我的答案适合那些像我一样来到这里遇到同样问题的人。

我的解决方案并不优雅，但它有效。 这个想法是在过滤值列表之前添加“全部清除”链接的功能，以及在过滤后添加“全选”链接的功能。我所做的只是将“onClearAllClick”和“onSelectAllClick”函数的代码添加到“onInput”函数中，并进行少量编辑。

onInput(event) {
    /* code from onClearAllClick */
    const changesForClear = [];
    (0, _array.arrayEach)(this.itemsBox.getSourceData(), (row, rowIndex) => {
        row.checked = false;
        changesForClear.push((0, _data.dataRowToChangesArray)(row, rowIndex)[0]);
    });
    this.itemsBox.setSourceDataAtCell(changesForClear);
    /* end of code from onClearAllClick */
    const value = event.target.value.toLocaleLowerCase(this.getLocale());
    let filteredItems;
    if (value === '') {
        filteredItems = [...this.items];
    } else {
        filteredItems = (0, _array.arrayFilter)(this.items, item => `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
    }
    this.itemsBox.loadData(filteredItems);
    /* code from onSelectAllClick */
    const changesForSelectAll = [];
    (0, _array.arrayEach)(this.itemsBox.getSourceData(), (row, rowIndex) => {
        row.checked = true;
        changesForSelectAll.push((0, _data.dataRowToChangesArray)(row, rowIndex)[0]);
    });
    this.itemsBox.setSourceDataAtCell(changesForSelectAll);
    /* end of code from onSelectAllClick */
}