0

我正在尝试在 Ember 2.0 中构建一个表：

  • 多达一百万行（所以我需要延迟渲染）
  • 固定的标题行
  • 垂直滚动的固定第一列
  • 垂直和水平滚动的内容列

一个很好的例子是这个页面上的第一个表：http: //opensource.addepar.com/ember-table/#/overview

不幸的是，ember-table 在 Ember 2.0+ 中存在性能问题，所以我试图弄清楚如何使用 ember-collection 推出我自己的表。

这是我迄今为止所拥有的一个玩弄：https ://ember-twiddle.com/e897c3dd00a715ba827b

我使用了两个 Ember 集合——一个用于第一列，一个用于可滚动内容。

<div class='table-container'>
  <div class='header-container'>
    <div class="column-headers" style="width: 1500px">
      {{#each model.columnHeaders as |columnHeader|}}
        <div class='table-cell'>
          {{columnHeader}}
        </div>
      {{/each}}
    </div>
  </div>
  {{#ember-collection 
    items=model.rowHeaders 
    classNames='fixed-column'
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-change=(action 'scrollChange')
    as |rowHeader|
  }}
    {{rowHeader}}
  {{/ember-collection}}

  {{#ember-collection 
    items=model.content
    classNames='scrolling-content' 
    cell-layout=(fixed-grid-layout 1500 20) 
    scroll-top=scrollTop
    scroll-left=scrollLeft
    scroll-change=(action 'scrollChange')
    as |item|
  }}
    {{#each item as |cell|}}
      <div class='table-cell'>
        {{cell}}
      </div>
    {{/each}}
  {{/ember-collection}}
</div>

我有 3 个问题。

  1. 这是正确的方法吗？

  2. 如何让标题行与内容一起滚动？

我尝试在 scrollChange 操作中使用 jQuery 执行此操作，但无法弄清楚它为什么不起作用。

Ember.$('.column-headers').scrollLeft(scrollLeft);

（编辑）亨利的评论回答 - 目标是错误的 div

  1. 如何定位第二个 ember-collection 使其不与第一个重叠？

我尝试用 CSS 来做，但是position: absolute让集合消失了。我不确定如何定位它。

4

0 回答 0