[jQuery] Access to variables hidden by scope in a jQuery Javascript function
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