Jquery Datatable拖放与行分组

Question

我用过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 链接：DEMO

Answer 1

您可以稍微更改您的标记。将每个行组放在单独的<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>

Answer 2

受 Munim Munna 回答的启发，我创建了一个仅使用 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>