Tabellensortierung und Zeilennummern

Sortieren Sie die Zeilen einer Tabelle nach der Spalte, in der sich die Einfügemarke befindet, fügen Sie eine Zeilennummerspalte hinzu, die sich selbst neu nummeriert, und verschieben Sie Zeilen und Spalten aus den Tabellenmenüs oder durch Ziehen einer Spalte. Zahlen, Geld, Daten und Text sind jeweils so sortiert, wie es die Leute erwarten.

Eine Auftragstabelle, sortiert nach der Gesamtzahl vom größten zum kleinsten, mit einer #-Spalte, die die Zeilen von 1 bis 4 nummeriert, während die Datumsspalte am Griff gezogen wird und eine blaue Linie markiert, wo sie landen wird, direkt nach der #-Spalte — Sortiert nach Gesamtzahl, größte zuerst, mit hinzugefügten Zeilennummern. Die Datumsspalte wird durch den Griff darüber gezogen; Die blaue Linie zeigt an, wo es abgelegt wird.

Schalten Sie es ein

Die Funktion ist dietabletools.jsPlugin (auch inplugins/all_plugins.js). Es fügt hinzu"Move Row Up"Und"Move Row Down"zum Zeilenmenü der Tabelle und"Move Column Left"Und"Move Column Right"zu seinem Spaltenmenü. Sortierung und Zeilennummern haben keine Symbolleistenschaltfläche; Rufen Sie sie über Ihre eigenen Tasten an"/"Menü (Schrägstrich-Befehls-Plugin) oder aus dem Skript.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/tabletools.js"></script>

<div id="editor"><table><tbody><tr><td>b</td><td>2</td></tr><tr><td>a</td><td>10</td></tr><tr><td>c</td><td>9</td></tr></tbody></table></div>
<button type="button" onclick="editor.sortTableAtCaret('asc')">Sort A-Z</button>
<button type="button" onclick="editor.sortTableAtCaret('desc')">Sort Z-A</button>
<button type="button" onclick="editor.execCommand('tablerownumbers')">Row numbers</button>
<script>
var editor = new RichTextEditor("#editor", {
    tableNumberSeries: "upper-alpha",
    tableNumberHeader: "Row"
});
</script>

Die Schaltflächen wirken sich auf die Tabelle und Spalte aus, in der die Einfügemarke zuletzt platziert wurde.

Optionen

Option	Standard	Was es bewirkt
`tableNumberSeries`	`"numeric"`	Beschriftungen für Zeilennummern:`numeric`, `upper-alpha`, `lower-alpha`, `upper-roman`oder`lower-roman`.
`tableNumberHeader`	`"#"`	Text der Zelle der Zahlenspalte in Kopfzeilen. Tabellen ohne Kopfzeile erhalten keine Kopfzelle.
`tableColumnDrag`	`true`	`false`Entfernt den Griff, der eine Spalte zieht.
`tableRowDrag`	`true`	`false`Entfernt den Zeilengriff (siehe Wissenswertes).

Sortierung

Der Typ jeder Spalte wird anhand ihrer Zellen erkannt. Eine Spalte mit $1,240.00, $95.50 und (500) wird nach Zahlen sortiert (Buchstabenklammern bedeuten negativ), eine Datumsspalte wird nach Datum sortiert, alles andere als Text mit darin enthaltenen Zahlen wird nach Wert verglichen.
Leere Zellen gehen in beide Richtungen nach unten. Gleiche Werte behalten ihre Reihenfolge, sodass das Sortieren nach einer Spalte und dann nach einer anderen funktioniert.
Zeilen in <thead> und <tfoot> werden nie verschoben, ebenso wenig wie eine erste Zeile, die nur aus <th>-Zellen besteht.
Eine Tabelle mit verbundenen Zellen (rowspan oder colspan im Hauptteil) ist nicht sortiert. Der Aufruf gibt { ok: false, reason: "This table has merged cells. …" }.

Methoden: editor.sortTableAtCaret("asc" | "desc"), editor.sortTableByColumn(index, "asc" | "desc") für die Tabelle am Caret und editor.canSortTable(). Eine Sortierung gibt { ok, reason, sortedBy, direction, detectedType } zurück. editor.execCommand("sorttable") sortiert auch, aber in 2.6.12 immer aufsteigend: Der Wert des Befehls wird nicht durchgereicht, also verwenden Sie sortTableAtCaret("desc") für absteigend.

Zeilennummern und Verschieben

editor.execCommand("tablerownumbers") fügt die Zahlenspalte hinzu oder entfernt sie; editor.addTableRowNumbers({ series: "lower-roman" }), editor.removeTableRowNumbers() und editor.hasTableRowNumbers() machen es vom Skript aus. Die Zahlen sind positionell: Nach einer Sortierung oder Verschiebung ist Zeile 1 die Zeile, die oben liegt.

Die schwebende Symbolleiste der Tabelle mit geöffnetem Zeilenmenü, in der die Optionen „Zeile darüber einfügen“, „Zeile darunter einfügen“, „Zeile löschen“, „Zeile nach oben verschieben“ und „Zeile nach unten verschieben“ aufgeführt sind — Das Zeilenmenü mit den beiden Bewegungsbefehlen, die dieses Plugin hinzufügt.

Zeilen werden innerhalb ihres Abschnitts verschoben und Kopfzeilen bleiben erhalten. editor.moveTableRow(-1 | 1) und editor.moveTableColumn(-1 | 1) bewirken dasselbe wie die Menübefehle. Die Zahlenspalte bleibt immer an erster Stelle. Eine Bewegung ist ein Rückgängig-Schritt.

Wissenswertes

Gespeichertes Markup mit Zeilennummern:
```
<table data-rte-rownum-series="upper-alpha"><tbody><tr><td data-rte-rownum="value">A</td><td>a</td><td>10</td></tr>…
```
Die Zahlen sind gewöhnliche Zellen, sie befinden sich also im gespeicherten HTML und sind überall sichtbar. Sanitizer müssen die Attribute data-rte-rownum und data-rte-rownum-series beibehalten, sonst behandelt der Editor die Spalte beim nächsten Mal als normale Daten.
In 2.6.12 erscheint der Zeilengriff nicht in einem normal platzierten Editor (seine Position wird in den falschen Koordinaten berechnet). Verschieben Sie Zeilen mit dem Zeilenmenü moveTableRow() oder mit Alt+Pfeil nach oben bzw. Alt+Pfeil nach unten des Editors. Der Säulengriff funktioniert.
Alt+Pfeil nach oben / Alt+Pfeil nach unten werden vom Editor selbst verarbeitet und nummerieren die Zahlenspalte nicht neu. Die Zahlen werden bei der nächsten Sortierung oder Menüverschiebung korrigiert.
Sortieren und Verschieben werden im Vorschlagsmodus (Änderungen verfolgen) abgelehnt und führen nichts aus, wenn der Editor schreibgeschützt oder schreibgeschützt ist.

Verwandt: Tabellenunterstützungsdemo, Lückencursor, Schrägstrichbefehlsdemo.