当所选行是最后一行之前的行时自动滚动表格 [英] Automatically scroll table when the selected row is the row before last row
问题描述
我有一个与滚动表相关的问题。
当选择ROW 8时，该表应该自动滚动。此时，下一行（ROW 9）是VISIBLE，顶部行应该是不可见的。
我的目的是在当前选中的行，我也可以看到下一行。当我点击下一个/上一个按钮时，应该滚动表格，直到到达最后一个可见行，然后该行将成为最后一行之前的行。
我没有有任何想法来解决这个问题。
请帮助我。
最好的问候，
肯。
下面的代码片段使用窗口滚动到表的特定 tr 。
在每一个next / prev点击分别增加/减少 selectedIndex ，然后滚动到表中的那一行索引。
var app = angular.module（app，[]）; app.controller（ctrl，函数（$ 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.se lectedIndex = $ 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;位置：固定; top：0;左：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 =appng-controller =ctrl> < div class =fixed-header> < button ng-click =PrevRow（）>上一个按钮< /按钮> < button href =ng-click =NextRow（）>下一个按钮< /按钮> < / DIV> < DIV> <表> < TBODY> < tr ng-repeat =行中的行> < td class =anchorng-style =selectedIndex == $ index&& {'background-color'：'lightblue'}> {{row}}< / td> < / TR> < / tbody的> < /表> < / body>
I have an issue related to scrolling table.
When the page is loaded, the first row (ROW 1) will be default selected row (highlighted row). If we click next button the next row will be selected and highlighted. The issue is if the ROW >= 8 (e.g ROW 9, 10...) being selected, the table do not automatically scroll so we can not see the current selected is also being highlighted. Behaviours should be as follow image:
When the ROW 8 is being selected, the table should be scrolled automatically. At this time, the next row (ROW 9) is VISIBLE and the top rows should be invisible.
My purpose is at current selected row I also can see the next row. The table should be scrolled when I click next/previous button until reach the last visible row and then that row will become the row before the last row.
I don't have any idea to solve this issue. Please help me.
Best Regards, Ken.
The below snippet makes use of window to scroll to specific tr of the table.
On each next/prev click increment/decrease the selectedIndex respectively and scroll to that index of row in table.
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>
这篇关于当所选行是最后一行之前的行时自动滚动表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
