SortableJS получить заказ из вложенного списка - PullRequest
Новая
       69

SortableJS получить заказ из вложенного списка

0 голосов
/ 13 июня 2019

Я пытаюсь получить порядок вложенного списка, который можно заказать с помощью SortableJS . Мой список выглядит так: 

<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: 

<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>

Моя цель - получать заказ при каждом изменении списка и сохранять заказ в поле ввода с идентификатором standard_order. Я делаю это, потому что у меня есть кнопка отправки, чтобы сохранить заказ в базе данных. Моя проблема в том, что когда я меняю порядок, в моем поле ввода сохраняется не полный список, а только список, в котором я отбросил текущий элемент.

Я пытаюсь использовать один список, но вложенный список не работает ..

Можете ли вы помочь мне решить мою проблему?

Edit:

Мне кажется, у меня есть общее решение. 

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);
            }
        });

Это дает мне порядок каждого div с классом nested-sortable, когда я нажимаю кнопку с идентификатором sendButton. Например, вывод консоли выглядит так: 

(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.

Ответы [ 2 ]

1 голос
/ 14 июня 2019

Я сделал демонстрацию, показывающую, как это сделать очень легко: https://jsbin.com/reyecop/edit?js,output

Важная часть (применяется к Вложенная демонстрация на домашней странице SortableJS): 

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))
0 голосов
/ 13 июня 2019

В итоге у вас есть 3 отдельных сортируемых списка, и любой вид может инициировать другие события onSort, и поскольку все они записывают в одно и то же поле #standard_order, он будет содержать только элементы последнего списка, который записал в поле standard_order,Просто добавьте console.log, чтобы увидеть, когда и что будет видно в событии. 

$("#standard_order").val(result);
console.log(result);

, если вы хотите получить все предметы, вам придется их захватить 

var items = $("#nestedDemo .list-group-item"); 
.. same loop logic
$("#standard_order").val(result);
...