table dragger — плагин для сортировки таблицы на JS

27.01.2017 weatherless JavaScript » Таблицы » #156

Смотреть Источник Скачать

Удобный плагин для создания JavaScript динамическая таблица с сортировкой и перетаскиванием данных.

Если Вам необходима сортировка таблицы JavaScript, то этот плагин идеально Вам подойдет. Он позволяет делать таблицы динамическими: перетаскивать и выстраивать положение строк\столбцов так, как пожелает пользователь.

Особенности:

Супер легко установить
Cellspacing, cellpadding, col и colgroup учитывается
Возможность сортировки столбцов или строк одновременно
Плавная анимация при сортировке
Нет лишних зависимостей
Поддержка сенсора

Использование:

Подключаем файл библиотеки

&lt;script src="../node_modules/table-dragger/dist/table-dragger.min.js"&gt;&lt;/script&gt;

1 2	<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

обычная HTML-разметка таблицы

&lt;table id="table"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
    &lt;th class='handle'&gt;header1&lt;/th&gt;
    &lt;th class='handle'&gt;header2&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;conten1&lt;/td&gt;
    &lt;td&gt;conten2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

<thead>

<tr>

<th class='handle'>header1</th>

<th class='handle'>header2</th>

</tr>

</thead>

<tbody>

<tr>

<td>conten1</td>

<td>conten2</td>

</tr>

</tbody>

</table>

и указываем работу самого скрипта

var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});