← 全部文档

表格排序与行号

按光标所在的列对表格行排序,添加一个会自动重新编号的行号列,并通过表格菜单或拖动列来移动行和列。数字、金额、日期和文本都会按人们期望的方式排序。

一个按 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
行菜单,其中有这个插件添加的两个移动命令。

行在其所在的区段内移动,表头行保持不动。editor.moveTableRow(-1 | 1) 和 editor.moveTableColumn(-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 由编辑器本身处理,不会给编号列重新编号。编号会在下一次排序或通过菜单移动时被纠正。
  • 在建议(修订跟踪)模式下会拒绝排序和移动;编辑器为只读或仅批注模式时,它们不执行任何操作。

相关内容:表格支持演示、间隙光标、斜杠命令演示。