用Handsontable过滤行吗？

Question

我目前正尝试在handsontable中的一个列上添加一个搜索过滤器。我可以使用搜索插件的callback来隐藏css中的行，但这会中断滚动。搜索插件似乎也只查看表格的前100个左右。有没有插件可以给handsontable添加行过滤功能？

Answer 1

对我来说，他们的两个案例是使用Handsontable进行实时过滤。 filters和/或 filter。

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);
}

在this 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);
}

在this JS Fiddle中找到工作示例

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

请注意，这两个函数可以合并并同时使用。

Answer 2

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

从这里开始，隐藏不匹配的行就变得很困难了。我所做的是编写一个简单的函数来物理地更改data数组，使匹配的行移到顶部，然后隐藏其余行。这样滚动就可以正常工作了。

希望这能起作用！

Answer 3

我有一个类似的要求。经过一些谷歌搜索，我找到了以下演示：

http://my-waking-dream.blogspot.co.uk/2013/12/live-search-filter-for-jquery.html

但是，我很想知道是否有人有其他友好的列排序方法。