Как восстановить сортируемый список пользовательского интерфейса jquery, используя сохраненную структуру из базы данных - PullRequest
Новая
       26

Как восстановить сортируемый список пользовательского интерфейса jquery, используя сохраненную структуру из базы данных

0 голосов
/ 15 января 2019

Я пытался сохранить структуру списка в моей базе данных (на основе этого вопроса [1]: Как сериализовать вложенный сортируемый список ul ), и после этого мне нужен способ восстановить / сбросить список, если страница обновлена, или загрузить новый на основе данных из базы данных.

Есть ли встроенный способ сделать это или как я могу это сделать?

В моем списке я использую вложенные элементы для поддержки способа создания гибкой вложенной структуры.

Это то, что у меня уже есть

Список 

<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 редактор-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"
}]"

1 Ответ

0 голосов
/ 15 января 2019

Если вы хотите создать список элементов, которые могут быть сохранены в виде строки в БД, а затем построены как <ul> в HTML, я бы предложил использовать гораздо более сложную структуру, чтобы вы могли иметь более глубокие отношения внутри данные. 

$(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>

Приведенный выше пример предназначен для демонстрации функций сохранения и загрузки. Чтобы проверить, нажмите Сохранить, а затем нажмите Загрузить. Структура сохраняется в строку и помещается в переменную. Затем при загрузке он читается из строки и создает новую копию.

Это не столько сортировка, сколько сохранение и загрузка. Вы можете использовать stringify(makeObj()) в update для отправки данных в вашу БД. Если ваш список более глубокий, вам придется повторить makeObj() несколько раз для каждого слоя.

То же самое происходит, когда вы получаете данные из БД. Либо он вернется в виде строки, в которой вы можете использовать parse(), либо вернется как объект. Это будет иметь место, если вы используете PHP для encode_json() и отправляете данные JSON непосредственно обратно в сценарий.

Отправка обратной строки: 

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

Отправка обратно JSON: 

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

Как видите, это может быть довольно сложно. Возможно, было бы лучше найти плагин, который может сделать тяжелую работу за вас. Помните, что это только один пример, и, возможно, не самый лучший для того, что вы делаете.

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

...