ludo / jquery-treetable

jQuery plugin to show a tree structure in a table
http://ludo.cubicphuse.nl/jquery-treetable
GNU General Public License v2.0
739 stars 278 forks source link

Inital Display for loadBranch & removeNode #178

Closed djlerman closed 8 years ago

djlerman commented 8 years ago

I didn't know if I should ask 2 questions or just combine them, so I am combining them.

Here is sample code: http://jsfiddle.net/djlerman/xz95ps9b/1/

1) When I add with loadBranch the node is initially displayed even if the branch is hidden:

    $( "#addRow" ).on( "click", function() {
      var node = $("#example-basic").treetable("node", "1.1.1");
      var nodeToAdd = $("#example-basic").treetable("node", "1.1.1.1");

      var row = "<tr data-tt-id='1.1.1.1' data-tt-parent-id='1.1.1' style='display: none;'><td>Node 1.1.1.1: I am part of the tree too!!</td><td>That's it!!</td></tr>";
      row += "<tr data-tt-id='1.1.1.2' data-tt-parent-id='1.1.1' style='display: none;'><td>Node 1.1.1.2: I am part of the tree too!!!</td><td>That's it!!!</td></tr>";

      if(!nodeToAdd) {
        $("#example-basic").treetable("loadBranch", node, row);
      }
    });

2) When I try and remove a node with removeNode is doesn't work:

    $( "#removeRow" ).on( "click", function() {
      var node = $("#example-basic").treetable("node", "1.1.1.1");

      if(node) {
        $("#example-basic").treetable("removeNode", node);
      }

    });
acacha commented 8 years ago

For second question: removeNode API call expect an id not a node object, Try calling directly:

$( "#removeRow" ).on( "click", function() {
       $("#example-basic").treetable("removeNode", "1.1.1.1");
     });
djlerman commented 8 years ago

Thank You @acacha. That worked for removing a node. It's confusing that one thing uses node object and another uses a node ID.

Now to figure out how to add a node hidden.

Any ideas?

djlerman commented 8 years ago

I figured it out: How to add a hidden node. http://jsfiddle.net/djlerman/xz95ps9b/

    // add event for Add Row Button
    $( "#addRow" ).on( "click", function() {
      var node = $("#example-basic").treetable("node", "1.1.1");
      var nodeToAdd = $("#example-basic").treetable("node", "1.1.1.1");

      var row = "<tr data-tt-id='1.1.1.1' data-tt-parent-id='1.1.1' style='display: none;'><td>Node 1.1.1.1: I am part of the tree too!!</td><td>That's it!!</td></tr>";
      row += "<tr data-tt-id='1.1.1.2' data-tt-parent-id='1.1.1' style='display: none;'><td>Node 1.1.1.2: I am part of the tree too!!!</td><td>That's it!!!</td></tr>";

      if(!nodeToAdd) {
        $("#example-basic").treetable("loadBranch", node, row);
        $("#example-basic").treetable("collapseNode", '1.1.1');
      }
    });