【发布时间】：2020-02-06 06:00:14
【问题描述】：
我正在尝试使用SortableJS 和jQuery SortableJS Binding 创建一个嵌套列表，记录列表的新顺序，它是通过console.log() 的子级（如层次结构）。
我已经尝试过返回 null 的 this solution。
这是我的代码及其功能示例：
Javascript（使用少量 Laravel）：
@foreach($categories as $category)
$(document).ready(function() {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable-{{$category->id}}'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
$([nestedSortables[i]]).sortable({
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
store: {
set: function (sortable) {
var order = sortable.toArray();
//var catID = document.getElementById("sortable-cards-{{$category->id}}").getAttribute("data-catid");
const nestedQuery = '.nested-sortable-{{$category->id}}';
const identifier = 'boardId';
const parentId = 'parentId';
const boardName = 'boardName';
const root = document.getElementById('boardsList-{{$category->id}}');
function serialize(sortables) {
var serialized = [];
var children = [].slice.call(sortables.children);
for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
board_name: children[i].dataset[boardName],
board_id: children[i].dataset[identifier],
parent_id: children[i].dataset[parentId],
children: nested ? serialize(nested) : []
});
}
return serialized;
}
var child_order = serialize(root);
console.log(child_order);
console.log(order);
}
}
});
}
});
@endforeach
HTML（混合使用 PHP）：
<div id="boardsList" class="list-group nested-sortable">
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
</div>
</div>
</div>
</div>
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
</div>
</div>
</div>
</div>
</div>
而不是返回所有的订单结果。它只返回“克隆战争”和“员工申请”订单结果。我如何才能检索所有结果（父母和孩子）？
感谢您的帮助，如果您需要更多信息，请告诉我。
【问题讨论】：
-
@Dlk 我试过这个，它返回空输出。
-
@Dlk 我也在使用 Sortable 的内置嵌套功能。
标签： javascript php ajax laravel sortablejs