CODEWITHSUNDEEP
jqueryjquery-plugins
bidou88
bidou88

Reputation: 694

Nestable jQuery plugin : Add an item dynamically

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

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 ?

Upvotes: 4

Views: 17325

Answers (5)

Mark
Mark

Reputation: 323

Probably it's too late to answer, but for anyone facing the same issue with buttons not showing, this is the solution I've come so far.

$('#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 );
})

Upvotes: 0

Marek Skiba
Marek Skiba

Reputation: 2184

There is also new version of Nestable package that support loading items dynamically from JSON and adding new item to the list on-the-fly. Read more here: https://github.com/RamonSmit/Nestable2

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

Upvotes: 1

Aamir Shaikh
Aamir Shaikh

Reputation: 83

we all have seen how to add items dynamically to nestable. I have written this code, where in you can create nestable items from JSON object.

//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);

Upvotes: 1

mijopabe
mijopabe

Reputation: 656

Try this:

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/

Food for Thought:

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.

Upvotes: 6

Behruz Tolibov
Behruz Tolibov

Reputation: 455

Use this function to add new node:

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

Upvotes: 2

Related Questions