react-virtualized共享CellMeasurerCache用于多个网格

时间:2017-08-14 19:52:49

标签: react-virtualized

我并排几个网格,其中第一个我想用CellMeasurer动态计算行高,如何在另一个网格中重用CellMeasurerCache(同步单元格高度/宽度)?

jsbin example

class App extends React.Component {
  constructor(props) {
    super(props);

    this.leftHeadersCellMeasurerCache = new CellMeasurerCache({
      fixedWidth: true,
      minHeight: 40
    });
  }

  render() {
    return (
      <ScrollSync>
        {({scrollTop, onScroll}) => (
          <div className="row">
            <LeftGrid
              width={300}
              height={500}
              scrollTop={scrollTop}
              cellMeasurerCache={this.leftHeadersCellMeasurerCache}
            />
            <DataGrid
              width={400}
              height={500}
              onScroll={onScroll}
              rowHeight={this.leftHeadersCellMeasurerCache.rowHeight}
            />
          </div>
        )}
      </ScrollSync>
    )
  }
}

PS。不幸的是,不能使用MultiGrid,左侧的数据是&#34;不均匀&#34;。

1 个答案:

答案 0 :(得分:1)

除非.directive('inputDelayEnter', ['$timeout', function($timeout) { return { require:'^?ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.bind('keydown keypress', function (event) { if(event.which === 13) { $timeout(500); if(ngModelCtrl.$modelValue !== undefined){ scope.$apply(function (){ scope.$eval(attrs.coppelDelayEnter); }); } } }); } }; } ])​; 中所有单元格的内容相同,否则您无法在<input type="text" ng-model="data.sku" input-delay-enter> 之间直接共享CellMeasurerCache缓存(我怀疑情况是这样的) )。

我认为您想要装饰Grid in a similar way as MultiGrid does。你的装饰者需要决定何时按原样传递值以及何时添加列偏移以避免破坏测量。