javascript - 重新排序时，将折叠的行与数据表中的父行一起移动

Question

我有一个包含父行和子行的表。可以使用 Bootstrap 默认折叠机制折叠子行。所有行都可以使用数据表 rowReorder 重新排序。现在，如果我拖放父行，它的子行当然不会移动。我怎样才能实现这种行为？

这是一个jsfiddle我目前拥有的内容，使用工资列开始拖动一行:

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columnDefs": [{
      targets: 0,
      visible: false
    }],

    rowReorder: {
      selector: 'td:last-child'
    },

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/rowreorder/1.1.2/css/rowReorder.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Seq</th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>Seq</th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>1</td>
        <td><i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1">+</i><b>Tiger Nixon (parent)</b>
        </td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr class="collapse collapsed1">
        <td>2</td>
        <td>Garrett Winters (child)</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr class="collapse collapsed1">
        <td>3</td>
        <td>Ashton Cox (child)</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>
      <tr>
        <td>4</td>
        <td><b>Cedric Kelly(parent)</b>
        </td>
        <td>Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$3,600</td>
      </tr>
      <tr>
        <td>5</td>
        <td><b>Jenna Elliott (parent)</b>
        </td>
        <td>Financial Controller</td>
        <td>Edinburgh</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$5,300</td>
      </tr>

    </tbody>
  </table>
  <br/>
  <br/>
  <br/>

  <ul>
    <li>Collapse/show child entries of Tiger Nixon using the plus sign.</li>
    <li>Drag rows by touching the salary column.</li>
  </ul>
</div>

Answer 1

使用 DataTable 的子功能。

这是demo的JSbin http://live.datatables.net/cihefawi/17

修改它以动态添加子行，使用ajax或其他东西。