jQuery UI一次对多个表行进行排序 [英] Jquery UI sorting multiple table row at once

问题描述

我对jqueryui排序有问题.

I have a problem with jqueryui sorting.

现在我有一个在tr上排序的表，它都可以工作，但是现在我必须一次对2行进行排序.在下面的示例中，我必须将G1或G2或G3的行排序在一起.

Now i have a table with sorting on tr and it's all working, but now i have to sort 2 row at once. In the example below i have to sort together row with G1 or G2 or G3.

现在，在将我的头撞在墙上几个小时之后，我在这里寻求帮助.

Now after having beaten my head against the wall for hours i'm here to ask for help.

Queryui sort具有选项 item ，我尝试使用它，但无法在表中使用它.

Queryui sort have the option item, i try to use it but can't make itwork in table.

有办法做到吗?有人可以帮助我吗?

There is a way to do that? Anyone can help me?

我在这里尝试 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()
});

推荐答案

我发现这比我预想的要困难得多，所以我对此进行了尝试.我分叉了你的小提琴，并进行了一些更新.

I found that this was more difficult than I anticipated, so I took a stab at it. I forked your fiddle and made some updates.

工作示例: 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.

Lots of CSS, if you like.

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可排序&可选

This is adapted from the code here: jQuery Sortable - drag and drop multiple items and here: jQuery UI sortable & selectable

一起使用排序和选择"功能的信用额转到 mhu .这非常有效，因为您可以根据需要拖动选择或CTRL +单击以选择行".您可以拖动并选择一个组，或者单击将对拖动进行分组的不重要的项目.然后，使用拖动手柄，用户可以对选定的行进行排序.

Credit for using Sort and Select together goes to mhu. This works really well, since you can drag-select or CTRL+Click to select the Rows as you like. You can drag and select a group or click unqiue items that will group ion the drag. Then using the drag handle, the user can sort the selected rows.

TJ 使我们能够对多个项目进行排序.他的演示旨在在单独的列表之间移动元素，因此我将事件receive与update切换了.

TJ gives us the ability to sort multiple items. His Demo is designed to move elements between separate lists, so I switched events receive with update.

从浮躁的评论到答案，我希望能有所帮助.

From flippant comment to an answer, I hope that helps.

评论后更新

工作示例: https://jsfiddle.net/Twisty/Lbu7ytbj/

我更改 HTML 以对行进行分组:

I change the HTML to group the rows:

<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.

Now all I had to do was adjust the sortable to use the table and not use the 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:

I also added CSS for the placeholder:

.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;
}

这篇关于jQuery UI一次对多个表行进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！