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

问题描述：

我有一个固定的高度div内的表，我想从控制器中更改该行中的数据时将行滚动到视图中。我曾尝试几种方法，StackOverflow的解释质疑如何自动滚动到固定大小div内的表格行？

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>

想制作snipeet还是jsfiddlle？ –

@artgb我添加了一段代码，显示我遇到的问题 –

答

您的问题是在这条线

<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内的表格行？

相关推荐