问题
i try to get the order of a nested list that can be ordered with SortableJS. My list looks like this:
<div id="nestedDemo" class="list-group col nested-sortable">
<div class="list-group-item" data-id="1">Titel 1</div>
<div class="list-group-item" data-id="2">Titel 2</div>
<div class="list-group-item" data-id="3">Titel3
<div class="list-group nested-sortable">
<div class="list-group-item" data-id="4">Titel 4</div>
<div class="list-group-item" data-id="5">Titel 5</div>
<div class="list-group-item" data-id="6">Titel 6</div>
</div>
</div>
<div class="list-group-item" data-id="7">Titel 7</div>
<div class="list-group-item" data-id="8">Titel 8</div>
<div class="list-group-item" data-id="9">Titel 9</div>
<div class="list-group-item" data-id="10">Titel10
<div class="list-group nested-sortable">
<div class="list-group-item" data-id="11">Titel 11</div>
<div class="list-group-item" data-id="12">Titel 12</div>
</div>
</div>
</div>
and my javascript code:
<script>
$(document).ready(function() {
var nestedSortables = $(".nested-sortable");
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
onSort: function (e) {
var items = e.to.children;
var result = [];
for (var i = 0; i < items.length; i++) {
result.push($(items[i]).data('id'));
}
$('#standard_order').val(result);
}
});
}
});
</script>
My aim is to get the order by every change of the list and store the order in an input field with the id standard_order
. I do this because i have an submit button to store the order in a database.
My problem is when i change the order not the complete list is stored in my input field but rather only the sublist in that i dropped the current element.
I have try to use one list but than the nested list not work..
Can you help me to handle my problem?
Edit:
I think i have a general solution.
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
var sortables = [];
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
sortables[i] = new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
$('#sendButton').click(function () {
for(var y = 0; y < sortables.length; y++) {
var order = sortables[y].toArray();
console.log(order);
}
});
This give me the order of every div
with the class nested-sortable
when i click the button with the id sendButton
.
For example the console output looks like this:
(7) ["Titel 1", "Titel 2", "Titel 3", "Titel 7", "Titel 8", "Titel 8", "Titel 10"]
(3) ["Titel 4", "Titel 5", "Titel 6"]
(2) ["Titel 11", "Titel 12"]
But i don't know how can i get the the hierarchical nested structure... I can not see what the parent of the div is.
回答1:
I have made a demo showing how to do this very easily: https://jsbin.com/reyecop/edit?js,output
The important part (applied to the Nested Demo on the SortableJS homepage):
const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
var serialized = [];
var children = [].slice.call(sortable.children);
for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
id: children[i].dataset[identifier],
children: nested ? serialize(nested) : []
});
}
return serialized
}
console.log(serialize(root))
回答2:
You end up with 3 separate sortable lists and any sort may be triggering the other onSort events and because they are all writing to the same #standard_order field, it will only contain the elements of the last list that wrote to the standard_order field. Just add a console.log to see when and what is visible in the event.
$("#standard_order").val(result);
console.log(result);
if you want to get all items you will have to grab them
var items = $("#nestedDemo .list-group-item");
.. same loop logic
$("#standard_order").val(result);
来源:https://stackoverflow.com/questions/56571434/sortablejs-get-order-from-nested-list