Wie verwende ich die Tabellenkomponente von Layui zum Anzeigen von Daten?

Wie verwende ich die Tabellenkomponente von Layui zum Anzeigen von Daten?

Die Tabellenkomponente von Layui bietet eine einfache, aber leistungsstarke Möglichkeit, Daten in einem tabellarischen Format anzuzeigen. Der Kern der Verwendung von IT beinhaltet das Einrichten der Tabellenstruktur mithilfe von HTML und das Anschließung von Daten mit JavaScript. Hier ist eine Aufschlüsselung:

Zunächst müssen Sie die Layui CSS und JavaScript -Dateien in Ihr HTML einbeziehen:

 <code class="html"><link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script></code>

Als nächstes erstellen Sie ein table in Ihrem HTML, das als Behälter für Ihre Tabelle dient. Dieses Element benötigt ein id -Attribut für Layui, um es zu zielen. Sie können optional auch eine grundlegende Tabellenstruktur einfügen:

 <code class="html"><table id="demo" lay-filter="test"></table></code>

Das lay-filter Attribut ist entscheidend; Es wird verwendet, um die Tabelleninstanz für eine spätere Manipulation zu identifizieren.

Schließlich verwenden Sie JavaScript, um die Tabellendaten mit layui.table.render() zu rendern. Diese Funktion nimmt ein Objekt als Argument an und gibt verschiedene Optionen wie die Element ID ( elem ), Daten ( data ), Spalten ( cols ) und andere Konfigurationen an. Hier ist ein Beispiel:

 <code class="javascript">layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo' ,cols: [[ //标题栏{field: 'id', title: 'ID', width:80, sort: true} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:120} ,{field: 'sex', title: '性别', width:80} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width:170} ]] ,data: [ //假设数据{'id':'1','username':'张三','email':'zhangsan@gmail.com','sex':'男','city':'西安','sign':'hello'} ,{'id':'2','username':'李四','email':'lisi@gmail.com','sex':'女','city':'北京','sign':'hello world'} ] ,page: true //开启分页}); });</code>

Dieser Code macht eine Tabelle mit den angegebenen Spalten und Daten. Denken Sie daran, die Beispieldaten durch Ihre tatsächlichen Daten zu ersetzen. Die page: true Option ermöglicht Pagination (weiter unten erläutert).

Kann ich die Spalten in Layuis Tabellenkomponente anpassen?

Ja, die Tabellenkomponente von Layui bietet eine umfangreiche Spaltenanpassung. Sie können verschiedene Aspekte jeder Spalte steuern, einschließlich:

• field : Der Datenschlüssel, der der Spalte entspricht. So kodiert Layui Daten an Spalten.
• title : Der Spalten -Header -Text.
• width : Die Säulenbreite (in Pixeln oder Prozentsatz).
• sort : Aktiviert die Sortierung für diese Spalte (True/False).
• templet : Eine Funktion oder eine String -Vorlage, um anzupassen, wie Daten in der Zelle angezeigt werden. Dies ermöglicht eine komplexe Formatierung, einschließlich der Verwendung von Symbolen, Links oder anderen HTML -Elementen. Beispielsweise können Sie eine Vorlage verwenden, um den Status eines Benutzers mit einem farbigen Symbol anzuzeigen.
• toolbar : Ermöglicht Sie in der Zelle der einzelnen Zeile benutzerdefinierte Schaltflächen oder Aktionen. Dies ist nützlich für das Erstellen von Bearbeiten, Löschen oder anderen zeilenspezifischen Vorgängen.
• edit : Ermöglicht die Bearbeitung von Einstellungen. Auf diese Weise können Benutzer Daten in der Tabelle direkt ändern.
• type : Ermöglicht Ihnen verschiedene Spaltenypen wie das Kontrollkästchen "Kontrollkästchen" an, um jeder Zeile Kontrollkästchen hinzuzufügen.

Hier ist ein Beispiel, templet und toolbar demonstriert:

 <code class="javascript">cols: [[ {field: 'status', title: 'Status', templet: function(d){ return d.status === 1 ? '<span style="color:green;">Active</span>' : '<span style="color:red;">Inactive</span>'; }} ,{field: 'actions', title: 'Actions', toolbar: '#barDemo'} ]]</code>

Dies fügt eine Statusspalte mit bedingter Färbung und einer Aktionsspalte mit benutzerdefinierten Schaltflächen hinzu, die in einer Vorlage mit dem ID barDemo definiert sind.

Wie gehe ich mit Pagination mit Layuis Tischkomponente um?

Die Tabellenkomponente von Layui vereinfacht die Pagination. Um die Paginierung zu aktivieren, legen Sie einfach die page auf true in der table.render() Funktion:

 <code class="javascript">table.render({ // ... other options ... page: true });</code>

Dadurch wird automatisch Paginationskontrollen am unteren Rand der Tabelle hinzugefügt. Layui behandelt das Abrufen und Anzeigen von Daten für jede Seite. Sie können die Pagination weiter anpassen, indem Sie zusätzliche Optionen angeben:

• limit : Die Anzahl der Zeilen pro Seite.
• limits : Eine Reihe von Optionen für die Anzahl der Zeilen pro Seite, die Benutzer auswählen können.
• layout : Steuerelemente, welche Paginierungselemente angezeigt werden (z. B. "Count", "Prev", "Page", "Next", "Limit", "Skip").
• curr : Gibt die aktuelle Seitennummer an. Nützlich beim Laden einer bestimmten Seite.

Für größere Datensätze möchten Sie in der Regel Daten von Ihrer Backend -API in Brocken basierend auf der aktuellen Seitennummer und limit abrufen. Dies wird im nächsten Abschnitt behandelt.

Wie kann ich die Tabellenkomponente von Layui in meine Backend -API integrieren?

Durch die Integration von Layuis Tabelle in eine Backend-API werden Daten mit AJAX (normalerweise mit JQuery's $.ajax() oder dem integrierten fetch() API des Browsers) abgerufen und diese Daten anschließend an die table.render() übergeben. Normalerweise müssen Sie Ihre API -Aufrufe basierend auf der aktuellen Seite und dem Grenzwert anpassen.

Hier ist ein Beispiel mit fetch() :

 <code class="javascript">layui.use('table', function(){ var table = layui.table; let currentPage = 1; let pageSize = 10; function fetchData(page, limit) { return fetch(`/api/data?page=${page}&limit=${limit}`) .then(response => response.json()) .then(data => { return { data: data.items, // Assuming your API returns an object with 'items' property count: data.totalCount // Assuming your API returns total count }; }); } fetchData(currentPage, pageSize).then(data => { table.render({ elem: '#demo', cols: [[ /* ... your columns ... */ ]], data: data.data, page: { curr: currentPage, limit: pageSize, count: data.count } }); }); });</code>

Dieser Code ruft Daten aus /api/data ab, die die Seitennummer und die Begrenzung als Abfrageparameter übergeben. Die Antwort wird dann verwendet, um die Tabelle zu rendern. Denken Sie daran, den API -Endpunkt und die Datenstruktur so anzupassen, dass sie Ihrem Backend entspricht. Sie würden in der Regel Ereignishörer hinzufügen, um Paginationsänderungen zu verarbeiten und currentPage entsprechend zu aktualisieren, wodurch Daten nach Änderungen der Seite nachgefragt werden. Fehlerbehandlungs- und Belastungsindikatoren sind auch wichtige Überlegungen für eine produktionsbereite Implementierung.

Das obige ist der detaillierte Inhalt vonWie verwende ich die Tabellenkomponente von Layui zum Anzeigen von Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!