Question

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

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

是否有人已使用此插件动态添加项目？

Answer 1

试试这个：

<强> HTML

<button id="appendnestable">Add li</button>
<div class="dd" id="nestable">
  <ol class="dd-list outer">
    <li class="dd-item dd3-item" data-id="1">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="1">Item 1</div>
    </li>

    <li class="dd-item dd3-item" data-id="2">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="2">Item 2</div>
    </li>

    <li class="dd-item dd3-item" data-id="3">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="3">Item 3</div>
    </li>
  </ol>
</div>

<强> JS

$(function(){
  var nestablecount = 4;
  $('#appendnestable').click(function(){
    $('ol.outer').append('<li class="dd-item dd3-item" data-id="'+nestablecount+'"><div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="'+nestablecount+'">Item '+nestablecount+'</div></li>');
    nestablecount++;
  });
});

<强> JSFiddles

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

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

思考的食物：

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

Answer 2

使用此功能添加新节点：

function addNode(){
    $("#nestable > ol").append("<li class='dd-item' data-id='13'><div class='dd-handle'>New Node</div></li>");
}

Answer 3

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

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

Answer 4

我们都已经看到了如何动态地将项目添加到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 = $('<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);

Answer 5

答案可能为时已晚，但是对于面临相同问题但按钮未显示的任何人，这是我到目前为止提出的解决方案。

$('#nestable').nestable();
$('[data-action="collapse"],[data-action="expand"]').remove();

let collapseBtnTemplate = '<button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>';
let expandBtnTemplate = '<button data-action="collapse" type="button" style="display: none;">Collapse</button><button data-action="expand" type="button">Expand</button>';

$('#nestable > ol:first-child > li.dd-item').each(function(){
    $(this).prepend( $(this).hasClass('dd-collapsed')? expandBtnTemplate : collapseBtnTemplate );
})

Nestable jQuery插件：动态添加项目

5 个答案: