Перемещение свернутых строк с родительской строкой в ​​Datatables при переупорядочении

Question

У меня есть таблица, содержащая родительские и дочерние строки. Ряды детей могут быть свернуты с использованием механизма обнуления по умолчанию. Все строки могут быть переупорядочены с использованием datatables 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 вместо этого.

Вот JSbin демо http://live.datatables.net/cihefawi/17

Изменить его, чтобы добавить дочерние строки динамически, с помощью Ajax или что-то.

Answer 2

Ваша реализация родительских и дочерних строк неверна, поскольку вы не используете ни одну из существующих функций таблицы данных здесь.

Вы добавляете патч (разборный) для родителей и детей строк и для того, чтобы поддержать вам придется добавить много других исправлений, а также для поддержки других возможностей таблиц данных, таких как: сортировка, поиск и т.д.

Я бы порекомендовал вам посмотреть на это link. Он показывает, как вы можете реализовать складные данные/детали. Вы можете изменить содержимое, чтобы оно выглядело как строка, но все же функции таблиц данных не будут работать над этими строками. В идеале они должны работать только на родительских строках. Отдых зависит от ваших требований и реализации.