Перетаскивание Jquery Datatable с группировкой строк

Я использовал jquery dataTable, и у меня есть требование, как показано ниже:

Если я перетаскиваю строку (- BRAND NAME:....), она должна перетаскиваться только между строками и со всем содержимым.
Если я перетаскиваю содержимое группы строк, оно не должно перекрываться с другой группой.

Вот что я сделал до сих пор:

HTML:

<table id = "example">
    <thead>
        <tr>
            <th>Name</th>
            <th>type</th>
            <th>age</th>

        </tr>
    </thead>

    <tbody id = "sortable">
<tr id = "1">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id = "2">
    <td>Name</td>
    <td>Type1</td>
    <td>Age</td>
</tr>        
<tr id = "3">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr>        
<tr id = "4">
    <td>Name</td>
    <td>Type2</td>
    <td>Age</td>
</tr> 
    </tbody>
</table>

Jquery:

var table = $('#example').DataTable({
"searching": false,
            "paging": false,
            "info": false,
            "order": [[0, "asc"]],
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
                api.column(1, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class = "groups"><td class = "tdgroups" colspan = "22" style = "Cursor:hand !important;BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + '- BRAND NAME: ' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
});

$("#sortable").sortable();
$("#sortable").disableSelection();

Ссылка Jsfiddle: ДЕМО

Вы должны взглянуть на функции/обратные вызовы helper, start, update и stop плагина jQuery-sortable. (См.: jQuery Sortable — перетаскивание нескольких элементов

— 15.06.2019 16:25

Но моя проблема в том, что у меня есть структура таблицы, и я думаю, что это невозможно.

— 17.06.2019 04:10

javascript jquery datatables jquery-ui-sortable

14.06.2019 08:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 826

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете немного изменить разметку. Поместите каждую группу строк в отдельную <tbody> и сделать их сортируемыми.

var table = $('#example').DataTable({
  "searching": false,
  "bSort": false,
  "paging": false,
  "info": false,
});
$("#example>tbody").sortable({
  items: "tr:not(.group-row)"
});
$("#example").sortable({
  items: "tbody"
}).disableSelection();

table.dataTable tbody tr.group-row {
  cursor: move;
  background-color: rgb(237, 208, 0);
  font-weight: 700;
  color: #006232;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src = "https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel = "stylesheet" href = "http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script type = "text/javascript" src = "//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel = "stylesheet" type = "text/css" href = "//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<table id = "example">
  <thead>
    <tr>
      <th>Name</th>
      <th>type</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr class = "group-row">
      <td>- BRAND NAME: Type 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr id = "1">
      <td>NameA</td>
      <td>Type1</td>
      <td>Age</td>
    </tr>
    <tr id = "2">
      <td>NameB</td>
      <td>Type1</td>
      <td>Age</td>
    </tr>
  </tbody>
  <tbody>
    <tr class = "group-row">
      <td>- BRAND NAME: Type 2</td>
      <td></td>
      <td></td>
    </tr>
    <tr id = "3">
      <td>NameD</td>
      <td>Type2</td>
      <td>Age</td>
    </tr>
    <tr id = "4">
      <td>NameC</td>
      <td>Type2</td>
      <td>Age</td>
    </tr>
  </tbody>
</table>

17.06.2019 16:28

Вдохновленный ответом Мунима Мунны, я создал версию, которая автоматически изменяет структуру таблицы, используя только javascript/jquery.

let table = $('#example').DataTable({
  "searching": false,
  "sort": false,
  "order": [[1, "asc"], [0, "asc"]],
  "paging": false,
  "info": false,
  drawCallback: function (settings) {
    let api = this.api();
    let rows = api.rows({ page: 'current' }).nodes();
    if ($(rows).parent().is("tbody")) {
      $(rows).unwrap();
    }
    let last = null;
    let group_index = -1;
    api.column(1, { page: 'current' }).data().each(function (group, i) {
      if (last !== group) {
        // make previous group sortable
        if (last) {
          $("#example > tbody[data-group='" + group_index + "']").sortable({
            items: "tr.group-row",
            containment: "#example > tbody[data-group='" + group_index + "']",
            opacity: 0.75
          });
        }
        group_index++;
        // add group-header before new group
        $(rows).eq(i).before(
            '<tbody data-group = "' + group_index + '"><tr class = "group-header"><td colspan = "3">' + '- BRAND NAME: ' + group + '</td></tr></tbody>'
        );
        last = group;
      }
      // modify row and append to tbody
      $(rows).eq(i).attr('data-group', group_index).addClass('group-row').appendTo("tbody[data-group='" + group_index + "']");
    });
    // make last group also sortable
    $("#example > tbody[data-group='" + group_index + "']").sortable({
      items: "tr.group-row",
      containment: "#example > tbody[data-group='" + group_index + "']",
      opacity: 0.75
    });
    // make the tbody-elements sortable and disable selection in table
    $("#example").sortable({
      items: "tbody",
      placeholder: "tbody-placeholder",
      forcePlaceholderSize: true,
      opacity: 0.75
    })
    .disableSelection();
  }
});

table.dataTable tbody tr.group-header {
  cursor: move;
  background-color: rgb(237, 208, 0);
  font-weight: 700;
  color: #006232;
}

table.dataTable .tbody-placeholder {
  display: table-row;
  height: 50px;
}

<link rel = "stylesheet" type = "text/css" href = "//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src = "//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel = "stylesheet" href = "http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src = "https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

<table id = "example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr id = "1">
      <td>Name1</td>
      <td>Type1</td>
      <td>13</td>
    </tr>
    <tr id = "2">
      <td>Name2</td>
      <td>Type1</td>
      <td>42</td>
    </tr>
    <tr id = "3">
      <td>Name3</td>
      <td>Type2</td>
      <td>33</td>
    </tr>
    <tr id = "4">
      <td>Name4</td>
      <td>Type2</td>
      <td>17</td>
    </tr>
  </tbody>
</table>

Будет ли это работать, если я динамически добавлю строки в таблицу? Потому что я пробовал это в своей предыдущей версии, и она не перезагружала таблицу данных.

— 19.06.2019 06:44

Я реализовал его с различной структурой tbody для каждой группы. Кстати, хорошая реализация. Я обязательно попробую это в будущем.

— 20.06.2019 19:11

18.06.2019 20:33