Как использовать сортируемую функцию jquery-ui для сортировки путем перетаскивания строк из двух таблиц одновременно? - PullRequest
Новая
       13

Как использовать сортируемую функцию jquery-ui для сортировки путем перетаскивания строк из двух таблиц одновременно?

0 голосов
/ 18 декабря 2018

У меня есть две таблицы, которые находятся рядом друг с другом.Вот краткий пример шаблона: 

<table id="table1">
    <tbody>
        <tr>
            <td>a1</td>
            <td>a1</td>
        </tr>
        <tr>
            <td>b1</td>
            <td>b1</td>
        </tr>
    </tbody>
</table>
<table id="table2">
    <tbody>
        <tr>
            <td>a2</td>
            <td>a2</td>
        </tr>
        <tr>
            <td>b2</td>
            <td>b2/td>
        </tr>
    </tbody>
</table>

Так это выглядит так: 

|a1|a1|a2|a2|
|b1|b1|b2|b2|

Моя цель - использовать сортируемую функцию jquery-ui для сортировки путем перетаскивания строкобе таблицы одновременно.Другими словами - когда пользователь щелкает, например, ячейку из tabel1, вся строка 

|a1|a1|a2|a2|

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

На самом деле, случай использования заключается в том, что у меня есть сетка, где мне нужно реализовать перетаскивание строк.Пользователь может заморозить некоторые столбцы сетки - тогда есть 2 таблицы - одна для заблокированных столбцов и одна для незамерзших - так что на самом деле есть одна строка, но разделенная на 2 таблицы.Вот пример сетки: https://www.igniteui.com/grid/column-fixing

1 Ответ

0 голосов
/ 18 декабря 2018

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

$(function() {
  $("#table1 tbody").sortable({
    handle: ".row-handle",
    items: "> tr",
    helper: function(e, item) {
      var index = item.index();
      item.data("right", $("#table2 tbody tr:eq(" + index + ")").clone());
      item.data("orig-index", index);
      $("#table2 tbody tr:eq(" + index + ")").fadeOut("fast");
      return item;
    },
    update: function(e, ui) {
      var row2 = ui.item.data("right");
      var index = ui.item.index();
      $("#table2 tbody tr").eq(ui.item.data("orig-index")).remove();
      switch (true) {
        case index == 0:
          console.log("First", index);
          $("#table2 tbody tr:eq(0)").before(row2);
          break;
        case index == $("#table2 tr").length:
          console.log("Last", index);
          $("#table2 tbody").append(row2);
          break;
        case index > 0 && index < $("#table2 tr").length:
          console.log("Mid", index);
          $("#table2 tbody tr").eq(index).before(row2);
      }
    }
  });
});
.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="table1" class="left ui-widget">
  <thead class="ui-widget-header">
    <tr>
      <td style="width: 20px;">&nbsp;</td>
      <th>Company</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody class="ui-widget-content">
    <tr>
      <td style="width: 20px;"><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 1</td>
      <td>Name 1</td>
    </tr>
    <tr>
      <td><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 2</td>
      <td>Name 2</td>
    </tr>
    <tr>
      <td><span class="ui-icon ui-icon-grip-dotted-vertical row-handle"></span></td>
      <td>Company 3</td>
      <td>Name 3</td>
    </tr>
  </tbody>
</table>
<table id="table2" class="right ui-widget">
  <thead class="ui-widget-header">
    <tr>
      <th>Title</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
      <td>Address 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td>Address 2</td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td>Address 3</td>
    </tr>
  </tbody>
</table>

Обновление

Исправлена ​​логика update для лучшей работы.Исправлено многократное перемещение элемента.

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

Надеюсь, это поможет.

...