行重新排序
DataTables通常用于显示顺序数据,因此自然而然地希望能够重新排序这些数据 - 为此,可以利用RowReorder扩展。通过它,最终用户可以通过单击并拖动(或在移动设备上触摸并拖动)表格中的行并更改其位置。还可以完全集成Editor的多行编辑功能,即可自动将更新内容写入数据库。
RowReorder使用数据交换方法进行操作,因此即使是非顺序数据也能进行操作。例如,考虑将行拖动到表格顶部,它将获取当前位于顶部位置的行的数据,当前顶部行将移到第二行,它将从此第二行中的行获取新值,依此类推。在修改的行中的数据点由rowReorder.dataSrc
定义。通常,您希望它是一个顺序数字!否则,数据重新排序可能会让最终用户感到困惑!
下载
获取并使用RowReorder的最简单方法是使用DataTables下载构建器,您可以在其中选择您希望在页面上使用的软件,并为您创建一个托管的单个JavaScript和CSS文件。
或者,您可以在页面上包含各个文件,下载发行包或者在GitHub上克隆源代码控制存储库。
初始化
可以在DataTable中使用rowReorder
选项(在DataTables选项对象中)初始化RowReorder - 这仅仅是布尔值true
,表示这些行应该可以重新排序,但也可以使用对象进行精细控制(有关详细信息,请参阅引用文档)
$('#myTable').DataTable( {
rowReorder: true
} );
特性
RowReorders提供了以下特性
- 支持单击和触控功能的DataTables行重新排序
- 与Editor完全集成
- 自定义拖动开始手柄
- 拖动对齐
- 与Bootstrap、Foundation和DataTables支持的其他样式库完全集成