可嵌套的jQuery插件:动态添加项目 [英] Nestable jQuery plugin : Add an item dynamically

问题描述

我使用可在此处使用的名为Nestable的jQuery插件: https://github.com/dbushell/Nestable

I use the jQuery plugin called Nestable available here : https://github.com/dbushell/Nestable

我尝试动态添加带有父项的项目.但是，如果仅在页面中添加代码，则不会出现展开/折叠"按钮，并且我认为有一种更好的解决方案，可以使用setParent函数添加项目?

I try to add an item with a parent dynamically. But if I only add the code in the page, the expand/collapse button does not appear and I think there is a better solution to add item with setParent function ?

是否有人已经通过此插件动态添加了商品?

Does anyone has already added an item dynamically with this plugin ?

推荐答案

尝试一下:

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属性.

The incremental counter is a good way to keep track of forms/modals assigned to each dynamically created list item, if needed. Then, use the .on() or .delegate() jquery properties if further actions is required of said forms/modals.

这篇关于可嵌套的jQuery插件:动态添加项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！