如何使数据表行可拖动并保持列号的顺序
[英]how to make datatable rows draggable and maintain the sequence of the column number
问题描述
How to make datatable rows draggable and maintain the sequence of the column number?
如何使数据表行可拖动并保持列号的顺序？ I am trying to create a questionnaire which theme is Arrangement Choices, i am appending the choices by using addRow.我正在尝试创建一个主题为“安排选择”的调查问卷，我正在使用 addRow 附加选择。 I want to add drag events onto rows and maintain the sequence.. but i don't know how to do it..我想将拖动事件添加到行上并保持顺序..但我不知道该怎么做..
Here's my code:这是我的代码：
$(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>
1 个解决方案
解决方案1
1 已采纳 2023-01-23 12:34:37
DataTables has various extensions you can use for advanced features - and one of those is the Row Reorder extension - so we can use that. DataTables 有各种可用于高级功能的扩展——其中之一是Row Reorder扩展——所以我们可以使用它。
I am not sure what you mean by " maintain the sequence of the column number ", so here are two slightly different approaches.我不确定“保持列号的顺序”是什么意思，所以这里有两种略有不同的方法。 Maybe one of them is what you want.也许其中之一就是您想要的。
Approach 1 - the first column always shows 1 followed by 2 and so on, regardless of how you re-arrange your rows:方法 1 - 第一列始终显示1 ，然后显示2 ，依此类推，无论您如何重新排列行：
$(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>
In the above demo, I added two new libraries for the JavaScript and CSS needed for dragging.在上面的demo中，我为拖拽需要的JavaScript和CSS添加了两个新的库。
I also added rowReorder: { selector: 'tr' } to the DataTable which tells the plug-in that we can drag the row by selecting any part of the row (the default behavior is to drag only by selecting the first column).我还在 DataTable 中添加了rowReorder: { selector: 'tr' } ，它告诉插件我们可以通过选择行的任何部分来拖动行（默认行为是仅通过选择第一列来拖动）。
Approach 2 - all the data in the row moves together.方法 2 - 行中的所有数据一起移动。
In this approach, the values in the first column move along with the row they belong to:在这种方法中，第一列中的值与其所属的行一起移动：
$(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>
In this approach, I added an extra column to your table and I hid the first column.在这种方法中，我在您的表中添加了一个额外的列并隐藏了第一列。
You can try each approach and see the differences for yourself.您可以尝试每种方法并亲自查看差异。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.