← すべてのドキュメント

テーブルの並べ替えと行番号

カーソルのある列で行を並べ替え、自動で振り直す行番号列を追加し、テーブルのメニューや列のドラッグで行と列を移動できます。数値、金額、日付、テキストを、それぞれ自然な順序で並べます。

Total の大きい順に並べた注文テーブル。# 列に 1～4 の行番号があり、Date 列をグリップでドラッグしています。# 列の直後のドロップ先を青い線が示しています
Total の大きい順に並べ、行番号を追加した状態です。Date 列の上のグリップをドラッグしており、青い線がドロップ先を示しています。

有効にする

この機能は tabletools.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。行メニューに「Move Row Up」「Move Row Down」、列メニューに「Move Column Left」「Move Column Right」を追加します。並べ替えと行番号にはツールバーボタンがないため、独自のボタン、「/」メニュー（スラッシュコマンドのプラグイン）、スクリプトから呼び出します。

<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>

ボタンは、最後にカーソルを置いたテーブルと列に作用します。

オプション

オプション既定値動作
tableNumberSeries"numeric"行番号の表記です。numeric、upper-alpha、lower-alpha、upper-roman、lower-roman を指定できます。
tableNumberHeader"#"見出し行の番号列に表示するテキストです。見出し行がないテーブルには見出しセルを追加しません。
tableColumnDragtruefalse にすると列のドラッグ用グリップを表示しません。
tableRowDragtruefalse にすると行のグリップを表示しません。「注意点」を参照してください。

並べ替え

  • 各列の型はセルから検出します。$1,240.00、$95.50、(500) の列は数値として並べます。会計形式の括弧は負数を表します。日付の列は日付順、それ以外はテキストとして並べ、テキスト内の数値は値で比較します。
  • 空のセルは、昇順でも降順でも末尾に置きます。同じ値の順序は保つため、ある列で並べた後に別の列で並べる操作もできます。
  • <thead> と <tfoot> の行、および <th> だけで構成される先頭行は移動しません。
  • 本文に結合セル（rowspan または colspan）があるテーブルは並べ替えません。呼び出しは { ok: false, reason: "This table has merged cells. …" } を返します。

メソッドは、カーソル位置のテーブルに使う editor.sortTableAtCaret("asc" | "desc") と editor.sortTableByColumn(index, "asc" | "desc")、および editor.canSortTable() です。並べ替えは { ok, reason, sortedBy, direction, detectedType } を返します。editor.execCommand("sorttable") も並べ替えますが、2.6.12 ではコマンドの値が渡されず、常に昇順になります。降順には sortTableAtCaret("desc") を使ってください。

行番号と移動

editor.execCommand("tablerownumbers") は番号列を追加または削除します。スクリプトでは editor.addTableRowNumbers({ series: "lower-roman" })、editor.removeTableRowNumbers()、editor.hasTableRowNumbers() を使います。番号は位置を表すため、並べ替えや移動の後は、最上部の行が行 1 になります。

行メニューを開いたテーブルのフローティングツールバー。Insert Row Above、Insert Row Below、Delete Row、Move Row Up、Move Row Down が並んでいます
このプラグインが追加する 2 つの移動コマンドを表示した行メニューです。

行は同じセクション内で移動し、見出し行は動きません。editor.moveTableRow(-1 | 1) と editor.moveTableColumn(-1 | 1) はメニューと同じ動作です。番号列は常に先頭に残ります。1 回の移動が、元に戻す 1 段階になります。

注意点

  • 行番号付きで保存するマークアップです。
    <table data-rte-rownum-series="upper-alpha"><tbody><tr><td data-rte-rownum="value">A</td><td>a</td><td>10</td></tr>…
    番号は通常のセルなので、保存する HTML に含まれ、どこでも表示できます。サニタイザーでは data-rte-rownum と data-rte-rownum-series 属性を保持してください。削除すると、次回は通常のデータ列として扱われます。
  • 2.6.12 では、通常の配置のエディターに行グリップが表示されません。誤った座標系で位置を計算するためです。行メニュー、moveTableRow()、またはエディターの Alt+ArrowUp / Alt+ArrowDown で移動してください。列グリップは動作します。
  • Alt+ArrowUp / Alt+ArrowDown はエディター自身が処理し、番号列を振り直しません。次の並べ替えやメニューからの移動で番号を修正します。
  • 提案（変更履歴）モードでは並べ替えと移動を拒否します。読み取り専用またはコメント専用の場合も、何もしません。

関連情報：テーブル機能のデモ、ギャップカーソル、スラッシュコマンドのデモ。