表格行重新排序
Bootstrap Table 的行重新排序扩展。
依赖:tablednd v0.9
如果需要,可以包含 bootstrap-table-reorder-rows.css 文件以使用默认的拖拽类。
使用方法
<link rel="stylesheet" href="extensions/reorder-rows/bootstrap-table-reorder-rows.css">
<script src=".../jquery.tablednd.js"></script>
<script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
示例
选项
reorderableRows
-
属性:
data-reorderable-rows
-
类型:
Boolean
-
详情:
设置为 true 以允许重新排序功能。
-
默认值:
false
onAllowDrop
-
属性:
data-on-allow-drop
-
类型:
function
-
详情:
传递一个函数,该函数将在一行悬停在另一行上时调用。如果函数返回 true,则允许放置在该行上,否则不允许。该函数接受 4 个参数:
- 被拖拽行的数据
- 光标下行的数据
- 被拖拽的行
- 光标下的行
它返回一个布尔值:true 允许放置,false 不允许放置。
-
默认值:
null
onDragStop
-
属性:
data-on-drag-stop
-
类型:
function
-
详情:
传递一个函数,该函数将在用户停止拖拽时调用,无论行是否已重新排列。该函数接受 3 个参数:表格、行数据和用户正在拖拽的行。
-
默认值:
null
onDragStyle
-
属性:
data-on-drag-style
-
类型:
String
-
详情:
这是拖拽期间分配给行的样式。与行关联的样式有一些限制(例如,你不能很好地分配边框,即使可以,也不会显示)。
-
默认值:
null
onDragClass
-
属性:
data-on-drag-class
-
类型:
String
-
详情:
这个类在拖拽期间被添加,并在行被放置时移除。比使用 onDragStyle 更灵活,因为它可以被行单元格和其他内容继承。
-
默认值:
reorder-rows-on-drag-class
onDropStyle
-
属性:
data-on-drop-style
-
类型:
String
-
详情:
这是行被放置时分配的样式。与 onDragStyle 一样,你可以做的事情有限。此外,这会替换原始样式,所以再次考虑使用 onDragClass,它只是简单地添加然后在放置时移除。
-
默认值:
null
onReorderRowsDrag
-
属性:
data-on-reorder-rows-drag
-
类型:
Function
-
详情:
传递一个函数,该函数将在用户开始拖拽时调用。该函数接受 1 个参数:用户开始拖拽的行。
-
默认值:
空函数
onReorderRowsDrop
-
属性:
data-on-reorder-rows-drop
-
类型:
Function
-
详情:
传递一个函数,该函数将在行被放置时调用。该函数接受 1 个参数:被放置的行。
-
默认值:
空函数
dragHandle
-
属性:
data-drag-handle
-
类型:
String
-
详情:
这是光标元素。
注意:此选项主要用于适配
TableDnD
插件。在没有特殊情况下,请不要修改默认值。 -
默认值:
>tbody>tr>td:not(.bs-checkbox)
useRowAttrFunc
-
属性:
data-use-row-attr-func
-
类型:
Boolean
-
详情:
如果你的
tr
元素没有id
属性,则必须使用此函数。如果tr
元素没有id
属性,此插件将不会触发 onDrop 事件。 -
默认值:
false
事件
onReorderRow(重新排序行.bs.table)
当行被放置时触发,接收两个参数:
- The new table data
- The dropped row
- The row of the old position