Question

我在固定高度div内有一个表，我想在控制器中更改行中的数据时将一行滚动到视图中。我尝试过在StackOverflow问题上解释的几种方法

automatically-scroll-table-when-the-selected-row-is-the-row-before-last-row
how-do-i-auto-scroll-to-a-specific-table-row

但他们不适合我。我的桌子如下。

<div style="overflow: auto; max-height: 200px; margin-bottom: 20px;">
        <div class="scroll-wrapper" style="width: 100%; margin-right: 20px;">
            <table id="progressTable" class="table table-border widgetTable">
                <tbody>
                <tr ng-repeat="service in serviceList">
                    <td>{{service.name}}</td>
                    <td class="text-right" style="padding-right: 25px;">
                        <span ng-show="service.status == 1" class="specialIcon icon-tick-inside-circle" style="color: #7EC848"></span>
                        <span ng-show="service.status == 2" class="specialLargerIcon icon-cross-inside-circle" style="color: #D93A1B"></span>
                        <span ng-show="service.status == 3">Pending</span>
                        <span ng-show="service.status == 4">&nbsp;</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

我希望在状态发生变化时将行滚动到焦点。如何用角度来实现这个目标？

以下是解释我的问题的代码段。我希望div在单击更改状态按钮时将表格滚动到第2行。

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.selectedIndex = 0;
  $scope.serviceList = [{
    name: 'One',
    status: 3
  }, {
    name: 'Two',
    status: 3
  }, {
    name: 'Three',
    status: 3
  }];

  $scope.focusRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === $scope.serviceList.length - 1 ? $scope.serviceList.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.change = function() {
    $scope.selectedIndex = 1;
    $scope.serviceList[1].status = 1;
    $scope.focusRow();
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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 style="overflow: auto; max-height: 50px; margin-bottom: 20px;">
    <div class="scroll-wrapper" style="width: 100%; margin-right: 20px;">
      <table id="progressTable" class="table table-border widgetTable">
        <tbody>
          <tr ng-repeat="service in serviceList">
            <td>{{service.name}}</td>
            <td class="text-right" style="padding-right: 25px;">
              <span ng-show="service.status == 1">1</span>
              <span ng-show="service.status == 2">2</span>
              <span ng-show="service.status == 3">Pending</span>
              <span ng-show="service.status == 4">&nbsp;</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <button class='btn btn-sm' ng-click='change()'>Change status</button>
  </div>
</body>

Answer 1

你的问题就在这一行

<div style="overflow: auto; max-height: 200px; margin-bottom: 20px;">

和

var w = $(window);

我已经改变了

<div id = "xxx" style="overflow: auto; height: 50px; margin-bottom: 20px;">

和

var w = ('#xxx');

现在正在工作。见jsfiddle https://jsfiddle.net/b6xgjfwg/17/

如何自动滚动到固定大小div内的表格行？

1 个答案: