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

Was sind die Kernmodule von node.js

Inhaltsverzeichnis Globales Objekt Globale Objekt...

JavaScript + HTML zur Implementierung der Sliding-Verifizierung für Front-End-Seiten

In diesem Artikel wird der spezifische Code von J...

So installieren und implementieren Sie MySQL schnell im Windows-System (grüne, kostenlose Installationsversion)

Laden Sie zunächst die grüne kostenlose Installat...

Vier Methoden zur Datentypbeurteilung in JS

Inhaltsverzeichnis 1. Art von 2. Instanz von 3. K...

So verwenden Sie Standardwerte für Variablen in SASS

Bei in SASS definierten Variablen überschreibt de...

Zusammenfassung gängiger Docker-Befehle

Docker-Installation 1. Anforderungen: Linux-Kerne...

JavaScript zum Erreichen eines Mouse-Tailing-Effekts

Mauseffekte erfordern die Verwendung von setTimeo...

Lösung für das Problem, dass die Umleitung der Crontab-Ausgabe unter Linux nicht wirksam wird

Frage Unter LINUX werden periodische Aufgaben nor...

JavaScript implementiert das Protokollbeispiel, in dem der Benutzer das Kontrollkästchen aktivieren muss

Legen Sie in js fest, dass der Benutzer vor der Ü...

MySQL-Paket für Abfrage ist zu groß – Problem und Lösung

Problembeschreibung: Fehlermeldung: Ursache: com....

So finden Sie identische Dateien in Linux

Während der Nutzung des Computers entsteht im Sys...

Entwicklung einer Vue Element-Frontend-Anwendung zum Abrufen von Backend-Daten

Inhaltsverzeichnis Überblick 1. Erfassung und Ver...

Lösung für Win10 ohne Hyper-V

Suchen Sie immer noch nach einer Möglichkeit, Hyp...

Ein praktischer Bericht über die Wiederherstellung einer MySQL Slave-Bibliothek

Beschreibung der Situation: Heute habe ich mich b...

Tutorial zur Installation von Pycharm und Ipython unter Ubuntu 16.04/18.04

Unter Ubuntu 18.04 1. sudo apt install python ins...