使用 Handsontable 进行单个列过滤?

Posted

技术标签:

【中文标题】使用 Handsontable 进行单个列过滤?【英文标题】:Individual column filtering with Handsontable? 【发布时间】:2017-02-07 17:32:05 【问题描述】:

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

Handsontable 团队已经存在和开发的内容是:

类似于 Excel 的多重过滤(但包含在 PRO 版本中)- 我的缺点是它不是免费的,而且它不太适合我正在寻找的东西。 根据用户输入突出显示单元格或行- 缺点是我只需要显示相关行

是否存在诸如基于 Handsontable 用户的多次输入仅显示相关行?

【问题讨论】:

您想隐藏无结果行,但在 Handsontable 中隐藏是 PRO 版本docs.handsontable.com/pro/1.7.0/demo-hiding-rows.html 那有什么解决办法吗? 【参考方案1】:

基于这个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 超出了此问题的范围。如果您对此感兴趣,请在评论中告诉我。

【讨论】:

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

如何在 Handsontable 中使用自定义渲染器对列进行排序?

handsontable:全局搜索过滤器行为

Handsontable指定列设置为只读的问题

无论如何用 Handsontable 过滤行?

特定列上的 Jquery Handsontable 排序

如何为 Handsontable 创建动态列?