有固定列的無限滾動表

我有一個表在後端使用單個列表項上的ng-repeat填充。該表格有一個需要固定在左側的日期列，但仍然可以在月份內上下滾動。有固定列的無限滾動表

所有其他不是日期列的列應該能夠向上，向下，向左或向右滾動。但是，向上滾動或向下滾動日期應始終與正確的行對齊。

<div class="grid-headers"> 
 
\t <div class="grid-column-date grid-header-item">Date</div> 
 
\t <div class="grid-column-col1 grid-header-item">Col1</div> 
 
\t <div class="grid-column-col2 grid-header-item">Col2</div> 
 
\t <div class="grid-column-col3 grid-header-item">Col3</div> 
 
</div> 
 

 
<ul class="grid-content"> 
 
    <li ng-repeat="item in vm.gridItems" class="grid-row"> 
 
     <div class="grid-column-date grid-row-item"></div> 
 
     <div class="grid-column-col1 grid-row-item"></div> 
 
     <div class="grid-column-col2 grid-row-item"></div> 
 
     <div class="grid-column-col3 grid-row-item"></div> 
 
    </li> 
 
</ul>

UPDATE：

我能找到這個指令滾動時將繩索的div。它在我的應用程序中不起作用，但它看起來像朝着正確方向邁出了可能的一步。在表格單元格

How do I synchronize the scroll position of two divs using AngularJS?

這的jsfiddle http://jsfiddle.net/gdjz6go5/

來源

2016-07-07 Fritz-krieg

你是什麼意思'用正確的row'對齊？ –

在y軸上滾動時，每列應具有相同的功能。日期和其他列應該全部向下移動。在x軸上滾動時，日期列保持固定，以便您可以查看該特定行的日期。 –

鳥巢的div提供您所需要的溢出。您將需要在li上玩css高度來模擬流體表。

<style> 
table { 
    width: 200px; 
} 

table, 
th, 
td { 
    border: 1px solid black; 
} 

table, 
td div.div1 { 
    border: 1px solid black; 
    height: 50px; 
    overflow-y: scroll; 
} 

table, 
td div.div2 { 
    border: 1px solid black; 
    height: 50px; 
    overflow-x: scroll; 
    overflow-y: scroll; 
    width: 200px; 
} 

ul { 
    padding: 0; 
    margin 0; 
} 
</style> 

<table> 
    <thead> 
    <tr> 
     <th>Date</th> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div class="div1"> 
      <ul> 
      <li>Date 1</li> 
      <li>Date 2</li> 
      <li>Date 3</li> 
      <li>Date 4</li> 
      <li>Date 5</li> 
      </ul> 
      <div> 
     </td> 
     <td colspan=3> 
     <div class="div2">asldkjlkasjd 
      <table> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      <tr> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
       <td>Content</td> 
      </tr> 
      </table> 

     </div> 
     </td> 
    </tr> 
    </tbody> 
</table>

小提琴：https://jsfiddle.net/judsonmusic/8Lzbb0dn/

來源

2016-07-07 18:15:56

有固定列的無限滾動表

回答

相關問題