Nestable jQuery插件：动态添加项目

我在这里使用名为Nestable的jQuery插件： https ： //github.com/dbushell/Nestable

我尝试动态添加父项。 但是如果我只在页面中添加代码，则不会出现展开/折叠按钮，我认为使用setParent函数添加项目有更好的解决方案吗？

有没有人已经使用这个插件动态添加了一个项目？

Answer 1

试试这个：

HTML

Add li 
 
 
 
Drag
 
Item 1
 
 
 
Drag
 
Item 2
 
 
 
Drag
 
Item 3
 
 
  

JS

 $(function(){ var nestablecount = 4; $('#appendnestable').click(function(){ $('ol.outer').append('
Drag
Item '+nestablecount+'
'); nestablecount++; }); }); 

JSFiddles

http://jsfiddle.net/mijopabe/35Kqu/

http://jsfiddle.net/mijopabe/YgU52/

思想的食物：

如果需要，增量计数器是跟踪分配给每个动态创建的列表项的表单/模态的好方法。 然后，如果所述表单/模态需要进一步的操作，则使用.on（）或.delegate（）jquery属性。

Answer 2

使用此函数添加新节点：

 function addNode(){ $("#nestable > ol").append("
New Node
"); } 

Answer 3

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

 //JSON Object 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 = $('
'); root.append($div); for (var i = 0; i < jsonArray.length; i++) { var $li = $("
" + jsonArray[i].content + "
"); 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); 

Answer 4

还有新版本的Nestable软件包支持从JSON动态加载项目并在运行中将新项目添加到列表中。 在这里阅读更多内容： https ： //github.com/RamonSmit/Nestable2

 $('.dd').nestable('add', {"id":1,"children":[{"id":4}]});