使用Handsontable进行单独的列过滤？ [英] Individual column filtering with Handsontable?

问题描述

我正在寻找的是一个单独的列搜索功能（就像这个 datatables

What I'm looking for is an individual column searching function (exactly as this datatables spreadsheet example) for the Handsontable spreadsheet plugin.

Handsontable团队已经开发和已经开发的内容是：

What's already existing and has been developed by the Handsontable team is :

• 多次过滤类Excel（但包含在PRO版本中） - 对于我的案例来说，缺点是它不是免费的，并且它不太适合我正在寻找的for。


• 根据用户输入突出显示单元格或行 - Con是我只需显示相关行（ s）

• Multiple filtering Excel-like (but included in the PRO version) - Cons for my case are that it's not free, and it doesn't quite fit well what I'm looking for.
• Highlighting the cell(s) or row(s) based on an user input - The Con is that I need to only display the relevant row(s)

是否只有基于相关行的显示来自具有Handsontable的用户的多个输入？

Is there such thing as displaying only the relevant row(s) based on multiple inputs from an user with Handsontable ?

推荐答案

基于此博客，我设法编写了一个解决方案。

Based on the solution of this blog, I managed to code a solution.

看到这个JS小提琴符合我的所有要求。

我正在寻找的主要功能对于这一个：

The main function I was looking for is this one :

// 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 ），比较输入和相应列之间每行的数据，并将相关行推入数组，最后显示结果数组。对输入字段的任何更改都会调用此函数，这会导致实时表过滤。

What I did is keeping synchronized a table of Strings with the input fields (searchFields), compare the data of each row between inputs and their corresponding column, and push into an array the relevant row(s) to finally display the resulting array. This function is called for any change in the input fields which result in a live table filtering.

请注意，我尝试了我的解决方案~10k行和它们对Chrome，Firefox和IE没有任何性能问题。

Note that I tried my solution for ~10k rows and their isn't any performance issue with Chrome, Firefox and IE.

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

Also note that I managed to find a solution to keep synchronized the current displayed table with the original data when editing the values, but this is IMO out of the scope of this question. Please let me know in the comment if you're interested about this.

这篇关于使用Handsontable进行单独的列过滤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！