Question

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

这里是我现有的jsfiddle，使用工资栏开始拖动一行：

＆＃13;

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columnDefs": [{
      targets: 0,
      visible: false
    }],

    rowReorder: {
      selector: 'td:last-child'
    },

  });
});

＆＃13;

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

＆＃13;

Answer 1

改为使用DataTable的子功能。

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

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

Answer 2

您的父行和子行的实现不正确，因为您没有使用此处的任何现有数据表功能。

您正在为父子行添加补丁（可折叠），为了支持您，您还必须添加许多其他补丁以支持数据表的其他功能，例如：排序，搜索等。

我建议你看一下link。它显示了如何实现可折叠数据/详细信息。您可以将内容修改为行，但数据表的功能仍然不适用于这些行。理想情况下，它们只能用于父行。休息取决于您的要求和实施。

在重新排序

2 个答案: