jQuery treetable using events

javascript jquery jquery-ui jquery-plugins treetable

10,531

Solution 1

jsFiddle Demo

You need to set the onNodeCollapse function in the settings object when the treetable is first set up.

$("#example-basic").treetable({ 
 expandable: true,
 onNodeCollapse: function() {
  alert( "A branch has collapsed" );
 }  
});

Solution 2

Following code worked for me:

function displayNeighborhoodTableTreeDialog(treeHtml){
var nhTreeDlg;
nhTreeDlg = $("#Table_Tree").dialog({
    modal: true,
    title: "BCP Explorer",
    height: 693, width: 525, left:0, top:0,
    button: {
        Ok: function() {$(this).dialog("close")}
    },
    show:{effect:'scale', duration:'300'},
    hide:{effect:'explode', duration:'300'}
});''
nhTreeDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ;
$("div#Table_Tree").find("table#nh_table").find("tbody").html(treeHtml);    

    var treeRoot = $("div#Table_Tree").find("table#nh_table").find("tbody").html();
    $("div#Table_Tree").find("table#nh_table").find("tbody").html(treeRoot + treeHtml);
$("table#nh_table").find("tbody").html());

    $("#nh_table").treetable({
            expandable: true, clickableNodeNames: false, indent:30, 
            onInitialized: function(){
                alert("Tree table initialized");
            },
            onNodeCollapse: function() {
                alert("Tree table Collapse");
                alert($(this.row).data("tt-id") + " has collapsed");
            },
            onNodeExpand: function()  {
                alert("Tree table Expand");
                alert($(this.row).data("tt-id") + " has expanded");
            }});
    nhTreeDlg.dialog("open");
}

The treeTable is like this

<div style='height:100%; max-height:520px;width:427px;border:1px #808080 solid;vertical-align:top;display:inline-block;overflow: hidden;'>
<div id="ttSize" style='max-height:520px;height:520px;overflow-y: scroll;'> 
            <table id=nh_table style='border:none;'>
        <tbody>
        <tr data-tt-branch='true' data-tt-id='bcp_farm'><td><span class=bcp_farm>Boardwalk Farm</span></td></tr>
  <tr data-tt-id=eportal-2 data-tt-parent-id='eportal' ><td><span class=nh_0>Root</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-2' data-tt-parent-id='eportal-2'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-2' data-tt-parent-id='eportal-2'><td><span class=members>Members</span></td></tr>
  <tr data-tt-id=eportal-3 data-tt-parent-id=eportal-2><td><span class=nh_child>Buyer-XX</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-3' data-tt-parent-id='eportal-3'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-3' data-tt-parent-id='eportal-3'><td><span class=members>Members</span></td></tr>
    </tbody>
    </table>
</div>

Following is the image:

After clicking one node you get following alert

10,531

Author by

Donavon Lerman

Updated on June 04, 2022

Comments

Donavon Lerman almost 2 years

I need assistance figuring out how to use the events provided with the jQuery plugin treetable.

jQuery treetable (PLUGIN): http://plugins.jquery.com/treetable/

This is what I am trying to solve.

When a branch collapses the plugin should trigger an event called "onNodeCollapse".

When a branch collapses I just need to display a javascript popup that says "A branch has collapsed". From here I can tie it into our own functions.

I have tried several different methods as well as searching on line for a solution.

Example script: http://jsfiddle.net/djlerman/yLb25dy9/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery treetable with event trigger - jsFiddle demo by djlerman</title>

  <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/screen.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css">

  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
  <script type='text/javascript' src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>

  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $("#example-basic").treetable({ expandable: true });

    /* 
        Trying to get this function to happen when 
        "onNodeCollapse" event happens
    */
    $("#example-basic").on("onNodeCollapse", function() {
        alert( "A branch has collapsed" );
    });
    });//]]>  
  </script>
</head>
<body>
  <table id="example-basic">
    <caption>Basic jQuery treetable Example</caption>
    <thead>
      <tr>
        <th>Tree column</th>
        <th>Additional data</th>
      </tr>
    </thead>
    <tbody>
      <tr data-tt-id="1">
        <td>Node 1: Click on the icon in front of me to expand this branch.</td>
        <td>I live in the second column.</td>
      </tr>
      <tr data-tt-id="1.1" data-tt-parent-id="1">
        <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
        <td>Interesting.</td>
      </tr>
      <tr data-tt-id="1.1.1" data-tt-parent-id="1.1">
        <td>Node 1.1.1: I am part of the tree too!</td>
        <td>That's it!</td>
      </tr>
      <tr data-tt-id="2">
        <td>Node 2: I am another root node, but without children</td>
        <td>Hurray!</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Donavon Lerman over 9 years

Thank You!!! I have been trying everything I could think of to get this to work.
Donavon Lerman over 9 years

Sorry I have a follow up question. How would I get it to display which branch has collapsed. Something like alert( $(this).data("tt-id") + "has collapsed" );
Travis J over 9 years

@DonavonLerman - this is going to contain a tree Node. As a result, you will need to access that Node's row property. You would use $(this.row).data("tt-id") + " has collapsed" to do that.
Donavon Lerman over 9 years

Brilliant. Thank You. I really wish stackoverflow had a tip jar or donation button for such helpful people and answers.