Пользовательский интерфейс Jquery сортирует несколько строк таблицы одновременно

У меня проблема с сортировкой jqueryui.

Теперь у меня есть таблица с сортировкой по tr, и все это работает, но теперь мне нужно отсортировать 2 строки одновременно. В приведенном ниже примере я должен отсортировать строки с G1 или G2 или G3.

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

Queryui сортировать есть опциявещьЯ пытаюсь использовать это, но не могу сделать это в таблице.

Есть способ сделать это? Кто-нибудь может мне помочь?

Я пытаюсь здесьhttps://jsfiddle.net/n29ekt42/

    <table>
    <thead>
        <tr>
            <th>T1</th>
            <th>T1</th>
            <th>T1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>G1</td>
            <td>G1</td>
            <td>G1</td>
        </tr>
        <tr>
            <td>G1</td>
            <td>G1</td>
            <td>G1</td>
        </tr>
        <tr>
            <td>G2</td>
            <td>G2</td>
            <td>G2</td>
        </tr>
        <tr>
            <td>G2</td>
            <td>G2</td>
            <td>G2</td>
        </tr>
        <tr>
            <td>G3</td>
            <td>G3</td>
            <td>G3</td>
        </tr>
        <tr>
            <td>G3</td>
            <td>G3</td>
            <td>G3</td>
        </tr>
    </tbody>
    </table>

   function assignSortAttach() {

    $("table tbody").sortable({
        start: function( event, ui ) {
            var aa = $this.attr('data-row');
        }
    })
}

// TR sortable
$(function () {
    assignSortAttach()
});
 Twisty06 июл. 2016 г., 18:49
Взгляните на использование Selectable с Sortable.
 Rory McCrossan06 июл. 2016 г., 12:38
Вы на самом деле не задали здесь вопрос и не сказали нам, что вы пытаетесь сделать ...?

Ответы на вопрос(1)

Решение Вопроса

Я обнаружил, что это было сложнее, чем я ожидал, поэтому я сделал удар. Я раздвоил твою скрипку и сделал некоторые обновления.

Рабочий пример:https://jsfiddle.net/Twisty/n29ekt42/13/

Я добавил дескриптор столбца.

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th>T1</th>
      <th>T1</th>
      <th>T1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
      <td>G1</td>
      <td>G1</td>
      <td>G1</td>
    </tr>
...

Много CSS, если хотите.

CSS

table {
  border-collapse: collapse;
}

table thead tr {
  margin-left: 20px;
}

table tbody tr {
  border: 1px solid #ccc;
}

tr.ui-selecting {
  background: #FECA40;
}

tr.ui-selected {
  background: #F39814;
  color: white;
}

.hidden {
  display: none;
}

JQuery

function assignSortAttach() {
  $("table tbody").sortable({
      axis: "y",
      cursor: "grabbing",
      handle: ".handle",
      opacity: 0.6,
      helper: function(e, item) {
        console.log("Parent-Helper: ", item);
        if (!item.hasClass("ui-selected")) {
          item.addClass("ui-selected");
        }
        // Clone selected elements
        var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();
        console.log("Making helper: ", elements);
        // Hide selected Elements
        item.siblings(".ui-selected").addClass("hidden");
        var helper = $("<table />");
        helper.append(elements);
        console.log("Helper: ", helper);
        return helper;
      },
      start: function(e, ui) {
        var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');
        ui.item.data("items", elements);
      },
      update: function(e, ui) {
        console.log("Receiving: ", ui.item.data("items"));
        $.each(ui.item.data("items"), function(k, v) {
          console.log("Appending ", v, " before ", ui.item);
          ui.item.before(v);
        });
      },
      stop: function(e, ui) {
        ui.item.siblings(".ui-selected").removeClass("hidden");
        $("tr.ui-selected").removeClass("ui-selected");
      }
    })
    .selectable({
      filter: "tr",
      cancel: ".handle"
    })
}

$(function() {
  assignSortAttach();
});

Это адаптировано из кода здесь:jQuery Sortable - перетащите несколько элементов и здесь:jQuery UI сортируется и выбирается

Кредит для использования сортировки и выбора вместе идет вMHU, Это работает очень хорошо, так как вы можете перетаскивать или Ctrl + Click, чтобы выбрать строки, как вам нравится. Вы можете перетащить и выбрать группу или щелкнуть по неактивным элементам, которые будут группировать перетаскивание. Затем с помощью маркера перетаскивания пользователь может отсортировать выбранные строки.

TJ дает нам возможность сортировать несколько предметов. Его демонстрация предназначена для перемещения элементов между отдельными списками, поэтому я переключал событияreceive сupdate.

От легкомысленного комментария к ответу, я надеюсь, что это поможет.

Обновления после комментариев

Рабочий пример:https://jsfiddle.net/Twisty/Lbu7ytbj/

Я меняюHTML сгруппировать строки:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>T1</th>
      <th>T1</th>
      <th>T1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"><span data-group="1" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
      <td>G1</td>
      <td>G1</td>
      <td>G1</td>
    </tr>
    <tr>
      <td>G1</td>
      <td>G1</td>
      <td>G1</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
      <td rowspan="2"><span data-group="3" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
      <td>G2</td>
      <td>G2</td>
      <td>G2</td>
    </tr>
    <tr>
      <td>G2</td>
      <td>G2</td>
      <td>G2</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
      <td rowspan="2"><span data-group="5" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
      <td>G3</td>
      <td>G3</td>
      <td>G3</td>
    </tr>
    <tr>
      <td>G3</td>
      <td>G3</td>
      <td>G3</td>
    </tr>
  </tbody>
</table>

Теперь все, что мне нужно было сделать, это настроитьsortable использовать таблицу и не использоватьthead.

function assignSortAttach() {
  $("table").sortable({
    axis: "y",
    cursor: "grabbing",
    handle: ".handle",
    cancel: "thead",
    opacity: 0.6,
    placeholder: "two-place",
    helper: function(e, item) {
      if (!item.hasClass("selected")) {
        item.addClass("selected");
      }
      console.log("Selected: ", $(".selected"));
      var elements = $(".selected").not(".ui-sortable-placeholder").clone();
      console.log("Making helper from: ", elements);
      // Hide selected Elements
      $(".selected").not(".ui-sortable-placeholder").addClass("hidden");
      var helper = $("<table />");
      helper.append(elements);
      console.log("Helper: ", helper);
      return helper;
    },
    start: function(e, ui) {
      var elements = $(".selected.hidden").not('.ui-sortable-placeholder');
      console.log("Start: ", elements);
      ui.item.data("items", elements);
    },
    update: function(e, ui) {
      console.log("Receiving: ", ui.item.data("items"));
      ui.item.before(ui.item.data("items")[1], ui.item.data("items")[0]);
    },
    stop: function(e, ui) {
      $('.selected.hidden').not('.ui-sortable-placeholder').removeClass('hidden');
      $('.selected').removeClass('selected');
    }
  });
}

$(function() {
  assignSortAttach();
  $(".handle").attr("title", "Use me to drag and sort.");
});

Я также добавил CSS для заполнителя:

.two-place {
  display: block;
  visibility: visible;
  height: 2.5em;
  width: 0;
}

.two-place::after {
  content: "";
  border: 1px dashed #ccc;
  float: left;
  background-color: #eee;
  height: 2.5em;
  width: 100px;
}
 Twisty08 июл. 2016 г., 15:32
Так что ты ищешь?
 Germano Plebani12 июл. 2016 г., 17:02
Всегда 2 и всегда сгруппированы.
 Twisty11 июл. 2016 г., 20:34
@GermanoPlebani будут ли группы строк, которые имеют более 2 строк? Или это всегда будут группы по 2 человека?
 Germano Plebani08 июл. 2016 г., 11:25
Не то решение, которое я ищу, но очень хорошая работа.
 Twisty11 июл. 2016 г., 22:08
@GermanoPlebani при отбрасывании сгруппированных элементов, они должны разделить другую группу?
 Twisty12 июл. 2016 г., 19:19
@GermanoPlebani Теперь, когда вы прояснили проблему, я смог обновить свой ответ. Он делает то, что вы описали. Я надеюсь, что вы отметите это как ответ.
 Twisty11 июл. 2016 г., 20:32
@GermanoPlebani вы не объяснили это в своем вопросе. Поэтому я не знал, что это требование. Это делает это намного проще. Я предоставлю обновление чуть позже.
 Germano Plebani11 июл. 2016 г., 09:52
Должны быть перемещены две конкретные строки одновременно. Ряды 1 и 2, ряды 3 и 4, ряды 5 и 6 и так далее.

Ваш ответ на вопрос