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


 });

无论如何用Handsontable过滤行？

4 个答案:

1。单个列过滤器

2。搜索过滤器