Jquery plugin treeTable : Not Displaying correctly

Question

I am using a Jquery plugin, treeTable for displaying a html table. http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/ My code is below :

<html>
<head>
<link href="treeTable/src/stylesheets/jquery.treeTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="treeTable/src/javascripts/jquery.treeTable.js"></script>

<script type="text/javascript" src="treeTable/doc/javascripts/jquery.js"></script>
<script type="text/javascript" src="treeTable/doc/javascripts/jquery.ui.js"></script>

<script>

  $(document).ready(function() {
    $('.type_struct_class').treeTable({
        initialState: 'collapsed'
        });
    $('table#type_struct tbody tr').mousedown(function() {
        $('tr.selected').removeClass('selected'); 
        $(this).addClass('selected');
    });
    $(\"table#type_struct tbody tr span\").mousedown(function() {
        $($(this).parents(\"tr\")[0]).trigger(\"mousedown\");
    });





});
</script>
</head>
<body>

<table class='type_struct_class' id='type_struct'>
  <tr id="node-1">
    <td>Parent</td><td>100</td><td>1000</td>
  </tr>
  <tr id="node-2" class="child-of-node-1">
    <td>Child</td><td>200</td><td>2000</td>
  </tr>
  <tr id="node-3" class="child-of-node-2">
    <td>Child</td><td>300</td><td>3000</td>
  </tr>
</table>

</body>
</html>

I don't see the table formatted, as like with child and parent nodes. It appears as a normal table in my Chrome browser. Can anyone help where I went wrong?

score 1 · Answer 1 · edited Jan 01 '14 at 13:29

1

I found the the integration of jQuery tree table and Atlassian products difficult and wrote a compatible clone of the script. It has some helper functions for dynamically generating the tables too: you can give it a try: http://culmat.github.io/jsTreeTable/

edited Jan 01 '14 at 13:29

BenMorel

34,448
50
182
322

answered Aug 26 '13 at 21:36

culmat

1,156
11
12

score 0 · Answer 2 · answered Feb 20 '13 at 16:08

0

Try this out :- http://jsfiddle.net/adiioo7/6mtnL/

$(document).ready(function () {
    $('.type_struct_class').treeTable({
        initialState: 'expanded'
    });
    $('table#type_struct tbody tr').mousedown(function () {
        $('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    });
    $("table#type_struct tbody tr span").mousedown(function () {
        $($(this).parents("tr")[0]).trigger("mousedown");
    });
});

answered Feb 20 '13 at 16:08

Aditya Singh

9,512
5
32
55

Yes, I see it was what I wanted to do. However the same is not happening in my browser. can you suggest why is it so ? What is the problem there ? – Somnath Paul Feb 21 '13 at 08:48
browser name and version?? – Aditya Singh Feb 21 '13 at 09:01
Google Chrome Version 24.0.1312.57 – Somnath Paul Feb 21 '13 at 09:06
remove "\" character from the JS $(\"table#type_struct tbody tr span\").mousedown(function() { $($(this).parents(\"tr\")[0]).trigger(\"mousedown\"); }); – Aditya Singh Feb 21 '13 at 10:16
Eureka !! I found the error after a long struggle !! I made a mistake of first referring to the treeTable.js, before including the JQuery.js script. Now with the correct order, it works fine. – Somnath Paul Feb 21 '13 at 12:56
Yeah that is true too, i changed that wiz kid – Somnath Paul Feb 21 '13 at 12:58

Jquery plugin treeTable : Not Displaying correctly

2 Answers2