无论如何用Handsontable过滤行？

Question

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

Answer 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中找到工作示例

---

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

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

Answer 2

据我所知，搜索插件将搜索所有行但只突出显示它们，并且只搜索得到的行。这意味着，由于延迟渲染（HOT仅渲染可见窗口），如果您尝试使用css搜索现在为蓝色的单元格，那么您将遇到不好的时间。相反，您可以使用它后面吐出的具有所有匹配行的对象。

从这里出来隐藏不匹配的行，它变得艰难。我所做的是编写一个简单的函数来物理地改变data数组，以便匹配的行到达顶部，然后我隐藏其余部分。这样滚动工作正常。

希望有效！

Answer 3

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

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

但是我有兴趣知道是否有人有其他方法可以使用列排序。

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


 });