slickgrid - 如何遍历画布外的行？

Question

我在地图上有一些标记，在slickgrid中有相同的行数？

我想要的是当点击标记时，标记的id与所有行匹配，相应的行应该被选中。

这是我的代码：

var $canvas = $(grid.getCanvasNode());
var $allRows = $canvas.find('.slick-row');

    $($allRows).each(function() {
        if ($(this).rowID == selectedMarker) {
            $(this).addClass("active-row"); 
            grid.scrollRowIntoView($(this).index());
        }
    });

只有当我想要的行出现在网格中但网格DOM一次只包含8行（网格有30行）时才能正常工作。

如何循环浏览所有数据？

Answer 1

你根本不应该修改SlickGrid的DOM。 SlickGrid将覆盖任何更改，因为它只渲染视图中的行（使用一些缓冲区）。当您滚过该缓冲区时，您对DOM所做的任何更改都将丢失。

您必须更改行的数据，并允许SlickGrid在呈现时向DOM添加适当的类。

修改：

SlickGrid设置：

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(metadataProvider) {
  return function(row) {
    var item = this.getItem(row),
        ret = metadataProvider(row);

    if (item && item.isActive) {
      ret = ret || {};
      ret.cssClasses = (ret.cssClasses || '') + ' active-row';
    }

    return ret;
  };
}

然后当您点击标记时：

var item = dataView.getItemById(selectedMarker);
var row  = dataView.getRowById(selectedMarker);
item.isActive = true;
dataView.updateItem(item.id, item);
grid.scrollRowIntoView(row);