如何使數據表行可拖動並保持列號的順序
[英]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>
1 個解決方案
解決方案1
1 已采納 2023-01-23 12:34:37
DataTables 有各種可用於高級功能的擴展——其中之一是Row Reorder擴展——所以我們可以使用它。
我不確定“保持列號的順序”是什么意思，所以這里有兩種略有不同的方法。 也許其中之一就是您想要的。
方法 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>
在上面的demo中，我為拖拽需要的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>
在這種方法中，我在您的表中添加了一個額外的列並隱藏了第一列。
您可以嘗試每種方法並親自查看差異。
React/AntDesign 如何使行可拖動？ （表格拖動排序）
[英]React/AntDesign How to make rows draggable? (Table Drag Sorting)
如何通過另一列中的數據使 jQuery DataTable 列中的按鈕可見？
[英]How to make visible a button in a jQuery DataTable column by data in another column?
如何使Jquery DataTable列具有其他列值作為HyperLink或ActionLink？
[英]How to make Jquery DataTable Column as HyperLink or ActionLink with other column value?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.