Как сериализовать вложенный сортируемый список ul

Question

на основе этого примера я пытаюсь сериализовать список, но встроенная функция jquery-ui поддерживает только один уровень.

Можно ли поймать и другие элементы?

   <ul class="sortable">
      <li id="link-1">Foo!
        <ul class="sortable">
          <li id="link-2">FooFoo!
            <ul class="sortable"></ul>
          </li>
          <li id="link-3">FooBar!
            <ul class="sortable"></ul>
          </li>
          <li id="link-4">FooBaz!
            <ul class="sortable"></ul>
          </li>
        </ul>
      </li>
      <li id="link-6">Bar!
        <ul class="sortable"></ul>
      </li>
      <li id="link-7">Baz!
        <ul class="sortable"></ul>
      </li>

JavaScript:

$(function () {
      $('ul.sortable').sortable({
        connectWith: 'ul.sortable',
        placeholder: 'placeholder',
        update: function (event, ui) {
            var result = $(".sortable").sortable().sortable("serialize");
            alert("result: "+result);
      }).disableSelection();
});

Codepen: https://codepen.io/KenPowers/pen/zxIcB

Answer 1

Рассмотрим следующий код.

$(function() {
  $('.sortable').sortable({
    connectWith: '.sortable',
    placeholder: 'placeholder',
    update: function(event, ui) {
      var struct = [];
      var i = 0;
      $(".sortable").each(function(ind, el) {
        struct[ind] = {
          index: i,
          class: $(el).attr("class"),
          count: $(el).children().length,
          parent: $(el).parent().is("li") ? $(el).parent().attr("id") : "",
          parentIndex: $(el).parent().is("li") ? $(el).parent().index() : "",
          array: $(el).sortable("toArray"),
          serial: $(el).sortable("serialize")
        };
        i++;
      });
      console.log("Structure", struct);
      var iArr = [];
      var iSer = [];
      $(".sortable:eq(0) li").each(function(ind, el) {
        var label = $(el).attr("id");
        iArr.push(label);
        var pre = label.slice(0, label.indexOf("-")) + "[]=";
        iSer.push(pre + label.slice(label.indexOf("-") + 1));
        if ($(el).children().eq(0).is("ul")) {
          $(el).find("li").each(function() {
            iArr.push($(this).attr("id"));
            iSer.push(pre + $(this).attr("id").slice(label.indexOf("-") + 1));
          });
        }
      });
      console.log("Items Array", iArr);
      console.log("Items Serial", iSer.join("&"));
    }
  }).disableSelection();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="sortable">
  <li id="link-1">Foo!
    <ul class="sortable">
      <li id="link-2">FooFoo!
        <ul class="sortable"></ul>
      </li>
      <li id="link-3">FooBar!
        <ul class="sortable"></ul>
      </li>
      <li id="link-4">FooBaz!
        <ul class="sortable"></ul>
      </li>
    </ul>
  </li>
  <li id="link-6">Bar!
    <ul class="sortable"></ul>
  </li>
  <li id="link-7">Baz!
    <ul class="sortable"></ul>
  </li>
</ul>

Это будет повторять каждый элемент <li> и создавать результат Array and Serialized. Он будет искать отдельные дочерние элементы и, если он существует, разместит эти элементы в соответствии с остальными, как если бы все элементы были в одном списке.

Надеюсь, это поможет.