将功能分配给多个slickgrids

Question

请帮助解决这个非常烦人的问题。我正在使用for循环遍历数据数组并创建多个网格。它运作良好，但过滤器不能正常发挥约束力（它只绑定到最后创建的网格）下面是代码：

// 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(); 

总之，每个功能似乎是适当地结合到每个网格除过滤功能。当我在ANY网格中输入一个过滤条件时，它只返回最后一个网格中的行。

我花了好几个小时试图找到错误，但不得不承认失败。非常感激任何的帮助。

Answer 1

是的，重要的是你只有一个dataView实例。也迟早你会拿出一个事实，即所有网格的一个变量也是一个坏主意

所以加一个var dataView到你的循环，它应该解决的问题