Question

我遇到了与滚动表有关的问题。

加载页面时，第一行（ROW 1）将是默认选择行（突出显示的行）。如果我们单击下一个按钮，将选择并突出显示下一行。问题是如果选择了ROW＆gt; = 8（例如ROW 9,10 ......），表格不会自动滚动，因此我们无法看到当前所选的当前也被突出显示。行为应如下图所示：

当选择ROW 8时，表格应自动滚动。此时，下一行（ROW 9）是可见的，顶行应该是不可见的。

我的目的是在当前选定的行我也可以看到下一行。当我单击下一个/上一个按钮直到到达最后一个可见行，然后该行将成为最后一行之前的行时，应滚动该表。

我不知道如何解决这个问题。请帮帮我。

最诚挚的问候，肯

Answer 1

以下代码段使用窗口滚动到tr的特定table。

在每个next / prev点击上分别增加/减少selectedIndex并滚动到表格中该行的索引。

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.selectedIndex = 0;
  $scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"];

  $scope.NextRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);
    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }

  $scope.PrevRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);

    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }
});

body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 5px 5px 5px 5px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-header>a {
  display: inline-block;
  margin: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">

  <div class="fixed-header">
    <button ng-click="PrevRow()">Previous button </button>
    <button href="" ng-click="NextRow()">Next button </button>
  </div>

  <div>
    <table>
      <tbody>
        <tr ng-repeat="row in rows">
          <td class="anchor" ng-style="selectedIndex == $index && {'background-color':'lightblue'}">{{row}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

当所选行是最后一行之前的行时自动滚动表

1 个答案: