ui-使用相同的数据源滚动两个 table 并同步滚动两个 table

Question

我在我的应用程序中使用 ui-scroll 并且运行遇到了一些问题。

我想运行 ui-滚动用于 build 两个 table 的同一个数据源，然后滚动一个 table 它应该还滚动通过相同数据源创建的另一个 table。

我尝试使用以下示例代码来实现，但它不起作用。

滚动任何 table 时，列表的行为很奇怪；它会增加列表的大小并显示空行。它可以在附加的plunker中注意到。

如果我更改数据，它只会影响第一个 table 而第二个不会更新列表。

我也无法同步（很抱歉这个愚蠢的问题，如果有人能帮忙的话）。

这是我的做法：

模板：

<table border="1"> 
  <tbody>
    <td>
      <table> 
        <tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td> 
      <table>
        <tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
</table>

控制器：

var datasource = {};
datasource.get = function (index, count, success) {
    $timeout(function () {
        var result = [];
        for (var i = index; i <= index + count - 1; i++) {
            result.push("item #" + i);
        }
        success(result);
    }, 100);
};
$scope.datasource = datasource;

https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

如有任何帮助，我们将不胜感激。 TIA

当滚动速度太快时，ui-scroll 为某些滚动计算添加的第一行和最后一行的高度往往大于 100 像素。如何应对？我可以隐藏它们吗？

这是展示它外观的图片：

Answer 1

在这些模板中显示 css-属性时出现问题，将两个视口提取到单独的 div-容器中似乎是个好主意...以下代码修复空行问题：

<table border="1"> 
  <tbody>
    <td>
      <div ui-scroll-viewport style="height: 400px;">
        <table> 
          <tbody id="first-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td> 
      <div ui-scroll-viewport style="height: 400px;">
        <table>
          <tbody id="second-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tbody>
</table>

更新后的演示在这里：https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7

关于 2 个视口滚动同步，我想，以下方法可能有效：

$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
    var result = [];
    for (var i = index; i <= index + count - 1; i++) {
        result.push("item #" + i);
    }
    success(result); 
};

const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
    vp2.scrollTop = vp1.scrollTop;
});

其中 "vp1" 和 "vp2" 是视口的 ID。

ui-使用相同的数据源滚动两个 table 并同步滚动两个 table

ui-scroll two table using the same datasource and scrolling in sync of both tables

javascript

html-table

angularjs

angular-ui

ui-scroll