webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Filter specific columns on displayed grid #197

Closed satrif closed 5 years ago

satrif commented 5 years ago

Good Day! I was wondering if i can specify the columns to be filtered via editableGrid.filter(). I found an example where the filter prototype can have columns as input data - https://github.com/webismymind/editablegrid/blob/master/editablegrid.js But i cannot find an example. i'm trying to include some columns in the following - $('filter').onkeyup = function() {editableGrid.filter($('filter').value); }; $('filter').onkeyup = function() {editableGrid.filter($('filter').value, 'Col1'); }; - doesnt work I have read that it should be an array, but $('filter').onkeyup = function() {editableGrid.filter($('filter').value, ['Col1','Col2']); }; - doesnt work either.

Do you have an example of how to filter a specific columns? Thanks in advance!

satrif commented 5 years ago

well, i just had to smoke this issue a bit to get the solution... 1st) add new prototype: EditableGrid.prototype.filter1 = function(filterString, cols) { with (this) {

    if (typeof filterString != 'undefined') {
        this.currentFilter = filterString;
        this.localset('filter', filterString);
    }

    // if filtering is done on server-side, we are done here
    if (serverSide) return setPageIndex(0);

    // un-filter if no or empty filter set
    if (currentFilter == null || currentFilter == "") {
        if (dataUnfiltered != null) {
            data = dataUnfiltered;
            dataUnfiltered = null;
            for (var r = 0; r < getRowCount(); r++) data[r].visible = true;
            setPageIndex(0);
            tableFiltered();
        }
        return;
    }       

    var words = currentFilter.toLowerCase().split(" ");

    // work on unfiltered data
    if (dataUnfiltered != null) data = dataUnfiltered;

    var rowCount = getRowCount();
    var columnCount = typeof cols != 'undefined' ? cols.length  : getColumnCount();

    for (var r = 0; r < rowCount; r++) {
        var row = data[r];
        row.visible = true;
        var rowContent = ""; 

        // add column values
        for (var c = 0; c < columnCount; c++) {
            if (getColumnType(c) == 'boolean') continue;
            var displayValue = getDisplayValueAt(r, typeof cols != 'undefined'  ? cols[c] :  c);
            var value = getValueAt(r, typeof cols != 'undefined'  ? cols[c] : c);
            rowContent += displayValue + " " + (displayValue == value ? "" : value + " ");
        }

        // add attribute values
        for (var attributeName in row) {
            if (attributeName != "visible" && attributeName != "originalIndex" && attributeName != "columns") rowContent += row[attributeName];
        }

        // if row contents do not match one word in the filter, hide the row
        for (var i = 0; i < words.length; i++) {
            var word = words[i];
            var match = false;

            // a word starting with "!" means that we want a NON match
            var invertMatch = word.startsWith("!");
            if (invertMatch) word = word.substr(1);

            // if word is of the form "colname/attributename=value" or "colname/attributename!=value", only this column/attribute is used
            var colindex = -1;
            var attributeName = null;
            if (word.contains("!=")) {
                var parts = word.split("!=");
                colindex = getColumnIndex(parts[0]);
                if (colindex >= 0) {
                    word = parts[1];
                    invertMatch = !invertMatch;
                }
                else if (typeof row[parts[0]] != 'undefined') {
                    attributeName = parts[0];
                    word = parts[1];
                    invertMatch = !invertMatch;
                }
            }
            else if (word.contains("=")) {
                var parts = word.split("=");
                colindex = getColumnIndex(parts[0]);
                if (colindex >= 0) word = parts[1];
                else if (typeof row[parts[0]] != 'undefined') {
                    attributeName = parts[0];
                    word = parts[1];
                }
            }

            // a word ending with "!" means that a column must match this word exactly
            if (!word.endsWith("!")) {
                if (colindex >= 0) match = (getValueAt(r, colindex) + ' ' + getDisplayValueAt(r, colindex)).trim().toLowerCase().indexOf(word) >= 0;
                else if (attributeName !== null) match = (''+getRowAttribute(r, attributeName)).trim().toLowerCase().indexOf(word) >= 0;
                else match = rowContent.toLowerCase().indexOf(word) >= 0; 
            }
            else {
                word = word.substr(0, word.length - 1);
                if (colindex >= 0) match = (''+getDisplayValueAt(r, colindex)).trim().toLowerCase() == word || (''+getValueAt(r, colindex)).trim().toLowerCase() == word; 
                else if (attributeName !== null) match = (''+getRowAttribute(r, attributeName)).trim().toLowerCase() == word; 
                else for (var c = 0; c < columnCount; c++) {
                    if (getColumnType(typeof cols != 'undefined'  ? cols[c] : c) == 'boolean') continue;
                    if ((''+getDisplayValueAt(r, typeof cols != 'undefined'  ? cols[c] : c)).trim().toLowerCase() == word || (''+getValueAt(r, typeof cols != 'undefined'  ? cols[c] : c)).trim().toLowerCase() == word) match = true;
                }
            }

            if (invertMatch ? match : !match) {
                data[r].visible = false;
                break;
            }
        }
    }

    // keep only visible rows in data
    dataUnfiltered = data;
    data = [];
    for (var r = 0; r < rowCount; r++) if (dataUnfiltered[r].visible) data.push(dataUnfiltered[r]);

    // refresh grid (back on first page) and callback
    setPageIndex(0);
    tableFiltered();
}

}; then declare array with ID's of cols to use and filter with .filter1: var cols1 = [0, 1]; currentFilter = _$('filter').value; editableGrid.filter1(currentFilter, cols1);

and onkeyup the same: $('filter').onkeyup = function() { var cols = [0, 1]; editableGrid.filter1($('filter').value+"", cols); };

Hope some one would need that...