无论如何用 Handsontable 过滤行?

Posted

技术标签:

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

我目前正在尝试在 handsontable 中的列上添加搜索过滤器。我可以使用搜索插件的callback 来隐藏带有 css 的行,但这会破坏滚动。搜索插件似乎也只查看表的前 100 个左右。 是否存在将行过滤添加到 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);


 );

【讨论】:

以上是关于无论如何用 Handsontable 过滤行?的主要内容,如果未能解决你的问题,请参考以下文章

hbase如何用过滤器实现项目某个求总数量的统计

如何用ajax显示页面?

如何用一个 Excel 过滤另一个 Excel

如何用一个 Excel 过滤另一个 Excel

Handsontable 下拉过滤器

使用 Handsontable 进行单个列过滤?