Individual column filtering with Handsontable?

问题

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

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

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)

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

回答1:

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

See this JS fiddle that answers all my requirements.

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

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.

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

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.

来源：https://stackoverflow.com/questions/39769474/individual-column-filtering-with-handsontable

标签

javascript

handsontable