无论如何用 Handsontable 过滤行？答案

【问题标题】：Anyway to filter rows with Handsontable?无论如何用 Handsontable 过滤行？
【发布时间】：2015-04-03 07:16:12
【问题描述】：

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

【问题讨论】：

标签： handsontable

【解决方案1】：

对我来说，它们是使用 Handsontable 进行实时过滤的两种情况。一个columns filters，和/或search 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 中找到工作示例

在这两种情况下，如果数据注定要被修改，那么每次应用过滤器时都必须保持原始数据的完整性。您可以参考前两个链接了解这两个案例的更多详细信息。

请注意，这两个功能可以合并使用。

【讨论】：

【解决方案2】：

据我所知，搜索插件将搜索所有行，但仅突出显示它们，并且仅突出显示那些被渲染的行。这意味着，由于延迟渲染（HOT 仅渲染可见窗口），如果您尝试使用 css 搜索现在为蓝色的单元格，您将度过一段糟糕的时光。相反，您可以使用它返回的具有所有匹配行的对象。

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

希望有效！

【讨论】：

不幸的是，这不能很好地用于列排序。我正在使用回调来获取受搜索影响的行，但它似乎在放弃之前只搜索了 100 行。
你能给我们看一个jsfiddle吗？这不应该发生。我在一个有 10,000 行的数据数组上使用 hot.search.query(value) 运行搜索插件，然后我得到所有匹配行的数组，远远超过 100

【解决方案3】：

我需要做类似的事情。经过一番谷歌搜索，我发现了以下演示：

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

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

【讨论】：

【解决方案4】：

我不是 JS 专家，但有一个使用 http://jsfiddle.net/awyjnbj6/ 的基本示例。这是我在Table filter not working with backspaces 的问题的答案。

这包括：

Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {
    //                    debugger
    hot.loadData(tData);

    var queryResult = hot.search.query(this.value);
    rows = getRowsFromObjects(queryResult);
    console.log('searchFiled',searchFiled.value);
    console.log('rows',rows);

    console.log('tData', tData);
    var filtered = tData.filter(function (d, ix) {
        return rows.indexOf(ix) >= 0;
    });
    console.log('filtered', filtered);

    hot.loadData(filtered);


 });

【讨论】：