javascript 如何使datatable行可拖动并保持列号的顺序

a14dhokn 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(238)

如何使datatable行可拖动并保持列号的顺序？我正在尝试创建一个主题为Arrangement Choices的调查问卷，我正在使用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>

JavaScript

来源：https://stackoverflow.com/questions/75205030/how-to-make-datatable-rows-draggable-and-maintain-the-sequence-of-the-column-num

1条答案

按热度按时间

s8vozzvw1#

DataTables具有各种extensions，您可以将其用于高级特性-其中之一是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>

在上面的演示中，我为拖动所需的JavaScript和CSS添加了两个新库。
我还向DataTable添加了rowReorder: { selector: 'tr' }，它告诉插件我们可以通过选择行的任何部分来拖动行（默认行为是仅通过选择第一列来拖动）。
方法2-行中的所有数据一起移动。
在此方法中，第一列中的值随其所属的行一起移动：
一个二个一个一个
在这种方法中，我向表中添加了一个额外的列，并隐藏了第一列。
您可以尝试每种方法并亲自查看差异。

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何使datatable行可拖动并保持列号的顺序

1条答案

相关问题

热门标签

最新问答