Hello!
I am trying to create a tree-like table. Each row has a link to
expand the row. When the link is clicked i want to make a copy of the
row (clone), change some values in the copy and insert it after the
original row.
After this is done, the link is bound to a new event: collapse. This
should remove the appended row(s) from the table.
Since the table can have multiple levels, the collapse function is
recursive.
To do this, I want to extend each <tr> element with a few functions
and some "member variables" .
Any tips on how to accomplish this?
Thanks!
This is what I have so far:
Function.prototype.bindOwner = function(object) {
var __method = this, object = arguments[0];
return function() {
return __method.apply(object, arguments);
}
}
$(document).ready(function() {
$("table.tree tbody tr").each(function() {
$(this).TableRowTreeNode();
});
});
jQuery.fn.TableRowTreeNode = function() {
$.extend(this,{
kids: null
,level: 0
/* expand */
,expand: function() {
var ch = this.getChildNodes();
this.kids = Array();
for(var i = 0; i < ch.length; i++) {
this.kids[i] = this.addChildNode(ch[i], this.level + 1);
}
$.log("Number of kids: " + this.kids);
$(this).find("a:first").unbind().attr("class",
"expanded").click(this.collapse.bindOwner(this));
}
/* collapse */
,collapse: function() {
$(this).find("a:first").unbind().attr("class",
"collapsed").click(this.expand.bindOwner(this));
for(var i = 0; i < $(this).kids.length; i++) {
$(this).kids[i].collapse();
$(this).kids[i].remove();
}
this.kids = Array();
}
/* getChildNodes */
,getChildNodes: function() {
$.log("getChildNodes() called");
return [{id: 666, name:"Foo"}, {id: 91919191, name:"Bar"}, {id:
12345678, name:"Rex"}];
}
/* addChildNode */
,addChildNode: function(data, l) {
var copy = this.clone().TableRowTreeNode();
copy.setLevel(l);
copy.find("td:first a").text(data.name + " Level: " + copy.level);
copy.attr("id", data.id);
copy.addClass("level" + l);
this.after(copy);
return copy;
}
,setLevel: function(l) {
this.level = l;
}
,edit: function() {
alert("edit: id: " + $(this).attr("id"));
}
});
this.find("td:first a").click(this.expand.bindOwner(this));
this.dblclick(this.edit.bindOwner(this));
return this;
};
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
