jquery 排序前删除下一行

Question

我有一个 table 包含 parent 和 child，如下所示。 parent 排序table。当我尝试对任何父级进行排序时，我必须删除它的下一个 child 并将其插入到新位置之后。

<table>
    <tr class="parent"><td>Parent1</td></tr>
    <tr class="child nosort"><td>Child1</td></tr>
    <tr class="parent"><td>Parent2</td></tr>
    <tr class="child nosort"><td>Child2</td></tr>
    <tr class="parent"><td>Parent3</td></tr>
    <tr class="child nosort"><td>Child3</td></tr>
</table>

因此，如果我将 Parent1 移到 Parent2 之后，它将看起来：

<table>       
    <tr class="parent"><td>Parent2</td></tr>
    <tr class="child nosort"><td>Child2</td></tr>
    <tr class="parent"><td>Parent1</td></tr>
    <tr class="child nosort"><td>Child1</td></tr>
    <tr class="parent"><td>Parent3</td></tr>
    <tr class="child nosort"><td>Child3</td></tr>
</table>

我已经完成了在 sortupdate 之后插入子行，但无法弄清楚如何在排序之前删除子行。下面如果代码写在 start.

$('table').sortable({
    items: 'tr:not(.nosort)',
    start: function( event, ui ) {
        // Removal code of child before sort
        var objChild = ui.item.next();
        if( objChild.hasClass('child') ) {
            objChild.remove();
        }
    },
    update: function( event, ui ) {
    //  insertion code of child
    }
});

Answer 1

完全回答您的问题：

将下一个元素存储到每个 .parent

data-*

在可排序的 start 事件中使用 jQuery's .detach() 将子元素存储到数据中。
在可排序的 stop 事件中使用 .after() ti 插入先前分离的元素

$('.parent').each(function(i, e) {
   $(this).data('$next', $(this).nextUntil('.parent'));
});

$('table').sortable({
  items: 'tr:not(.nosort)',
  start: function( ev, ui ) {
    $next = $(ui.item.data('$next')).detach();    
  },
  stop: function(event, ui) {
    ui.item.after($next);
  }
});

<table>
  <tr class="parent"><td>1 Parent</td></tr>
  <tr class="child nosort"><td>1 Child</td></tr>
  <tr class="parent"><td>2 Parent</td></tr>
  <tr class="child nosort"><td>2 Child</td></tr>
  <tr class="parent"><td>3 Parent</td></tr>
  <tr class="child nosort"><td>3 Child</td></tr>
</table>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

但如您所知，您最终可能还会拥有 P2 P1 C1 C2 ... 但这不是您的问题。否则，要解决这个问题，最好的办法是回到白板，简单地在 <td>

中放置两个 <div>

Answer 2

我知道这是一个旧话题，但我认为我的回答可以帮助其他人。这是 Roko C. Buljan 的 post.

的更新版本

在我的版本中，子 table 行使用 Jquery 中的 .detach() 暂时从页面分离。

$('.parent').each(function() {
 $(this).data('$children', $(this).nextUntil('.parent'));
});

var children = {};

$('table').sortable({
  items: 'tr:not(.nosort)',
  start: function() {
    $('.parent').each(function() {
       children[this.id] = $($(this).data('$children')).detach()
    });
  },
  stop: function(event, ui) {
    $('.parent').each(function() {
       $(this).after(children[this.id]);
    });
  }
});

td {
  padding: 1rem;
}

.red {
  background-color: red;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: green;
}

<table style="padding: 1rem">
  <tr class="parent red" id="one"><td>1 Parent</td></tr>
  <tr class="child nosort red"><td>1 Child</td></tr>
  <tr class="parent blue" id="two"><td>2 Parent</td></tr>
  <tr class="child nosort blue"><td>2 Child</td></tr>
  <tr class="parent green" id="three"><td>3 Parent</td></tr>
  <tr class="child nosort green"><td>3 Child</td></tr>
  <tr class="child nosort green"><td>3 Child</td></tr>
  <tr class="child nosort green"><td>3 Child</td></tr>
</table>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

jquery 排序前删除下一行

jquery sortable remove next row before sorting

jquery

jquery-ui-sortable