ludo / jquery-treetable Goto Github PK

Hi,
in jquery.TreeTable.js the onNodeShow does this:

options.onNodeShow.call();

Might want it doing this:

options.onNodeShow.call(this);

Cheers

Hi,

here is a small patch to add options the the cookie persistance:

modwork_esg_d@workdevel114:~$ diff -u media/jquery-treetable/javascripts/jquery.treeTable.js-orig media/jquery-treetable/javascripts/jquery.treeTable.js
--- media/jquery-treetable/javascripts/jquery.treeTable.js-orig 2011-11-21 15:14:04.916003117 +0100
+++ media/jquery-treetable/javascripts/jquery.treeTable.js  2011-11-21 14:50:38.013003191 +0100
@@ -53,7 +53,8 @@
     onNodeHide: null,
     treeColumn: 0,
     persist: false,
-    persistCookiePrefix: 'treeTable_'
+    persistCookiePrefix: 'treeTable_',
+    persistCookieOptions: {}
   };

   // Recursively hide all node's children in a tree
@@ -150,7 +151,7 @@
     if (options.persist) {
       // Store cookie if this node is expanded, otherwise delete cookie.
       var cookieName = options.persistCookiePrefix + $(this).attr('id');
-      $.cookie(cookieName, $(this).hasClass('expanded') ? 'true' : null);
+      $.cookie(cookieName, $(this).hasClass('expanded') ? 'true' : null, options.persistCookieOptions);
     }

     return this;

Basically, you need to be able to call expand/condense without calling onNodeShow/onNodeHide when initialising, otherwise DB-persistence is technically impossible if done from the parameterised functions.

There's two possibilities here

• Create two versions of expand/condense. One would be for when initialise is called, and the other for when explicitly clicking on expand/condense on each node
• Have a parameter to expand/condense which indicates whether to call the callback functions (onNodeShow/Hide).

This means, for example, condense may look like the following:

$.fn.expand = function (doCallback) {
    $(this).removeClass("collapsed").addClass("expanded");

    childrenOf($(this)).each(function () {
        initialize($(this));

        if ($(this).is(".expanded.parent")) {
            $(this).expand();
        }

        $(this).removeClass('ui-helper-hidden');

        if(doCallback != null && doCallback != false) {
            if ($.isFunction(options.onNodeShow)) {
                options.onNodeShow.call();
            }
        }

    });

    return this;
};

Seems weird, yes, doing != false but that's because you may not specify the parameter. I'm sure there's better ways of doing it. I'll make the changes and do a pull request, but give thoughts if you will.

when you add rows to a node with loadbranch, the indents aren't done at it looks like the rows belong to the root node. you have to use 3.0.0 with the loadbranch function from 3.0.1

i did this because in 3.0.1 the event onnodeexpand didn't work anymore.

Clicking on the GitHub link from http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html results in a 404 error.

Currently I don't see any functionality for bringing a child row to the top level and make it a parent. What would be the best way to approach this?

Thanks!

Old release had onNodeShow event which was called after node is already visible.
Would be very helpful.
in the meantime I've updated line 66

Node.prototype.expand = function() {
if (this.initialized && this.settings.onNodeExpand != null) {
this.settings.onNodeExpand.apply(this);
}
this.row.removeClass("collapsed").addClass("expanded");
this._showChildren();
this.expander.attr("title", this.settings.stringCollapse);

  if (this.initialized && this.settings.onNodeExpanded != null) {
      this.settings.onNodeExpanded.apply(this);
  }

  return this;
};

Since Jquery lets you create your own Selectors for example the following code is similar to the :contains() selector but is case unsensitive:

jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent||a.innerText||'').toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

In a similar way this plugin could register aditional selectors for an easy navigation within a treeTable for example:

$('.treeTable tr:nth-generation(3)')
retrieves all third generation nodes.

$('.treeTable tr:root("id-root-node")')
retrieves the whole branch of the tr with the id-root-node id.

you could also combine them like this:
$('.treeTable tr:root("id-root-node"):nth-generation(3)')
retrieves the 3rd generation of the branch that starts with the "id-root-node" node.

The nice thing of this approach is that it can be used not only for the $() function but also for any function that uses selectors as arguments.

For instance here could be a practical application for such a selector.

$('.treeTable').delegate('tr:nth-generation(2)', 'click', myAwesomeFunctionForRootNodes)
Here the treeTable handles the click events triggered on any tr that is also a second generation node. New tr can be added after the delegation is executed and the event will be allways listened.

Anyway I hope this feedback helps further develope this nice plugin.

Hi there,

I'm trying to get loadBranch to load child nodes. My code is pasted below. My problems are:

1. The newly constructed nodes are created as siblings of the root, rather than children of it;
2. Perhaps as a consequence, the children are not un-expanded when the root is clicked a second time; and
3. The children are not visible as expandable despite my use of the data-tt-branch attribute.

The attached image shows my UI after clicking the root node to expand and unexpand it a few times. Could you please let me know what I'm doing wrong? Thanks!

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./ludo-jquery-treetable-5719a6e/javascripts/src/jquery.treetable.js"></script>
    <link rel="stylesheet" href="./ludo-jquery-treetable-5719a6e/stylesheets/jquery.treetable.css" type="text/css">
    <link rel="stylesheet" href="./jquery.treetable.theme.css" type="text/css">
    <script>
      var id = 0;
      $(function() {
        $('#tbl').append(
          $('<tr/>')
             .attr('data-tt-id', '' + id++)
             .attr('data-tt-parent', (void 0))
             .attr('data-tt-branch', 'true')
             .append($('<td/>').html('the root stuff')));
        $('#tbl').treetable({
          expandable: true,
          onNodeExpand: function() {
            $('#tbl').treetable(
                'loadBranch',
                this,
                $('<tr/>')
                   .attr('data-tt-id', '' + id)
                   .attr('data-tt-parent', this.id)
                   .attr('data-tt-branch', 'true')
                   .append($('<td/>').html('child number ' + id)));
            id++;
          }
        });
      });
    </script>
  </head>
  <body>
    <table id="tbl"></table>
  </body>
</html>

Ludo,

Due to the interaction of jQuery.show(), hide(), or setting display = none. My UI hows and shows rows independently of the treeTable collapse capability. Therefore, setting display:none using CSS class was ideal. I've implemented this locally and highly recommend it. Perhaps this will increase your performance as you have commented. Now my rows can been collapsed/expanded independent of the page filter of rows.

Regards,
Shane Whittet

This kind of option seems to be embedded onto some of the tree view. I am wondering if this is possible for treetable as well.

Is it possible to limit the amount of nesting that is allowed? This plugin is fantastic - it was exactly what I was looking for and it saved me quite a bit of time writing my own solution. Thank you for sharing this. The only problem I'm having is that I only want parents and children, not parents and children with children. I've been trying to figure out how to limit this with clever naming for the draggable and droppable classes but I can't seem to figure it out.

Any ideas how I could accomplish this?

The bug is fixed if modify the function parentOf as following:
function parentOf(node) {
var classNames = node[0].className.split(' ');

{// modified by zhangtao 201103
for(i = 0; i < classNames.length ; i ++ ) 
  if(classNames[i].match(options.childPrefix)) {
    return $("#" + classNames[i].substring(9));
  }
}
return null;

};

As the root node has no class name which matchs childPrefix, the current parentOf throws an exception.

We have a table with around 800 rows and when we set initial state as expanded, it takes a lot of time to show the table and returns script running for long time errors in IE7/8 and 9.

TreeTable code has hardcoded paths that don't allow to link it remotelly, having to download all the files and have them on an specific file hierarchy.

Add support so rows could be sorted clicking on the columns, maybe with the help of a user-defined sorting function (in the same way the sort() function works) on each sort-capable column. This would require that internally the plugin generates a tree structure storing the hierarchy of the rows but also this tree structure would be used so rows could be added randomly so the requeriment of rows being inserted in order would be deprecated.

hi ludo

I am not sure if the tree table can perform scroll-x or scroll-y bar. I mean when the data is too large, I need x and y scroll bar in treetable's . I tried many ways and did not find out how to solve it. would you please do me the favor?

clickableNodeNames false or true, is acting as always true.

It would be nice to have some of the children lazy loaded when the parent is expanded for the first time.
I imagine having the expander image being changed for a loading image until the child elements are retrieved.

At the moment I use a child row with the "loading" legend that when its visible triggers an ajax query and its replace by the content as soon as its retrieved.

Is it possible to make the code so that the expander is statically placed and called via the initialize method using the cell.find method...if so how?

Hi,

It would be nice if it was possible to customize the animation used for expanding and collapsing the child nodes. E.g. fade in and out instead of just show/hide.

Thanks!

I feel is more convenient to use "data-" attributes instead of classes since allow more flexibility with the names (specially it would allow to have spaces on the identifier) and also don't pollute the class attribute.

Instead of a "child-of-" class prefix, I propose to use a "data-treetable-parentNode" attribute. Also a good idea would be to use a "data-treetable-node" attribute as identifier instead of use the element id.

The documentation at http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#settings reads:
initialState string "expanded"

However, playing with treeTable let me to see that the inital state is not expanded. I confirm this looking in the source code. File jquery.treeTable.js reads:
$.fn.treeTable.defaults = {
childPrefix: "child-of-",
clickableNodeNames: false,
expandable: true,
indent: 19,
initialState: "collapsed",
treeColumn: 0
};

Cheers

Hey
Thanks for nice plugin.
I am using this with knockout.js, using binding from here: http://jsfiddle.net/rniemeyer/9v9LD/
Everything works fine except that when I move child row to another parent the UI is not correctly updated. IE if this was the only child the expand arrow is still visible. If the target parent didn't have any children it doesnt get arrow.
Currently, I am trying to hack this by removing initialized class from both parents and using parent.expand method, but this is an ugly trick and doesn't always work as expected.
Could you provide an easy way to update UI? Ideally it would be if one could call this on specified rows and whole table is needed. Whole table refresh will be needed when data is refreshed using ajax.
Thanks.

I'm assembling a series of tables on the same page dynamically, and there isn't a way to come up with unique IDs for each table/row. I tried using treeTable but it would garble up my other tables and strange effects ensued when the same ID is used multiple times (which is invalid html anyhow).

Is there a way to dynamically assemble a treeTable that does not rely on unique id attributes?

I'm currently using treetable to create folders and adding them to other folders.

I use loadBranch function but it seems that it doest not refresh the view after adding rows.

Plus, I would like to know if it would be possible to add a row on the root ? I didn't find a solution to do it.

Hello ludo, I have recently tried to use jQuery treetable on a table that also features checkboxes and to extend the default behavior of the table to resemble that of a treeview. Basically I would like to have multiple checkboxes per row and changing each checkbox to also change the children's checkboxes.
For this I would need to set the proper event handlers on every checkbox in the table, but I couldn't find any event that was triggered for every node of the tree when initializing it. I would have expected nodes to be initialized when initializing the tree and not when expanding their parents.
Could such a functionality be supported in the future? Right now I added a small hack that does this in my local copy of the plugin but it would be nice if I didn't have to rely on such solutions.
Sorry if this is not the place for such requests, I'm quite new to GitHub, if it's acceptable could I maybe take care of this task myself and make a pull request?

Allow to have rows on the treetable without data-tt-id defined, only data-tt-parent-id. This was not required on the 2.x version of treetable (just to have a chid-of- class). If this is done because some kind of pre-initialization, it could be also done with data-tt-parent-id, making it easier to adapt code (that't the only point I got problems).

Using treetable 3.0.0 my chrome browser becomes unresponsive for several minutes. I have about 1.5k nodes.
With older treetable everything is fine.

Old reference provided in the documentation & installation steps

2.2 step says that "Add src/javascripts/jquery.treeTable.js" (i.e http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html)

But it does not work and the working sample referring to different jquery.treeTable.js file on the server. Its correct in the GitHub scource code

Other answers referred to code treetable() has to be like treeTable(). But it didn't work. :-(

Issue was : 2.2 step says that "Add src/javascripts/jquery.treeTable.js"

Solution: To get the jquery.treeTable.js file from GitHub

http://stackoverflow.com/questions/15291854/jquery-treetable-plugin-throwing-error-typeerror-treetable-is-not-a-fun/15292800?noredirect=1#comment21580407_15292800

I tried to have multiple tabs with ajax treetable implemented for each unique instances.
When I implemented them I had separate children call for each of the treetable list.

When I try it out in my dev I get this error:

TypeError: $(...).parents(...).treetable(...) is undefined

Due to this code being undefined for some reason...

$(this).parents("table").treetable("node", $(this).parents("tr").data(settings.nodeIdAttr)).toggle();

anyone have any idea? Or does Treetable not support multiple treetable in tabbed view?

I don't know if it's the exepected behaviour, but when severals childs are added to a node using loadBranch, these childs are displayed in reverse order. (The first loaded appears a the end).

It would be nice to have an option similar to the "initially_open" from http://www.jstree.com/documentation/core#configuration

I changed the code "margin-left:" to "margin-leftOFF:" to fix this.

I have a really big tree, so i put only the first part on the initial set and fetch deeper parts with AJAX. But soing so i have problems with initializing the new table rows, so that they get their right indention etc.

I see that search is implemented by nodeid at http://ludo.cubicphuse.nl/jquery-treetable/.
Is it possible that if i search by string name ?

At this moment, you can be able only to set the full tree to be expanded or collapsed on load, but there's no way to define if a particular node should be expanded or collapsed. I propose to add a constructor parameter with an array of strings with the IDs of the nodes that should be on the opposite status of the one defined for the full tree.

The collapse and expand functions are used differently in twitter bootstrap callapsable. If tree table is loaded, the bootstraps accordion does not work anymore.

I suggest to rename collapse and expand functions from jquery treetable to collapseBranch and expandBranch.

Hello,
I'm using treetable 3.0.1 (and jquery 1.8.3) in combinaison with the java web application framework Wicket 1.5
This framework can be started in 2 modes : development and deployment mode.
In development mode, the resulting html pages contains a lot of "wicket:" tags and tag attributes (that don't show up in deployment mode).
Sadly, the treetable plugin doesn't work correctly using internet explorer 8 and Wicket in development mode.

I've attached a zip file containing 2 web pages saved using internet explorer 8 (with anonymised data). The "deployment mode.htm" page will work correctly using internet explorer 8, but the "development mode.htm" won't work.
No problem so far using Chrome and Firefox.

Hope my english is not too bad :)

Thierry.

PS : Change the attached file extension from ".jpg" to ".zip"

It would be nice to use this library without fear of conflicting with others.

I realize that twitter bootstrap collapse (http://twitter.github.com/bootstrap/javascript.html#collapse) is also in the wrong, but they are providing a fairly generic implementation of collapsibility.

I think either having namespaced ($.fn.treeTable.collapse) or library prepended ($.fn.treeTableCollapse) functions would promote a larger user base.

Can you update this?

As suggested by @lilithabaddon:

I would like to know if it would be possible to add a row on the root ? I didn't find a solution to do it.

My first thoughts:

What about being able to do loadBranch(null, rows), would that make sense (note that this does not work right now, but should be possible to add)?

I think this does make sense and is easy to implement. Go!

It would be nice to have a way to configure the width of each column .

Hi,

Images of root nodes (top level) seem to be displayed not in the cell marked as treeColumn but in the cell left to it. When IE 8 is in compatibility mode, they are not displayed at all.

I would like to attach some screenshots - but I don't have that option.

Hi,
Thanks for your job.

I'm doing a treeview in a table and in the first columns i would like to show some buttons in the first columns.
I use the option to apply the tree in the second column as you mentionned in the doc. I did like this
$('#mytable').treeTable({
...
column:1,
...
});

But it doesn't work. :-(

I'm new in javascript and jQuery.

There would be really nice if the Table would trigger events on the collapsed or expanded row.
At the moment im using the click event and checking if the row has the class expanded or collapsed but seems rather a hack when it should be a standard plugin related behavior.

On 2.x branch, you could be able to call to the $.treetable() constructor several times over the same table, getting the tabletree in fact being re-rendered with the (new) given options. Now, subsequent calls are being ignored since the code does so explicitly, breaking compatibility.

Hi,
the current draft of HTML 5 is more permissive than HTML 4 for the values of id attributes, which can now contain about any character, such as the tilde (~). But a tilde in the id attribute of a table row causes an exception in childrenOf() when calling the treeTable constructor on the table.

For example, id "treetable_2_~" causes the problem. childrenOf() is called from initialize() and
uses a selector with the id unescaped:

function childrenOf(node) {
return $("table.treeTable tbody tr." + options.childPrefix + node[0].id);
};

I get a JavaScript error in Firefox: "uncaught exception: Syntax error, unrecognized expression: ~".

A simple test to prevent reinitialization would be quite convenient I believe. It is in my case, in which DOM components with treetables might be added/removed dynamically, and without this simple test I would have to keep track on my side of which table were already initialized.

I did modify a bit the code at line 373 of latest version to implement such behavior:

return this.each(function() {
        var el = $(this), tree;

        if (el.data("treetable") === undefined) {
          tree = new Tree(this, settings);
          tree.loadRows(this.rows).render();

          el.addClass("treetable").data("treetable", tree);

          if (settings.onInitialized != null) {
            settings.onInitialized.apply(tree);
          }
        }

        return el;
      });

(While here, many thanks for your work, very useful.)

When I use jquery 1.4.1 with treeTable 2.2.3 only the first child of a parent node is shown. The problem may be in initialization, because I notice that only the first child of a given parent node gets the "initialized" class.