Simple usage of treetable

Treetable is also a very common plug-in to display data in the form of a number table, as follows:

Not much to say, direct sticker code:

Files that need to be introduced:

<script type= "Text/javascript" src= "Jquery-1.7.2.js" ></script>
<script type= "Text/javascript" src= "Jquery.treetable.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Jquery.treetable.theme.default.css"/>
<link rel= "stylesheet" type= "Text/css" href= "Jquery.treetable.css"/>

HTML code:

<table id= "example-advanced" >
<tr data-tt-id= "0" >
<td>app</td>
</tr>
<tr data-tt-id= "1" data-tt-parent-id= "0" >
<td>controllers</td>
</tr>
<tr data-tt-id= "1-1" data-tt-parent-id= "1" >
<td>application_controller.rb</td>
</tr>
<tr data-tt-id= "2" >
<td>helpers</td>
</tr>
<tr data-tt-id= "2-1" data-tt-parent-id= "2" >
<td>models</td>
</tr>
<tr data-tt-id= "2-1" data-tt-parent-id= "2" >
<td>views</td>
</tr>
</table>
<a href= "#" onclick= "JQuery (' #example-advanced '). Treetable (' ExpandAll '); return false; " > Expand All </a>


<a href= "#" onclick= "JQuery (' #example-advanced '). Treetable (' CollapseAll '); return false; " > Close all </a>
<br/>
Double-click to see which of the selected

JS Code:

<script>
$ (function () {

//load treetable
   $ ("# Example-advanced "). Treetable ({expandable:true});
   //Check highlight
   $ ("#example-advanced tbody"). On ("MouseDown", "tr", function () {
     $ (". Selected"). Not (This). Removeclass ("selected");
    $ (this). Toggleclass ("selected");
});
//double-click Prompt
$ ("#example-advanced Tbody "). On (" DblClick "," tr ", function () {
//console.log ($ (this). attr (' Data-tt-id '));
alert ("You have selected" +$ (this). attr (' Data-tt-id '));
});

})
</script>

The source connection is as follows:

http://download.csdn.net/detail/s592652578/8520831

Simple usage of treetable