如何使用数据库中的存储结构恢复 jquery ui 可排序列表

Question

我试图在我的数据库中存储一个列表结构（基于这个问题[1]：），然后我需要一种方法来[=44=]列表，如果根据数据库中的数据刷新或加载新页面。

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

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

这是我已有的

榜单

<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", "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"}]"

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

"[{
  "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"
}]"

Answer 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"));

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

希望对您有所帮助。

如何使用数据库中的存储结构恢复 jquery ui 可排序列表

How to restore a jquery ui sortable list by using stored structure from db

php

jquery

jquery-ui-sortable