如何使用 db 中的存储结构恢复 jquery ui 可排序列表答案

【问题标题】：How to restore a jquery ui sortable list by using stored structure from db如何使用 db 中的存储结构恢复 jquery ui 可排序列表
【发布时间】：2019-06-09 03:56:29
【问题描述】：

我尝试在我的数据库中存储一个列表结构（基于这个问题 [1]：How to serialize a nested sortable ul list），之后如果页面被刷新或加载新的，我需要一种方法来恢复/重置列表基于数据库中的数据。

是否有内置方法可以做到这一点或我该如何做到这一点？

在我的列表中，我使用嵌套元素来支持创建灵活嵌套结构的方式。

这是我已经拥有的

名单

<ul id="mysite" class="mysite editor-ul ui-sortable-handle ui-sortable">
  <li class="draggable editor-li editor-li-head ui-sortable-handle">Headline</li>
  <li class="draggable editor-li ui-sortable-handle" id="p-1">
    Item1
    <ul class="mysite editor-ul ui-sortable"></ul>
  </li>
  <li class="draggable editor-li ui-sortable-handle" id="p-5">
    Item 2
    <ul class="mysite editor-ul ui-sortable">
      <li class="draggable editor-li ui-sortable-handle" id="p-7" style="">
        Item 3
        <ul class="mysite editor-ul ui-sortable"></ul>
      </li>
      <li class="draggable editor-li ui-sortable-handle" id="p-6" style="">
        Item 4
        <ul class="mysite editor-ul ui-sortable"></ul>
      </li>
    </ul>
  </li>
</ul>

JS 代码

$(function() {
  //$(".mysite").sortable({

  $(".mysite").sortable({
    connectWith: ".mysite",
    placeholder: "placeholder",
    update: function(event, ui) {
      var struct = [];
      var i = 0;

      $(".mysite").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);


      $.ajax({
        data: {
          "'.$this->security->get_csrf_token_name().'": "'.$this->security->get_csrf_hash().'",
          "job": "updateSiteStruc",
          "data": struct
        },
        type: "POST",
        url: "'.base_url().'"
      });


      var iArr = [];
      var iSer = [];
      $(".mysite:eq(0) li").each(function(ind, el) {

        if ($(el).attr("id") != undefined) {
          var label = $(el).attr("id");
        } else {
          return true;
        }

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

});

基于此我存储结构

通过 ajax 发送
在数据库中保存json_encode($post['data'])

所以现在我的数据库中有

"[{"array": ["", "p-1", "p-5"], "class": "mysite editor-ul ui-sortable-handle ui-sortable", "count": “3”，“索引”：“0”，“父”：“”，“序列”：“p[]=1&p[]=5”，“父索引”：“”}，{“类”：“mysite editor-ul ui-sortable”，“count”：“0”，“index”：“1”，“parent”：“p-1”，“serial”：“”，“parentIndex”：“1”}， {“array”：[“p-7”，“p-6”]，“class”：“mysite editor-ul ui-sortable”，“count”：“2”，“index”：“2”，“父”：“p-5”，“序列”：“p[]=7&p[]=6”，“parentIndex”：“2”}，{“class”：“mysite editor-ul ui-sortable”，“ count”：“0”，“index”：“3”，“parent”：“p-7”，“serial”：“”，“parentIndex”：“0”}，{“class”：“mysite editor- ul ui-sortable”、“count”：“0”、“index”：“4”、“parent”：“p-6”、“serial”：“”、“parentIndex”：“1”}]”

上述字符串的格式化版本：

"[{
  "array": ["", "p-1", "p-5"],
  "class": "mysite editor-ul ui-sortable-handle ui-sortable",
  "count": "3",
  "index": "0",
  "parent": "",
  "serial": "p[]=1&p[]=5",
  "parentIndex": ""
}, {
  "class": "mysite editor-ul ui-sortable",
  "count": "0",
  "index": "1",
  "parent": "p-1",
  "serial": "",
  "parentIndex": "1"
}, {
  "array": ["p-7", "p-6"],
  "class": "mysite editor-ul ui-sortable",
  "count": "2",
  "index": "2",
  "parent": "p-5",
  "serial": "p[]=7&p[]=6",
  "parentIndex": "2"
}, {
  "class": "mysite editor-ul ui-sortable",
  "count": "0",
  "index": "3",
  "parent": "p-7",
  "serial": "",
  "parentIndex": "0"
}, {
  "class": "mysite editor-ul ui-sortable",
  "count": "0",
  "index": "4",
  "parent": "p-6",
  "serial": "",
  "parentIndex": "1"
}]"

【问题讨论】：

标签： php jquery jquery-ui-sortable

【解决方案1】：

如果你想构建一个可以作为字符串存储在数据库中的项目列表，然后在 HTML 中构建为<ul>，我建议使用更复杂的结构，这样你就可以在数据。

$(function() {

  var saveData;

  function makeObj(list) {
    var d = [];
    d.push({
      id: list.attr("id"),
      class: list.attr("class"),
      items: []
    });
    list.children("li").each(function(ind, el) {
      var item = {
        attr: {
          index: ind,
          id: $(el).attr('id') || "list-item-" + ind,
          class: $(el).attr('class'),
          style: $(el).attr('style')
        },
        label: el.firstChild.data.trim(),
        children: $("ul", el).length ? true : false,
        childObj: false
      };
      d[0].items.push(item);
    });
    return d;
  }

  function buildList(d, t) {
    console.log(d);
    $.each(d, function(key, item) {
      $("<li>", item.attr).html(item.label).appendTo(t);
    });
  }

  function makeSort(obj, cnwt) {
    obj.sortable({
      connectWith: cnwt,
      placeholder: "placeholder"
    });
  }

  function stringify(d) {
    return JSON.stringify(d);
  }

  function parse(s) {
    return JSON.parse(s);
  }

  $("#saveList").click(function(e) {
    var myData = makeObj($("#mySite"));
    console.log(myData);
    $.each(myData[0].items, function(key, item) {
      if (item.children) {
        myData[0].items[key].childObj = makeObj($("ul:eq(0) > li:eq(" + key + ") > ul"));
      }
    });
    console.log(stringify(myData));
    saveData = stringify(myData);
  });

  $("#loadList").click(function(e) {
    if (saveData.length) {
      console.log(saveData);
      var myData = parse(saveData);
      var newList = $("<ul>", {
        id: myData[0].id,
        class: myData[0].class
      }).insertAfter($(this));
      buildList(myData[0].items, newList);
      makeSort(newList, myData[0].class);
      $.each(myData[0].items, function(key, item) {
        if (item.children) {
          var sList = $("<ul>", {
            id: item.childObj[0].id || "",
            class: item.childObj[0].class
          }).appendTo($("li:eq(" + item.attr.index + ")", newList));
          buildList(item.childObj[0].items, sList);
          makeSort(sList, item.childObj[0].class);
        }
      });
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="mySite" class="mysite editor-ul">
  <li class="draggable editor-li editor-li-head">Headline</li>
  <li class="draggable editor-li" id="p-1">Item1
    <ul class="mysite editor-ul"></ul>
  </li>
  <li class="draggable editor-li" id="p-5">Item 2
    <ul class="mysite editor-ul">
      <li class="draggable editor-li" id="p-7" style="">Item 3
        <ul class="mysite editor-ul"></ul>
      </li>
      <li class="draggable editor-li" id="p-6" style="">Item 4
        <ul class="mysite editor-ul"></ul>
      </li>
    </ul>
  </li>
</ul>
<button id="saveList">Save</button>
<button id="loadList">Load</button>

上面的示例专门用于显示保存和加载功能。要进行测试，请单击保存，然后单击加载。该结构被保存到一个字符串并放置在一个变量中。然后在加载时，从字符串中读取并构建一个新副本。

这不是关于可排序的，而是关于保存和加载的。您可以使用update 中的stringify(makeObj()) 将数据发送到您的数据库。如果您的列表更深，您将不得不为每一层重复几次makeObj()。

当您从数据库中获取数据时也是如此。它要么作为字符串返回，您可以在其中使用parse()，要么作为对象返回。如果您使用 PHP 到 encode_json() 并将 JSON 数据直接发送回脚本，就会出现这种情况。

发回字符串：

buildList(parse(data), $(".target"));

发回 JSON：

buildList(data, $(".target"));

如您所见，它可能变得相当复杂。找到一个可以为您完成繁重工作的插件可能会更好。请记住，这只是一个示例，可能不是您正在做的最好的示例。

希望对您有所帮助。

【讨论】：