Расширение для изменения порядка строк 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>

Примеры

Reorder Rows

Опции

reorderableRows

  • Атрибут: data-reorderable-rows

  • Тип: Boolean

  • Описание:

    Управляет включением функции перетаскивания строк. При установке в true позволяет пользователям настраивать порядок строк таблицы путём перетаскивания.

  • Значение по умолчанию: false

onAllowDrop

  • Атрибут: data-on-allow-drop

  • Тип: function

  • Описание:

    Вызывается, когда перетаскиваемая строка наводится на другую строку. Если функция возвращает true, это означает, что разрешено размещение на этой строке; в противном случае — не разрешено. Всего 4 параметра:

    • данные перетаскиваемой строки
    • данные строки, на которой находится курсор
    • элемент DOM перетаскиваемой строки
    • элемент DOM строки, на которой находится курсор
  • Значение по умолчанию: null

onDragStop

  • Атрибут: data-on-drag-stop

  • Тип: function

  • Описание:

    Вызывается при завершении перетаскивания, независимо от того, изменён ли порядок. Параметры: таблица, данные перетаскиваемой строки, элемент DOM перетаскиваемой строки.

  • Значение по умолчанию: 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

  • Описание:

    Стиль, применяемый после размещения строки, также существуют ограничения стилей; и заменит исходный стиль, если нет необходимости, рекомендуется использовать onDragClass.

  • Значение по умолчанию: null

onReorderRowsDrag

  • Атрибут: data-on-reorder-rows-drag

  • Тип: Function

  • Описание:

    Вызывается, когда пользователь начинает перетаскивание, параметр — элемент DOM перетаскиваемой строки.

  • Значение по умолчанию: пустая функция

onReorderRowsDrop

  • Атрибут: data-on-reorder-rows-drop

  • Тип: Function

  • Описание:

    Вызывается при размещении строки, параметр — элемент DOM размещённой строки.

  • Значение по умолчанию: пустая функция

dragHandle

  • Атрибут: data-drag-handle

  • Тип: String

  • Описание:

    Указывает элемент курсора, используемый при перетаскивании.

    Примечание: Эта опция в основном используется для адаптации плагина TableDnD, при отсутствии особых требований не изменяйте значение по умолчанию.

  • Значение по умолчанию: >tbody>tr>td:not(.bs-checkbox)

useRowAttrFunc

  • Атрибут: data-use-row-attr-func

  • Тип: Boolean

  • Описание:

    Должен быть включён, когда у элемента tr нет атрибута id, в противном случае плагин не вызовет событие onDrop.

  • Значение по умолчанию: false

События

onReorderRow (reorder-row.bs.table)

Срабатывает при завершении размещения строки, параметры включают:

  • новые данные таблицы
  • перетаскиваемая строка
  • строка, находящаяся в исходной позиции