jQuery Mobile Tabellen

Responsive Tabellen

Responsive Design wird im Allgemeinen verwendet, um sich an verschiedene mobile Geräte der Benutzer anzupassen.

Wir müssen nur einen einfachen Klassennamen verwenden, und jQuery Mobile kann den Seiteninhalt automatisch an die Bildschirmgröße anpassen.

Responsive Tabellen sorgen dafür, dass sich der Seiteninhalt auf Mobil- und Desktop-Geräten gut anpasst.

Es gibt zwei Arten von responsiven Tabellen:ReflowundSpaltenumschaltung。

Reflow-Tabellen

Reflow-Modus-Tabellen werden horizontal angezeigt, wenn die Bildschirmgröße groß genug ist, und wenn die Bildschirmgröße klein genug wird, werden alle Daten vertikal angezeigt.

Um eine Tabelle zu erstellen, fügen Sie dem <table>-Element das Attribut data-role="table" und die Klasse "ui-responsive" hinzu:

Beispiel

Selbst ausprobieren »

	Bei responsiven Tabellen müssen Sie die Elemente <thead> und <tbody> einschließen. Verwenden Sie nicht die Attribute rowspan oder colspan; diese beiden Attribute werden in responsiven Tabellen nicht unterstützt.

Spaltenumschaltung

Der Spaltenumschaltungsmodus blendet Daten aus, wenn die Breite nicht ausreicht.

Eine Spaltenumschalt-Tabelle wird wie folgt erstellt:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

Standardmäßig blendet jQuery Mobile zuerst die Spalten auf der rechten Seite der Tabelle aus. Sie können jedoch die Reihenfolge der ausgeblendeten Spalten festlegen, indem Sie das Attribut data-priority zu den Tabellenüberschriften (<th>) hinzufügen. Der Wert von data-priority kann von 1 (höchste Priorität) bis 6 (niedrigste Priorität) reichen:

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th>

	Wenn Sie keine Priorität für eine Spalte angeben, bleibt die Spalte immer vorhanden und wird nicht ausgeblendet.

Kombinieren Sie die beiden oben genannten Codeausschnitte, um eine Spaltenumschalt-Tabelle zu erstellen, sodass Benutzer anpassen können, welche Spalten der Tabelle ausgeblendet werden:

Beispiel

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
    <tr>
      <th data-priority="6">Kunden-ID</th>
      <th>Kundenname</th>
      <th data-priority="1">Kontaktname</th>
      <th data-priority="2">Adresse</th>
      <th data-priority="3">Stadt</th>
      <th data-priority="4">Postleitzahl</th>
      <th data-priority="5">Land</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Deutschland</td>
    </tr>
</tbody>
</table>

Selbst ausprobieren »

Wir können das Attribut data-column-btn-text verwenden, um den Text der Umschalttabelle zu ändern: