如何序列化嵌套的可排序ul列表 [英] How to serialize a nested sortable ul list

问题描述

基于此示例，我尝试对列表进行序列化，但是jquery-ui的内置功能似乎仅支持一个级别.

based on this exmaple, i trie to serialize the list, but the built-in function of jquery-ui seem only support one level.

是否也可以捕获其他元素?

Is it possible to catch the other elements, too?

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

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

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

推荐答案

请考虑以下代码.

$(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和Serialized结果.它将查找单个子元素，如果存在，则将这些项与其余子项放在同一行，就像所有项都在一个列表中一样.

This will iterate over each <li> element and build an Array and Serialized result. It will look for a single child elements, and if it exists will place those items in line with the rest, as if all the items were in one list.

希望有帮助.

这篇关于如何序列化嵌套的可排序ul列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！