Question

当我们尝试添加此处所述的单个列表项时，Nestable运行良好（Nestable jQuery plugin : Add an item dynamically）

但如果我们尝试添加一个全新的列表（ol元素），它就无法正常工作。

当我们尝试动态添加新的ol元素时，它不显示扩展选项。

感谢任何帮助。

jsfiddle描述问题：http://jsfiddle.net/0zrsnt44/

# app/controllers/some_cleverly_named_controller.rb
def index 
  @search_results = ClientSearch.call(params)
  # ... 
end

# app/services/client_search.rb
class ClientSearch 
  def self.call(params)
    ModelName.where(related_id: params[:related_model_id],  active: params[:status]).order("id #{params[:sort_order]}, model_name.last_name #{params[:sort_order]}").includes(:related_model)
  end 
end

Answer 1

要创建一个Nestable子列表，您必须遵循以下模式：

<ol class="dd-list outer">
    ...
    <li class="dd-item addnewlist" data-id="4">
        <div class="dd-handle">Item 4</div>

        <!-- Dynamically added >>>>>> -->
        <ol class="dd-list outer">
            <li class="dd-item" data-id="3">
                <div class="dd-handle">Item 3</div>
            </li>
        </ol>
        <!--  <<<<<<  -->

    </li>
    ...
</ol>

即。子列表应放在div.dd-handle之后，并且其中必须包含li.dd-item和div.dd-handle个元素。

但即使你做对了，除此之外还有一个更大的问题：Nestable不会知道底层DOM中有新元素，所以它不能正确初始化它们，创建展开/折叠按钮等。它无法让用户明确重新初始化/重绘它。

您可以分叉插件并添加所需的功能，也可以尝试从代码中进行破解和扩展。

这是我尝试创建一个reinit方法，可以在修改列表的DOM后调用它来更新它：

(function($) {
    var $plugin = $('<div>').nestable().data('nestable');

    var extensionMethods = {
        reinit: function() {
            // alias
            var list = this;

            // remove expand/collapse controls
            $.each(this.el.find(this.options.itemNodeName), function(k, el) {
                // if has <ol> child - remove previously prepended buttons
                if ($(el).children(list.options.listNodeName).length) {
                    $(el).children('button').remove();
                }
            });

            // remove delegated event handlers
            list.el.off('click', 'button');

            var hasTouch = 'ontouchstart' in document;
            if (hasTouch) {
                list.el.off('touchstart');
                list.w.off('touchmove');
                list.w.off('touchend');
                list.w.off('touchcancel');
            }

            list.el.off('mousedown');
            list.w.off('mousemove');
            list.w.off('mouseup');

            // call init again
            list.init();
        } // reinit
    };

    $.extend(true, $plugin.__proto__, extensionMethods);
})(jQuery);

可以像这样调用此方法：

$('#nestable').nestable('reinit');

完整示例：JSFiddle

Answer 2

我的方法很像Dekkard。你会看到我做到了。 11个月前，在CodePen上，nestable.js的未来似乎比目前在开发支持方面更亮。我认为值得包括，所以你可以看看该插件还能做些什么。

查看我的CodePen：http://codepen.io/mijopabe/pen/xlcjq。

您可以创建并使用计数器来跟踪您创建和操作的特定列表项：

$(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><div id="c-'+nestablecount+'" 
class="content"><form role="form-'+nestablecount+'"><div class="form-group"><label 
for="name">Name</label><input type="text" class="form-control" id="name" 
placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a 
Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet">
</textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)
</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div>
</div></form></div></li>');

  updateOutput($('#nestable').data('output', $('#nestable-output')));
  nestablecount++;
  });

});

Answer 3

                Hello All,

                My approach is very simple and is readily readable.

                Add 2 jquery files in your project :- 1) nestable.js 2) nestable.css

                **HTML**

                <label>Enter Your Data</label>
                <input type='text' id='tncInput'>
                <button id="appendnestable">Add Data to li</button>
                <div class="dd" id="nestable">
                  <ol class="dd-list outer"></ol>
                </div>

            **jQuery** 

            $('#nestable').nestable();

            $(function() {
              var nestablecount = 1;
              $('#appendnestable').click(function() {
                var tnc = $('#tncInput').val();
                var html = '<li class="dd-item" id="' + nestablecount + '"  data-id="' + nestablecount + '"><div class="dd-handle"> ' + tnc + '</div></li>'
                $('ol.outer').append(html);
                $('#tncInput').val('')
                nestablecount++;
              });
            });

        This is how you will be able to enter your data dynamically to LI.
    Moreover, you can even change some nestable configuration settings as follows :

    $('#nestable').nestable({maxDepth:2, group:1});

    maxDepth :- number of levels an item can be nested (default 5)
    group:-  group ID to allow dragging between lists (default 0)

Thanks!!

Nestable jquery插件动态添加列表

3 个答案: