当表格有滚动条时移动到 HTML 表格中的选定行

Question

我有一个表格，当用户单击表格中的行时，我正在使用该行的选定属性。在另一个面板中，我有一张地图，上面显示了所有员工。表中的每一行都有唯一的 ID，当用户单击地图上的员工图像时，表中的员工行会突出显示。现在，如果表格有 40 行，我会显示垂直滚动条。当我单击 ID 为 40 的员工时，表中的行被选中，但该行未显示在视图中，因为表有滚动条并且它被滚动条隐藏。以下是我的html代码：

<div class="customTable">
    <table class="table" id="employeesTable">
        <thead class="active">
            <tr>
                <th>employee ID</th>
                <th>employee State</th>
            </tr>
        </thead>
        <tbody>
            <div>
                <tr ng-repeat="employee in employees ng-class="{'selected':employee.empId == selectedRow}"  id="row{{employee.empId}}" "  style="cursor: pointer">
                    <td>{{employee.empId}}</a></td>
                    <td><span>{{employee.employeeState}}</span></td>                                                
                </tr>
            </div>
        </tbody>
    </table>
</div>

现在，当我点击地图上的员工图片时，会调用以下代码：

$scope.employeeDisplay = function(employee){
            //to display employee in the table
            //called when the employee is clicked on the map
            var id = employee.empId;
            $('#employeesTable tr').eq(1).removeClass('selected');
            $scope.selectedRow = empId //so based on the employee is that particular row is highlighted in the table
        }

如果该行不在初始视图中，您能否告诉我该表如何自动显示所选行，例如该表仅显示 20 行，如果选择了 id 为 40 的员工，则该表应滚动到所选行行。

Answer 1

这是一个具有您正在寻找的基本行为的 JSFiddle。它所做的只是滚动到第 40 个元素（如果它不在视图中）。

https://jsfiddle.net/reid_horton/odd0omk7/1/

它的工作原理是将滚动条元素的scrollTop 属性设置为您要查看的项目的offsetTop 属性，从而将滚动条滚动到该元素位于视口顶部的位置。

为了检查项目是否已经在视图中，它将滚动条的当前位置与元素的位置进行比较。然后它使用视口的高度来确定元素是否在可视范围内。

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="scrolling-container">
    <table>
      <tr ng-repeat="k in items">
        <td>{{ k }}</td>
      </tr>
    </table>
  </div>
  <!-- As an example, scroll to the 40th element -->
  <button ng-click="scrollItemIntoView()">
    Scroll to Bottom
  </button>
</div>

JS

var app = angular.module("myApp", []);

app.controller("MainCtrl", function($scope) {

  // Populate the table with 0..100
  $scope.items = [];
  for (var i = 0; i < 100; i++) {
    $scope.items.push(i);
  }

  // This function is called when the button is clicked.
  $scope.scrollItemIntoView = function() {

    var scrollElement = $('.scrolling-container')[0];
    var itemToView = $('tr')[40];

    // This is where it all goes down.
    if (!itemIsInViewport(itemToView)) {
      scrollElement.scrollTop = itemToView.offsetTop;
    }

    // Determines if the item is already in view.
    function itemIsInViewport(item) {
      var $scrollElement = $('.scrolling-container');
      var upperBound = item.offsetTop;
      var lowerBound = item.offsetTop - $scrollElement.innerHeight();
      var currentPosition = $scrollElement.scrollTop();
      return lowerBound < currentPosition && currentPosition < upperBound;
    }

  }

});