使用Handsontable进行单独的列过滤?

时间:2016-09-29 11:47:56

标签: javascript handsontable

我正在寻找的是Handsontable电子表格插件的单独列搜索功能(与此datatables电子表格示例完全相同)。

Handsontable团队已经开发并且已经开发了什么:

  • 多次过滤类Excel(但包含在PRO版本中) - 对于我的案例来说,缺点是它不是免费的,而且它并不适合我所做的事情。寻找。
  • 根据用户输入突出显示单元格或行 - Con是我只需要显示相关行

基于来自具有Handsontable的用户的多个输入,是否存在显示仅相关行?

1 个答案:

答案 0 :(得分:2)

根据此blog的解决方案,我设法编写了一个解决方案。

See this JS fiddle that answers all my requirements.

我正在寻找的主要功能就是这个:

// The function push every row satisfying all the input values into an array that is loaded
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);
}

我所做的是保持同步一个字符串表与输入字段( searchFields ),比较输入和相应列之间每行的数据,并将相关行推入数组( s)最终显示结果数组。调用此函数可以对输入字段进行任何更改,从而导致实时表过滤。

请注意,我尝试了大约10k行的解决方案,而且他们对Chrome,Firefox和IE的任何性能问题都没有。

还要注意,当编辑值时,我设法找到了一个解决方案,使当前显示的表与原始数据保持同步,但这是IMO超出了此问题的范围。如果您对此感兴趣,请在评论中告诉我。