row-reorder
自从:RowReorder 1.0.0
行已被最终用户重新排序。
请注意 - 此属性需要使用适用于 DataTables 的 RowReorder 扩展。
描述
当使用 RowReorder 时,您可能希望知道一个表格何时已被最终用户重新排序,以便您可以更新数据存储以反映这些变更。此事件提供了该功能。
在事件处理程序回调函数的参数中,以两种不同的形式给出了已被 RowReorder 更改的数据 - 一种是以有关各个行的详细信息,一种是以适用于 Editor 多行编辑功能的格式给出的数据。
此事件在行被放下但数据库中尚未写入新数据之前触发。
从 RowReorder 1.4.1 开始,此事件可以通过从事件处理程序函数返回 false
来取消。如果有多个事件处理程序,则在所有事件处理程序按顺序执行后,将使用最后一个非 undefined
的返回值作为返回值。
请注意,与所有 DataTables 发出的事件一样,此事件将随 dt
命名空间一起触发。因此,要监听此事件,您还必须使用 dt
命名空间,方法是简单地将 .dt
追加到您的事件名称,或使用 on()
方法来监听事件,该方法会自动追加此命名空间。
类型
function function( e, details, edit )
- 参数
名称 类型 可选 1 e
否 jQuery 事件对象
2 details
否 一个更改对象数组,这些对象的值受到了值的影响。每个对象都包含下列属性
Any
newData
- 行的新数据值(数据点由rowReorder.dataSrc
定义)node
node
-tr
元素integer
newPosition
- DOM 中的新索引Any
oldData
- 行的旧数据值integer
oldPosition
- DOM 中的旧索引
3 edit
否 此参数提供了 Editor 执行多行编辑所需的信息
string
dataSrc
- 数据点 - 一般为要编辑的字段(由rowReorder.dataSrc
定义)array
nodes
- 要编辑的行object
values
- 适用于multiSet()
的格式的新值。DataTable.Api
triggerRow
(v1.1.0 之后) - 用于开始重新排序的行 (i.e.row()
的结果) 的行 API 实例。object
originalEvent
(v1.2.6 之后) - 触发重新排序的原始事件 (mouseup)。
示例
向所有已更改行添加一个类
var table = new DataTable('#myTable', {
rowReorder: true
});
table.on('row-reorder', function (e, diff, edit) {
for (var i = 0, ien = diff.length; i < ien; i++) {
$(diff[i].node).addClass('reordered');
}
});
使用 Editor 的多行编辑功能在行重新排序时更新数据库
table.on('row-reorder', function (e, details, changes) {
editor
.edit(changes.nodes, false, {
submit: 'changed'
})
.multiSet(changes.dataSrc, changes.values)
.submit();
});