如何序列化嵌套的可排序 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> 元素并构建一个数组和序列化结果。它将查找单个子元素，如果存在，则将这些项与其余项放在一起，就好像所有项都在一个列表中一样。

希望对您有所帮助。