Перетаскивание сортировки столбцов таблицы с помощью jQuery

Я использую jQuery для управления моим интерфейсом AJAX. У меня есть таблица данных, и я хочу разрешить пользователю изменять порядок столбцов в таблице, перетаскивая их. Я хотел бы, чтобы пользователь мог захватить заголовок для столбца и переместить его. Строка данных внизу должна следовать. Обратите внимание, что я не интересует сортировка данных или переупорядочивание строк, но позволяет пользователю изменять порядок столбцов.

есть ли существующее решение? Я попытался использовать стандартный сортируемый вызов jQuery на <th> элементы, но, конечно, не работает. Я просмотрел сайт плагинов jQuery и ничего не нашел. Нужно ли писать плагин jQuery?

Edit: обратите внимание, что jQuery, Dojo и т. д. (бесплатные) только для рамок с JS. Я не могу получить лицензию на что-либо коммерческое, как ExtJS.

8
drag-and-drop jquery jquery-ui sorting

7 ответов

Если вы готовы заплатить за лицензию, вы можете попробовать Ext JS вместо jQuery. Есть некоторые довольно мощные функции сетки, которые включают в себя то, что вы пытаетесь сделать.

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

1

есть виджет jQuery UI под названием Dragtable.

Live demo

13

попробуйте это вместо этого: 

$('.sort').sortable({
  cursor: 'move',
  axis: 'y',
  update: function(e, ui) {
    $(this).sortable('refresh');
    var params = {};
    params = $('.id').serializeArray(),
      $.ajax({
        type: 'POST',
        data: {
          id : params
        },
        url: 'Your url',
        success: function(msg) {
          // Your sorted data.
        }
      });
  }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>abc</th>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody class="sort">
    <tr>
      <input class="id" name="id" type="hidden" value="Your Value" />
      <td class="center"><span>Text Here</span></td>
      <td>Yes, you are done</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>
6

Sorttable jQuery UI library, похоже, делает именно то, что вы хотите здесь.

https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable

4

вот еще один, который строится поверх библиотеки jQuery-ui http://akottr.github.io/dragtable/

3

вы должны попробовать Dragtable по Danvk

Я нашел этот вопрос при поиске Исправлена ошибка в нем. Он не любит таблицы, расположенные в горизонтально прокручивающихся панелях.

помимо этого это фантастика.

2

вы имеете в виду что-то вроде этого? таблица перетаскивания jQuery плагин

-1