Jquery nestable / initialize list from json

Jquery nestable / initialize list from json

本文关键字：from json list initialize nestable Jquery      更新时间：2023-09-26

我正在使用jquery嵌套插件（https://github.com/dbushell/Nestable/blob/master/jquery.nestable.js）来生成一个可嵌套列表。

生成 json 输出并将其保存到数据库中不是问题。

此插件生成的 json 示例：

[{"id":4,"children":[{"id":3}]}]

问题是：如何从同一个 json 数组构造可嵌套列表？

您可以从拥有的数组中形成所需的 html。只需将其包装在一个处理嵌套元素的函数中（可以通过调用自身来完成）并返回<ol>列表。

var tarr = [{"id":4,"children":[{"id":3}]}];
function listify(strarr) {
  var l = $("<ol>").addClass("dd-list");
  $.each(strarr, function(i, v) {
    var c = $("<li>").addClass("dd-item"),
      h = $("<div>").addClass("dd-handle").text("Item " + v["id"]);
    l.append(c.append(h));
    if (!!v["children"])
      c.append(listify(v["children"]));
  });
  return l;
}
var list = listify(tarr);
$("#test").append(list);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

我们都看过如何将项目动态添加到 nestable。我已经编写了这段代码，您可以在其中从 JSON 对象创建可嵌套的项目。

var json =  [{
  "id": 1,
  "content": "Payment Terms",
  "children": [{
    "id": 2,
    "content": "PT1"
  }, {
    "id": 3,
    "content": "PT2"
  }]
}, {
  "id": 4,
  "content": "Delivery Terms",
  "children": [{
    "id": 5,
    "content": "dt1"
  }, {
    "id": 6,
    "content": "dt2"
  }]
}];
Function to create nestable :
function makeNestableListUsingJSONArray(jsonArray, root) {
  if (typeof root === 'undefined') {
    root = $('body');
  }
  var $div = $('<div id="nestable"><ol class="dd-list"></ol></div>');
  root.append($div);
  for (var i = 0; i < jsonArray.length; i++) {
    var $li = $("<li class='dd-item' data-id='" + jsonArray[i].id + "'><div class='dd-handle'><span class='dd-content'>" + jsonArray[i].content + "</span></div></li>");
    root.find('ol.dd-list:first').append($li);    
    if (typeof jsonArray[i].children !== 'undefined') {
      makeNestableListUsingJSONArray(jsonArray[i].children, $li);
    }
  }
  $('#nestable').nestable({maxDepth:2});
}
call the function 
makeNestableListUsingJSONArray(json);

Ozan的答案效果很好，但如果您需要更高级的配置，那么这里是链接 https://github.com/RamonSmit/Nestable2

相关文章：