Как сделать строки с данными перетаскиваемыми и сохранить последовательность номеров столбцов? Я пытаюсь создать анкету, тема которой — «Выбор аранжировки», я добавляю варианты с помощью 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>
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>
В приведенной выше демонстрации я добавил две новые библиотеки для JavaScript и CSS, необходимые для перетаскивания.
Я также добавил rowReorder: { selector: 'tr' }
в DataTable, который сообщает подключаемому модулю, что мы можем перетаскивать строку, выбирая любую часть строки (поведение по умолчанию — перетаскивание только путем выбора первого столбца).
Подход 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>
В этом подходе я добавил дополнительный столбец в вашу таблицу и скрыл первый столбец.
Вы можете попробовать каждый подход и увидеть различия для себя.
Первое решение - это то, что я ищу... и я использую его сейчас... хотя у меня есть вопрос, действительно ли нет другого пути без использования плагинов? Я доволен использованием плагина, просто хотел спросить. Спасибо
Я уверен, что есть решения, которые не требуют этого конкретного плагина DataTables, но они, вероятно, требуют, чтобы вы также НЕ использовали DataTables для таблицы HTML — например, есть jQuery UI — и такие решения, как Drag и удалить строки таблицы с помощью Javascript. Это, вероятно, изменило бы почти весь ваш код. Но это вариант.
Я не вижу в этом фрагменте попытки что-либо перетащить. Вот ТАКОЙ вопрос с перетаскиванием фрагмента. У него нет кода сброса, просто пример того, как перетаскивать. Вы, вероятно, будете заботиться только о вертикальных (Y) движениях мыши, так как перемещаете строки вверх и вниз в таблице. Вам нужно будет определить, когда переключать две строки, основываясь на их взаимном расположении. Есть некоторая геометрия, которую нужно отслеживать и обновлять по мере добавления новых строк. Это может помочь вам начать работу.