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

Question

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

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

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

Answer 1

Есть виджет JQuery UI с именем Dragtable .

Живая демоверсия

Answer 2

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

$('.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>

Answer 3

Сортируемая библиотека jquery UI, кажется, делает именно то, что вам нужно.

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

ты имеешь в виду что-то подобное? Плагин Table Drag and Drop JQuery