Assigning functions to multiple slickgrids

问题

Please help to solve this very annoying problem. I am using a for loop to iterate over an array of data and create multiple grids. It is working well but the filter function is not binding properly (it only binds to the LAST grid created) Here is the code:

// this function iterates over the data to build the grids
function buildTables() {

// "domain" contains the dataset array
for (i = 0; i < domains.length; i++) {
    var dataView;
    dataView = new Slick.Data.DataView();
    var d = domains[i];
    grid = new Slick.Grid('#' + d.name, dataView, d.columns, grids.options);
    var data = d.data;


    // create a column filter collection for each grid - this works fine
    var columnFilters = columnFilters[d.name];

    // this seems to be working just fine
    // Chrome console confirms it is is processed when rendering the filters
    grid.onHeaderRowCellRendered.subscribe(function (e, args) {
        $(args.node).empty();
        $("<input type='text'>")
           .data("columnId", args.column.id)
           .val(columnFilters[args.column.id])
           .appendTo(args.node);
    });

    // respond to changes in filter inputs
    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
        var columnID = $(this).data("columnId");
        if (columnID != null) {

            // this works fine - when the user enters text into the input - it 
            // adds the filter term to the filter obj appropriately
            // I have tested this extensively and it works appropriately on 
            // all grids (ie each grid has a distinct columnFilters object
            var gridID = $(this).parents('.grid').attr('id');
            columnFilters[gridID][columnID] = $.trim($(this).val());
            dataView.refresh();
        }
    });


    //##### FAIL #####
    // this is where things seem to go wrong
    // The row item always provides data from the LAST grid populated!!
    // For example, if I have three grids, and I enter a filter term for
    // grids 1 or 2 or 3 the row item below always belongs to grid 3!!
    function filter(row) {
        var gridID = $(this).parents('.grid').attr('id');
        for (var columnId in grids.columnFilters[gridID]) {
            if (columnId !== undefined && columnFilters[columnId] !== "") {
                var header = grid.getColumns()[grid.getColumnIndex(columnId)];
                //console.log(header.name);
            }
        }
        return true;
    }


    grid.init();
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.setFilter(filter); // does it matter than I only have one dataView instance?
    dataView.endUpdate();
    grid.invalidate();
    grid.render();

In summary, each function seems to be binding appropriately to each grid except for the filter function. When I enter a filter term into ANY grid, it returns the rows from the last grid only.

I have spent several hours trying to find the fault but have to admit defeat. Any help would be most appreciated.

回答1:

yes, it matters that you have only one instance of dataView. and also sooner or later you will come up to the fact that one variable for all grids is also a bad idea

so add a var dataView to your loop, it should solve the problem

来源：https://stackoverflow.com/questions/17625250/assigning-functions-to-multiple-slickgrids

标签

slickgrid