jQuery ermöglicht nahtloses Scrollen von Tabellen

jQuery ermöglicht nahtloses Scrollen von Tabellen

In diesem Artikelbeispiel wird der spezifische Code von jQuery zum nahtlosen Scrollen der Tabelle zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Für den CSS-Teil habe ich Elastic Layout verwendet

*{
            Rand: 0;
            Polsterung: 0;
        }
        ul,li{
            Listenstil: keiner;
        }
        .tableBox{
            Breite: 500px;
            Höhe: 520px;
            Hintergrund: #e8e8e8;
            Rand: 0 automatisch;
            Überlauf: versteckt;
        }
        .Folientitel{
            Höhe: 2,5rem;
            Zeilenhöhe: 2,5rem;
            Anzeige: Flex;
            Hintergrund: #223e80;
            Farbe: #fff;
            Textausrichtung: zentriert;
        }
        .Folientitel span{
            biegen: 1;
        }
        .Folienliste li{
            Zeilenhöhe: 1,875rem;
            Höhe: 1,875rem;
            Anzeige: Flex;
        }
        .slide-list li span{
            biegen: 1;
            Textausrichtung: zentriert;
        }
        .Folienliste li.odd{
            Hintergrund: rgba (0,0,0,.3)
        }

Struktur

<div Klasse="tableBox">
    <div Klasse="Folientitel">
        <span>Titel1</span>
        <span>Titel2</span>
        <span>Titel3</span>
    </div>
    <div Klasse="Foliencontainer">
        <ul Klasse="Folienliste js-Folienliste">
            <li class="odd"><span>Artikel1</span><span>Artikel1</span><span>Artikel1</span></li>
            <li class="even"><span>Artikel2</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel3</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel4</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel5</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel6</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel7</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel8</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel9</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel10</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel11</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel12</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel13</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel14</span><span>Artikel2</span><span>Artikel2</span></li>
            <li class="odd"><span>Artikel15</span><span>Artikel3</span><span>Artikel3</span></li>
            <li class="even"><span>Artikel16</span><span>Artikel2</span><span>Artikel2</span></li>
        </ul>
    </div>
</div>

Zum Schluss noch der Schlüsselteil, der js-Teil

So löschen Sie den Timer, wenn die Maus darüber bewegt wird

$(Funktion(){
    // Löschen Sie den Timer, wenn die Maus über $(".slide-list").hover(function(){ bewegt wird.
        : Löschintervall(ScrollTimer);
    },Funktion(){
        scrollTimer = Intervall festlegen(Funktion (){
            autoScroll(".Folienliste")
        },2000);
    });
 
 
    Funktion autoScroll(Objekt){
            var tableUl = $(obj);
            var erste = tableUl.find('li:erste');
            var Höhe = erste.Höhe();
            zuerst.animieren({
                Höhe: 0
            },500,Funktion(){
                first.css('Höhe',Höhe).appendTo(tableUl);
            })
    }
   var scrollTimer = setzeIntervall(Funktion(){
        autoScroll(".Folienliste")
    },2000)
})

2. Der Timer wird nicht gelöscht, wenn die Maus darüber bewegt wird

$(Funktion(){
    
    
    Funktion autoScroll(Objekt){
            var tableUl = $(obj);
            var erste = tableUl.find('li:erste');
            var Höhe = erste.Höhe();
            zuerst.animieren({
                Höhe: 0
            },500,Funktion(){
                first.css('Höhe',Höhe).appendTo(tableUl);
            })
    }
   setzeIntervall(Funktion(){
        autoScroll(".Folienliste")
    },2000)
})

Der erzielte Effekt:

Ich bin beim Aufrufen der Schnittstellenabfrage auf eine Grube getreten. Wenn Sie zu einem Schnittstellenaufruf wechseln, müssen Sie daran denken, eine Beurteilung hinzuzufügen, ob ein Timer vorhanden ist.

wenn(timer != null) {
    Intervall löschen(Timer);
}

Der vollständige Code lautet wie folgt

$(Funktion(){
 
 
var allUrl = "http://localhost:8899/tv/alldata";
 
renderPage();
 
 var Timer = Intervall festlegen(Funktion(){
    renderPage ()
},5000);
wenn(timer != null) {
    Intervall löschen(Timer);
}
 
 
Funktion renderPage () {
    konsole.log(111);
    $.ajax({
        url:alleUrl,
        asynchron:wahr,
        Erfolg:Funktion(Ergebnis){
          console.log(Ergebnis);
          wenn(Ergebnis.Erfolg === wahr){
              Konsole.log('Daten',Ergebnis.Daten);
              var niujuOneData = result.data.counts[0].tvmTvToolUsageCount;
              var niujuTwoData = result.data.counts[1].tvmTvToolUsageCount;
              var niujuThreeData = result.data.counts[2].tvmTvToolUsageCount;
              var niujuFourData = result.data.counts[3].tvmTvToolUsageCount;
              var recordTableData = Ergebnis.Daten.History;
              var useTableOneData = result.data.usage.needCheckTools;
              var useTableTwoData = result.data.usage.expireCheckTools;
              var useTableThreeData = result.data.usage.usingTools;
              console.log('Daten 1',niujuOneData)
 
              renderNiuju('#banshouOne','#otherOne','#totalOne',niujuOneData);
              renderNiuju('#banshouZwei','#andereZwei','#totalZwei',niujuZweiDaten);
              renderNiuju('#banshouThree','#otherThree','#totalThree',niujuThreeData);
              renderNiuju('#banshouVier','#andereVier','#totalVier',niujuVierDaten);
              renderRecordTable('#tvTableFour',recordTableData);
              renderUseStateTable ('#tvTableOne', useTableOneData);
              renderUseStateTable ('#tvTableTwo', useTableTwoData);
              renderUseStateTable('#tvTableThree',useTableThreeData);
          }
        }
    });
};
/**
 * Drehmomentdaten-Rendering-Funktion */
Funktion renderNiuju (obj1,obj2,obj3,tableData) {
    var niujuWrenchString = '<div class="tq-niuju-title-item blue">'+tableData.torqueToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.torqueToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.torqueToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.torqueToolNeedCheckCount+'</div>'
    var orderToolString = '<div class="tq-niuju-title-item blue">'+tableData.otherToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.otherToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.otherToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.otherToolNeedCheckCount+'</div>'
    var toolTotalString = '<div class="tq-niuju-title-item blue">'+tableData.totalToolCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.totalToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.totalToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.totalToolNeedCheckCount+'</div>'
 
    $(obj1).html(niujuWrenchString)
    $(obj2).html(orderToolString)
    $(obj3).html(toolTotalString)
 
}
 
/**
 * Funktion zur Darstellung der Operationsdatensatztabelle */
Funktion renderRecordTable (Objekt, Tabellendaten) {
    var Tabellenzeichenfolge = '';
    $.each(Tabellendaten,Funktion(Index,Wert){
        wenn(index % 2 == 0){
            Tabellenzeichenfolge += ' <li Klasse="ungerade">'+
                '<div class="tq-des">'+Wert.Inhalt+'</div>'+
                '<div class="tq-time">'+Wert.Erstellungszeit+'</div>'+
                '</li>'
        }anders{
            Tabellenzeichenfolge += ' <li Klasse="gerade">'+
                '<div class="tq-des">'+Wert.Inhalt+'</div>'+
                '<div class="tq-time">'+Wert.Erstellungszeit+'</div>'+
                '</li>'
        }
    });
    $(obj).leer();
    $(obj).html(Tabellenzeichenfolge);
}
 
Funktion renderUseStateTable (Objekt, Tabellendaten) {
    var Tabellenzeichenfolge = '';
 
    $.each(Tabellendaten,Funktion(Index,Wert){
        wenn(index % 2 == 0){
            Tabellenzeichenfolge += '<li class="odd">'+
                '<span>'+Wert.GesamtPositionskodierung+'</span><span>'+Wert.ToolCode+'</span>'+
                '</li>'
        }anders{
            Tabellenzeichenfolge += '<li class="even">'+
                '<span>'+Wert.GesamtPositionskodierung+'</span><span>'+Wert.ToolCode+'</span>'+
                '</li>'
        }
    })
 
    $(obj).html(Tabellenzeichenfolge);
 
}
 
setzeIntervall(Funktion(){
    autoScroll("#tvTableOne")
    autoScroll("#tvTableTwo")
    autoScroll("#tvTableThree")
    autoScroll("#tvTableFour")
},2000)
 
Funktion autoScroll(Objekt){
    var tableUl = $(obj);
    var erste = tableUl.find('li:erste');
    var Höhe = erste.Höhe();
    zuerst.animieren({
        Höhe: 0
    },500,Funktion(){
        first.css('Höhe',Höhe).appendTo(tableUl);
    })
}
 
 
});

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Jquery implementiert nativ den Tabellenkopf zum Scrollen mit der Bildlaufleiste
  • asp.net+jquery-Bildlaufleiste zum Laden der Daten-Dropdown-Steuerung
  • Die jQuery-Scrolling-Komponente (vticker.js) realisiert den Scroll-Effekt dynamischer Daten auf der Seite
  • Basierend auf jQuery wird die Funktion zum automatischen Laden von Daten beim Scrollen der Seite nach unten realisiert
  • js/jquery-Steuerseite dynamisches Laden von Daten gleitende Bildlaufleiste automatische Ladeereignismethode
  • jQuery-Scroll-Ladedatenmethode
  • Verwenden Sie jQuery oder natives js, um durch Scrollen mit der Maus neue Daten auf die Seite zu laden
  • JQuery-Ankündigungs-Scrollen + AJAX-Hintergrund zum Abrufen von Daten
  • jQuery-Code zum Laden von Daten durch Ziehen der Bildlaufleiste
  • jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten

<<:  Detaillierte Erklärung der referenziellen Integrität in SQL (eins-zu-eins, eins-zu-viele, viele-zu-viele)

>>:  Detaillierte Erklärung zur Installation von MariaDB 10.2.4 auf CentOS7

Artikel empfehlen

Beispielcode zur Implementierung eines 3D-Zauberwürfels mit CSS

Lassen Sie uns heute einen einfachen 3D-Zauberwür...

Lösungen für Probleme im Zusammenhang mit der Meldung von Softwarepaketabhängigkeiten während der Installation unter Linux

Inhaltsverzeichnis Hintergrund 1) Aktivieren Sie ...

So konfigurieren Sie den Whitelist-Zugriff in MySQL

Schritte zum Konfigurieren des Whitelist-Zugriffs...

Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

Inhaltsverzeichnis 1. Verwenden Sie Plugin-Ausdrü...

So konfigurieren Sie SSH für die Anmeldung bei Linux mit Git Bash

1. Generieren Sie zunächst die öffentlichen und p...

Docker-Bereitstellung - Nginx-Implementierungsprozess - Grafik und Text - detaillierte Erläuterung

1. Laden Sie nginx herunter [root@localhost my.Sh...

Überwachung sowie Betrieb und Wartung von Linux-Diensten

Inhaltsverzeichnis 1. Installieren Sie das psutil...

html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt

Die Methode zum Umbrechen des Inhalts (Titelattrib...

Design-Tipps: Wir glauben, es wird Ihnen gefallen

<br />Wenn Sie sich diesen Titel ansehen, ko...

Analyse der Nginx-Konfiguration und häufig gestellter Fragen des Alibaba Cloud CentOS7-Servers

Vorwort: Dieser Artikel bezieht sich auf den Blog...

Über React Native, das keine Verbindung zum Simulator herstellen kann

React Native kann native iOS- und Android-Apps ba...

Detaillierte Erläuterung der Verwendung der Cloud-native-Technologie Kubernetes Scheduling Unit Pod

Die kleinste Planungseinheit in k8s --- pod Im vo...

Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt

Als ich heute Tomcat für den Zugriff auf die Proj...

MySQL extrahiert zufällig eine bestimmte Anzahl von Datensätzen

Früher habe ich zur Handhabung dieser Art von Nut...

Eine kurze Erläuterung der Lösung für den Fehler beim Starten der Serverinstallation in MySQL

Wenn Sie MySQL zum ersten Mal auf Ihrem Computer ...