Javascript Jquery数据表通过行分组进行拖放

我使用了jquery dataTable，我有如下要求：

如果我拖动行-品牌名称：。。。。然后，它应该只在行之间拖动，并包含所有内容。 如果我拖动行组的内容，则它不应与其他组重叠。 以下是我迄今为止所做的工作：

HTML:

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的链接：

您可以稍微更改标记。将每一行分组放在单独的 把这些整理一下

变量表=$'example'。数据表{ 搜索：假， bSort:false， 分页：false， 信息：错， }; $example>tbody.sortable{ 项目：tr:not.group-row }; $example.sortable{ 项目：t车身 }.禁止选择； table.dataTable tbody tr.group-row{ 光标：移动； 背景色：rgb237、208、0； 字号：700； 颜色：006232； } 名称 类型 年龄 -品牌名称：1型 纳米亚 类型1 年龄 名字 类型1 年龄 -品牌名称：2型 命名 类型2 年龄 纳梅克 类型2 年龄

---

您可以稍微更改标记。将每一行分组放在单独的 把这些整理一下

变量表=$'example'。数据表{ 搜索：假， bSort:false， 分页：false， 信息：错， }; $example>tbody.sortable{ 项目：tr:not.group-row }; $example.sortable{ 项目：t车身 }.禁止选择； table.dataTable tbody tr.group-row{ 光标：移动； 背景色：rgb237、208、0； 字号：700； 颜色：006232； } 名称 类型 年龄 -品牌名称：1型 纳米亚 类型1 年龄 名字 类型1 年龄 -品牌名称：2型 命名 类型2 年龄 纳梅克 类型2 年龄

---

受Munim Munna答案的启发，我创建了一个版本，该版本仅通过使用javascript/jquery自动修改表结构

let table=$'example'.DataTable{ 搜索：假， 排序：假， 订单：[[1，asc]，[0，asc]]， 分页：false， 信息：错， drawCallback：函数设置{ 设api=this.api； 让rows=api.rows{page:'current'}.nodes； 如果$rows.parent.istbody{ $rows.unwrap； } 设last=null； 设组_指数=-1； api.column1，{page:'current'}.data.eachfunction组，i{ 如果最后一个！==组{ //使上一组可排序 如果最后{ $example>tbody[数据组='+组索引+']。可排序{ 项目：tr.group-row， 包含：示例>tbody[数据组='+组索引+']， 不透明度：0.75 }; } 组索引++； //在新组之前添加组标题 $rows.eqi.before +“-品牌名称：”+集团+ ; last=组； } //修改行并附加到tbody $rows.eqi.attr'data-group'，group_index.addClass'group-row'.AppendToBody[数据组='+group_index+']； }; //使最后一组也可排序 $example>tbody[数据组='+组索引+']。可排序{ 项目：tr.group-row， 包含：示例>tbody[数据组='+组索引+']， 不透明度：0.75 }; //使tbody元素可排序并禁用表中的选择 $example.sortable{ 项目：t车身， 占位符：t正文占位符， 大小：true， 不透明度：0.75 } .禁止选择； } }; table.dataTable tbody tr.group-header{ 光标：移动； 背景色：rgb237、208、0； 字号：700； 颜色：006232； } table.dataTable.tbody占位符{ 显示：表格行； 高度：50px； } 名称 类型 年龄 名称1 类型1 13 姓名2 类型1 42 名字3 类型2 33 名字4 类型2 17

---

受Munim Munna答案的启发，我创建了一个版本，该版本仅通过使用javascript/jquery自动修改表结构

let table=$'example'.DataTable{ 搜索：假， 排序：假， 订单：[[1，asc]，[0，asc]]， 分页：false， 信息：错， drawCallback：函数设置{ 设api=this.api； 让rows=api.rows{page:'current'}.nodes； 如果$rows.parent.istbody{ $rows.unwrap； } 设last=null； 设组_指数=-1； api.column1，{page:'current'}.data.eachfunction组，i{ 如果最后一个！==组{ //使上一组可排序 如果最后{ $example>tbody[数据组='+组索引+']。可排序{ 项目：tr.group-row， 包含：示例>tbody[数据组='+组索引+']， 不透明度：0.75 }; } 组索引++； //添加gro 新组前向上标题 $rows.eqi.before +“-品牌名称：”+集团+ ; last=组； } //修改行并附加到tbody $rows.eqi.attr'data-group'，group_index.addClass'group-row'.AppendToBody[数据组='+group_index+']； }; //使最后一组也可排序 $example>tbody[数据组='+组索引+']。可排序{ 项目：tr.group-row， 包含：示例>tbody[数据组='+组索引+']， 不透明度：0.75 }; //使tbody元素可排序并禁用表中的选择 $example.sortable{ 项目：t车身， 占位符：t正文占位符， 大小：true， 不透明度：0.75 } .禁止选择； } }; table.dataTable tbody tr.group-header{ 光标：移动； 背景色：rgb237、208、0； 字号：700； 颜色：006232； } table.dataTable.tbody占位符{ 显示：表格行； 高度：50px； } 名称 类型 年龄 名称1 类型1 13 姓名2 类型1 42 名字3 类型2 33 名字4 类型2 17

---

您应该看看jquerysortable插件的helper、start、update和stop函数/回调。请看：但我的问题是，我有一个表结构，我认为这是不可能的。你应该看看jQuery sortable插件的助手、启动、更新和停止函数/回调。请看：但我的问题是，我有一个表结构，我认为这是不可能的。如果我动态地向表中添加行，它也会工作吗？因为我在以前的版本中尝试过，它不会重新加载数据表。我为每个组实现了不同的tbody结构。。顺便说一句，很好的实现。。我以后一定会尝试这个方法。如果我动态地向表中添加行，它也会起作用吗？因为我在以前的版本中尝试过，它不会重新加载数据表。我为每个组实现了不同的tbody结构。。顺便说一句，很好的实现。。我以后一定会试试这个。

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();