SortableJS从嵌套列表中获取订单 [英] SortableJS get order from nested list
问题描述
我尝试获取可以使用 SortableJS 进行排序的嵌套列表的顺序. 我的列表如下:
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>
和我的JavaScript代码:
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>
我的目标是通过列表的每次更改来获取订单，并将订单存储在ID为standard_order的输入字段中.我这样做是因为我有一个提交按钮来将订单存储在数据库中.
我的问题是，当我更改顺序时，不是完整列表存储在我的输入字段中，而是仅子列表中的一个，我删除了当前元素.
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?
我认为我有一个通用的解决方案.
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);
}
});
当我单击ID为sendButton的按钮时，这会给我每个div类为nested-sortable的顺序.
例如，控制台输出如下所示:
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"]
但是我不知道如何获得分层的嵌套结构...我看不到div的父级.
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.
推荐答案
I have made a demo showing how to do this very easily: https://jsbin.com/reyecop/edit?js,output
重要部分(应用于SortableJS主页上的嵌套的演示):
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))
这篇关于SortableJS从嵌套列表中获取订单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
