提问人：Strywyr 提问时间：1/23/2023 更新时间：6/20/2023 访问量：1941
如何使数据表行可拖动并维护列号的顺序
how to make datatable rows draggable and maintain the sequence of the column number
问：
如何使数据表行可拖动并保持列号的顺序？我正在尝试创建一个主题为“安排选择”的调查问卷，我正在使用 addRow 附加选项。我想将拖动事件添加到行上并保持顺序。但我不知道该怎么做......
这是我的代码：
$(document).ready(function () {
var table = $('#ADDchoicesARTableListSequence').DataTable();
const btnAdd = document.querySelector("#addSequenceBtn");
const inputChoices = document.querySelector("#sequenceChoices");
var count = 1;
btnAdd.addEventListener("click", function () {
table.row.add([count,inputChoices.value.trim(),'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<div class="__Sequence">
<label>Arrangement Choices</label>
<input type="text" class="__choicesAddARSeq" id="sequenceChoices"/>
<button id="addSequenceBtn">ADD</button>
</div>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
<button id="addSequenceBtn">Create Question</button>答：
2赞
andrewJames
1/23/2023
#1
DataTables 有各种扩展，你可以用它来做高级功能，其中之一就是行重新排序扩展，所以我们可以使用它。
我不确定你说的“保持列号的顺序”是什么意思，所以这里有两种略有不同的方法。也许其中之一就是你想要的。
方法 1 - 第一列始终显示后跟 和 依此类推，而不管您如何重新排列行：12
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
}
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>在上面的演示中，我为拖动所需的 JavaScript 和 CSS 添加了两个新库。
我还添加了 DataTable，它告诉插件我们可以通过选择行的任何部分来拖动行（默认行为是仅通过选择第一列来拖动）。rowReorder: { selector: 'tr' }
方法 2 - 行中的所有数据一起移动。
在此方法中，第一列中的值随它们所属的行一起移动：
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [{
targets: 0,
visible: false
}]
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>Idx.</th>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>在这种方法中，我在表中添加了一个额外的列，并隐藏了第一列。
您可以尝试每种方法，并亲自查看差异。
评论
0赞
Strywyr
1/25/2023
首先是解决方案是我正在寻找的。我现在正在使用它..虽然我有问题，但真的没有别的办法不使用插件吗？我很高兴使用插件只是想问问。谢谢
0赞
andrewJames
1/25/2023
我敢肯定有些解决方案不需要这个特定的 DataTables 插件 - 但它们可能要求您也不要将 DataTables 用于 HTML 表 - 例如，有 jQuery UI - 以及使用 Javascript 拖放表行等解决方案。这可能会改变你几乎所有的代码。但这是一种选择。
评论