I'm trying to edit an existing jQuery plugin. As a brief explanation, this plugin turns a regular Table into a TreeTable - a table with a hierarchy, similar to a folder browser, except with the additional columns. So there are parameters for which row is the parent of which other row, etc.
I'm still pretty new to jQuery so I may be interpreting this incorrectly, but it looks to me like when I call the jqTreeTable function on a tbody, it performs its work and returns a new object that takes the place of the original tbody. So! To get to my question, I am trying to add "expand all" and "collapse all" functionality to this plugin, but I'm unsure how to add these hooks into a closed function, because I need access to internal variables in the closed function in order to do the work. One solution that occurred to me was that I might setup some empty links with unique ids, pass those links into the jqTreeTable function along with the other parameters, and then alter the links to point at internal functions that do the work. That doesn't seem very clean (and maybe impossible?). I also tried altering the function to have another parameter that specified whether I wanted the table built (initial call), or whether I wanted to expand or collapse all nodes (subsequent calls). I couldn't figure out how to access the original internal variables - I just created a new scope every time I called the function. Here is a simplified version of the plugin: (function(jq){ jq.fn.jqTreeTable = function(options){ var /*a bunch of stuff*/ x, expandKids = function(num, last){//Expands immediate children, and their uncollapsed children jq("#" + tid + num).attr("src", (last) ? opts.lastOpenImg : opts.openImg);// for (var x = 0, xl = mapa[num].length; x < xl; x++) { var mnx = mapa[num][x]; jq("#" + tid + mnx).parents("tr").removeClass ("collapsed"); if (mapa[mnx] && opts.state && jq.inArray(mnx, collarr) < 0) {////If it is a parent and its number is not in the collapsed array arguments.callee(mnx, (x == xl - 1));//Expand it. More intuitive way of displaying the tree } } }, collapseKids = function(num, last){//Recursively collapses all children and their children and change icon jq("#" + tid + num).attr("src", (last) ? opts.lastShutImg : opts.shutImg); for (var x = 0, xl = mapa[num].length; x < xl; x++) { var mnx = mapa[num][x]; jq("#" + tid + mnx).parents("tr").addClass ("collapsed"); if (mapa[mnx]) {//If it is a parent arguments.callee(mnx, (x == xl - 1)); } }; }; /* build the tree table */ }; return this; })(jQuery); which gets called like this: $("#treet1").jqTreeTable(options); where 'treet1' is an id on a tbody. I want to write a function that can make subsequent calls to expandKids and collapseKids that operate on the same internal variables. To sum up: it seems to me that this jquery plugin is returning an altered tbody with a set of closed functions that do the work. I want to add some functions that I can call externally, but which have access to the internal arrays and variables of the other function. Some of these assumptions may be incorrect since I'm no jquery master, so please enlighten me. Here is the link to the original project if you feel the need to take a look: http://www.hanpau.com/index.php?page=jqtreetable