Question

嘿，我已经构建了一个有图表和表格的应用程序。使用HighCharts库和表的图是一个简单的表。

现在我在图表中有几个点可以说表中有10个点和10个样本。

当我点击某个点时，会执行回调。回调使用和id突出显示表中的特定行，并使用scrollTop滚动到突出显示的特定行。

每个小东西都可以正常工作，单击该点并滚动到右侧突出显示的行。

当我处理大规模的数据时，事情开始变得混乱，可以说200点和200个样本。这次正确的行突出显示，但是scrollTop操作缺少行，我看不到高亮行除非我滚动一点。

很难用一个小的jsfiddle演示这个例子，所以我将解释我的所作所为。在下面的代码中，您可以看到执行的回调，使用sample和point之间的公共id忽略与高亮操作相关的前两行。

从第四行开始，您可以看到我读取了所需样本的索引。然后将表保存为目标，读取表的第二个子节点的高度（忽略表的标题）。

然后我调用animate和scrollTop到Height * index，这意味着我从顶部计算了行的高度。可以说高度是43，

第一行中的第一个样本与顶部的距离为0 * 43，

第一行中的第二个样本与顶部的距离为1 * 43，

第一行中的第三个样本距离顶部的距离为2 * 43，

第一行中的N个样本距离顶部的距离为（N-1）* 43，依此类推。

$scope.highLightRow = function (id) {
            $scope.$apply(function () {
                $scope.selectedId = id;
            });
            var index = $scope.$eval("(detailedData|filter:{id:'" + $scope.selectedId + "'})[0]").index;
            var $target = $('#TableDetailedData');
            var height = $('#TableDetailedData tr:nth-child(2)').height();
            $target.animate({
                scrollTop: ((height || 43) * index)
            }, 500);
        };

表格看起来像这样

<div id="TableDetailedData" class="row collapse in overflow">
            <table class="table table-bordered table-scrolled">
                <thead class="thead-scrolled">
                    <tr>
                        <th class="font-blue-steel bold">Date</th>
                        <th class="font-blue-steel bold">Time</th>
                        <th class="font-blue-steel bold">Source</th>
                        <th class="font-blue-steel bold">Validity</th>
                        <th class="font-blue-steel bold">H2</th>
                        <th class="font-blue-steel bold">O2</th>
                        <th class="font-blue-steel bold">N2</th>
                        <th class="font-blue-steel bold">CH4</th>
                        <th class="font-blue-steel bold">CO</th>
                        <th class="font-blue-steel bold">C2H6</th>
                        <th class="font-blue-steel bold">C2H4</th>
                        <th class="font-blue-steel bold">C2H2</th>
                    </tr>
                </thead>
                <tbody  id="tableBody">
                    <tr id="{{::item.index}}" ng-repeat="item in detailedData" ng-init="item.index = $index" ng-class="{'bg-yellow-saffron': item.id == selectedId}">
                        <td>{{::item.date}}</td>
                        <td>{{::item.time}}</td>
                        <td>{{::item.source}}</td>
                        <td>{{::item.validity}}</td>
                        <td>{{::item.H2}}</td>
                        <td>{{::item.O2}}</td>
                        <td>{{::item.N2}}</td>
                        <td>{{::item.CH4}}</td>
                        <td>{{::item.CO}}</td>
                        <td>{{::item.C2H6}}</td>
                        <td>{{::item.C2H4}}</td>
                        <td>{{::item.C2H2}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

总之，我的问题是，如何使用jquery的scrollTop滚动到一个表中的特定行？比如2000行？

Answer 1

你可能最好使用带有两个参数window.scroll的原生window.scroll(x-direction, y-direction)。因此，要滚动到特定元素window.scroll(element.offsetLeft, element.offsetTop)。

如何将Top滚动到表格中的特定行

1 个答案: