无论如何用Handsontable过滤行？

Question

我目前正在尝试在handsontable的列上添加搜索过滤器.我可以使用callback搜索插件来隐藏带有css的行但是会中断滚动.搜索插件似乎也只查看表的前100个左右.是否存在可以将行过滤添加到handsontable的插件？

Answer 1

对我来说,他们是使用Handsontable进行实时过滤的两种情况.一列过滤器,和/或搜索过滤器.

1.单柱过滤器

每列提交一个,允许同时应用多个过滤器:

function filter() {
    var row, r_len, col, c_len;
    var data = myData; // Keeping the integrity of the original data
    var array = [];
    var match = true;
    for (row = 0, r_len = data.length; row < r_len; row++) {
        for(col = 0, c_len = searchFields.length; col < c_len; col++) {
            if(('' + data[row][col]).toLowerCase().indexOf(searchFields[col]) > -1);
            else match=false;
        }
        if(match) array.push(data[row]);
        match = true;
    }
    hot.loadData(array);
}

在这个JS Fiddle中找到工作示例

2.搜索过滤器

允许在表格中的任何位置搜索任何值的字段:

function filter(search) {
    var 
    row, r_len,
    data = myData, // Keeping the integretity of the original data
    array = [];
    for (row = 0, r_len = data.length; row < r_len; row++) {
        for(col = 0, c_len = data[row].length; col < c_len; col++) {
            if(('' + data[row][col]).toLowerCase().indexOf(search) > -1) {
                array.push(data[row]);
                break;
            }
        }
    }
    hot.loadData(array);
}

在这个JS Fiddle中找到工作示例

在这两种情况下,如果数据注定要被修改,则每次应用过滤器时都必须保持原始数据的完整性.有关这两种情况的更多详细信息,请参阅两个第一个链接.

请注意,两个函数可以合并并同时使用.

Answer 2

据我所知，搜索插件将搜索所有行，但仅突出显示它们，并且仅突出显示那些行。这意味着，由于延迟渲染（HOT 仅渲染可见窗口），如果您尝试使用 css 搜索现在为蓝色的单元格，您将会遇到麻烦。相反，您可以使用它返回的对象，其中包含所有匹配的行。

从这里开始隐藏不匹配的行，这变得很困难。我所做的是编写一个简单的函数，该函数会物理更改数组data，以便匹配的行位于顶部，然后隐藏其余行。这样滚动效果就很好。

希望有效！