Wie Scroll Top zu einer bestimmten Zeile in der Tabelle

Question

Hey Ich habe eine App, die ein Diagramm und eine Tabelle hat. Das Diagramm, das die HighCharts-Bibliothek und die Tabelle verwendet, ist eine einfache Tabelle.

Jetzt habe ich mehrere Punkte in der Grafik lässt sagen, 10 Punkte und 10 Proben in der Tabelle.

Wenn ich auf einen Punkt klicke, wird ein Rückruf ausgeführt. Der Callback Markieren Sie die entsprechende Zeile in der Tabelle mit und und verwenden Sie scrollTop, um zu der bestimmten Zeile zu blättern, die hervorgehoben wurde.

Alles funktioniert in kleinen Skalen, der Punkt wurde angeklickt und wir scrollenTop zur rechten Reihe, die markiert wurde.

Dinge beginnen unordentlich zu werden, wenn ich in großen Skalen von Daten arbeite, sagen wir 200 Punkte und 200 Proben. Diesmal ist die richtige Zeile Highlight, aber die ScrollTop Aktion fehlt die Zeile und ich kann nicht sehen Markieren Sie die Zeile, wenn Sie nicht ein wenig blättern.

Es ist schwer, dieses Beispiel mit einer kleinen Fackel zu demonstrieren, also werde ich erklären, was ich getan habe. Im folgenden Code können Sie den ausgeführten Rückruf anzeigen, die ersten beiden Zeilen, die sich auf die Hervorhebungsaktion beziehen, mit einer allgemeinen ID zwischen Beispiel und Punkt ignorieren.

Von der vierten Zeile können Sie sehen, dass ich den Index der gewünschten Probe gelesen habe. Speichern Sie anschließend die Tabelle als Ziel, lesen Sie die Höhe des zweiten untergeordneten Elements der Tabelle ab (ignorieren Sie die Überschriften der Tabelle).

Dann rufe ich animate und scrollTop auf Höhe * Index, was bedeutet, dass ich die Höhe der Zeile von oben berechnet. Nehmen sich an der Höhe 43, dann ist,

Erste Probe in der ersten Reihe einen Abstand von 0 * 43 von der Spitze hat,

zweite Probe in der ersten Reihe einen Abstand von 1 * 43 hat von oben,

dritte Probe in der ersten Reihe hat einen Abstand von 2 * 43 von oben,

N Probe in der ersten Reihe einen Abstand von müssen (N-1) * 43 von oben und so weiter ..

$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); 
     }; 

Die Tabelle sieht wie dieses

<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> 

Abschließend meine Fragen ist, wie man eine bestimmte Zeile in einer Tabelle scrollTop von sagen wir 2000 Zeilen scrollTop von jquery verwenden?

Answer 1

Sie sind wahrscheinlich besser dran mit der nativen window.scroll, die zwei Argumente window.scroll(x-direction, y-direction) übernimmt. So, um zu einem bestimmten Element zu blättern, window.scroll(element.offsetLeft, element.offsetTop).