2808 |
rexy |
1 |
/*
|
|
|
2 |
Copyright: Paul Hanlon
|
|
|
3 |
version 2009-06-22+statefix+spanfix+altfix+undefinedfix+ie6cachefix+multilinefix+divfix
|
|
|
4 |
Released under the MIT/BSD licence which means you can do anything you want
|
|
|
5 |
with it, as long as you keep this copyright notice on the page
|
|
|
6 |
*/
|
|
|
7 |
(function(jq){
|
|
|
8 |
jq.fn.jqTreeTable=function(map, options){
|
|
|
9 |
var opts = jq.extend({openImg:"",shutImg:"",leafImg:"",lastOpenImg:"",lastShutImg:"",lastLeafImg:"",vertLineImg:"",blankImg:"",collapse:false,column:0,striped:false,highlight:false,state:true},options),
|
|
|
10 |
mapa=[],mapb=[],tid=this.attr("id"),collarr=[],
|
|
|
11 |
stripe=function(){
|
|
|
12 |
if(opts.striped){
|
|
|
13 |
$("#"+tid+" tr:not(.collapsed)").filter(":even").addClass("even").removeClass("odd").end().filter(":odd").removeClass("even").addClass("odd");
|
|
|
14 |
}
|
|
|
15 |
},
|
|
|
16 |
buildText = function(parno, preStr){//Recursively build up the text for the images that make it work
|
|
|
17 |
var mp=mapa[parno], ro=0, pre="", pref, img;
|
|
|
18 |
if (mp!==undefined) for (var y=0,yl=mp.length;y<yl;y++){
|
|
|
19 |
ro = mp[y];
|
|
|
20 |
if (mapa[ro]){//It's a parent as well. Build it's string and move on to it's children
|
|
|
21 |
pre=(y==yl-1)? opts.blankImg: opts.vertLineImg;
|
|
|
22 |
img=(y==yl-1)? opts.lastOpenImg: opts.openImg;
|
|
|
23 |
mapb[ro-1] = preStr + '<span class="treeimg" style="background-image: url(\''+pre+'\')"><div style="background-image: url(\''+img+'\')" class="parimg" id="'+tid+ro+'"'+(img=(y==yl-1)? ' last=1': '')+'></div></span>';
|
|
|
24 |
pref = preStr + '<span class="treeimg preimg" style="background-image: url(\''+pre+'\')"></span>';
|
|
|
25 |
arguments.callee(ro, pref);
|
|
|
26 |
}else{//it's a child
|
|
|
27 |
pre=(y==yl-1)? opts.blankImg: opts.vertLineImg;
|
|
|
28 |
img = (y==yl-1)? opts.lastLeafImg: opts.leafImg;//It's the last child, It's child will have a blank field behind it
|
|
|
29 |
mapb[ro-1] = preStr + '<span class="treeimg" style="background-image: url(\''+pre+'\')"><div style="background-image: url(\''+img+'\')" class="ttimage" id="'+tid+ro+'"></div></span>';
|
|
|
30 |
}
|
|
|
31 |
}
|
|
|
32 |
},
|
|
|
33 |
expandKids = function(num, last){//Expands immediate children, and their uncollapsed children
|
|
|
34 |
jq("#"+tid+num).css('background-image', "url('"+((last)? opts.lastOpenImg: opts.openImg)+"')");
|
|
|
35 |
for (var x=0, xl=mapa[num].length;x<xl;x++){
|
|
|
36 |
var mnx = mapa[num][x];
|
|
|
37 |
jq("#"+tid+mnx).parents("tr").removeClass("collapsed");
|
|
|
38 |
if (mapa[mnx] && opts.state && jq.inArray(mnx, collarr)<0){////If it is a parent and its number is not in the collapsed array
|
|
|
39 |
arguments.callee(mnx,(x==xl-1));//Expand it. More intuitive way of displaying the tree
|
|
|
40 |
}
|
|
|
41 |
}
|
|
|
42 |
},
|
|
|
43 |
collapseKids = function(num, last){//Recursively collapses all children and their children and change icon
|
|
|
44 |
if (mapa[num]){
|
|
|
45 |
jq("#"+tid+num).css('background-image', "url('"+((last)? opts.lastShutImg: opts.shutImg)+"')");
|
|
|
46 |
for (var x=0, xl=mapa[num].length;x<xl;x++){
|
|
|
47 |
var mnx = mapa[num][x];
|
|
|
48 |
jq("#"+tid+mnx).parents("tr").addClass("collapsed");
|
|
|
49 |
if (mapa[mnx]){//If it is a parent
|
|
|
50 |
arguments.callee(mnx,(x==xl-1));
|
|
|
51 |
}
|
|
|
52 |
}
|
|
|
53 |
}
|
|
|
54 |
},
|
|
|
55 |
creset = function(num, exp){//Resets the collapse array
|
|
|
56 |
var o = (exp)? collarr.splice(jq.inArray(num, collarr), 1): collarr.push(num);
|
|
|
57 |
cset(tid,collarr);
|
|
|
58 |
},
|
|
|
59 |
cget = function(n){
|
|
|
60 |
var v='',c=' '+document.cookie+';',s=c.indexOf(' '+n+'=');
|
|
|
61 |
if (s>=0) {
|
|
|
62 |
s+=n.length+2;
|
|
|
63 |
v=(c.substring(s,c.indexOf(';',s))).split("|");
|
|
|
64 |
}
|
|
|
65 |
return v||[];
|
|
|
66 |
},
|
|
|
67 |
cset = function (n,v) {
|
|
|
68 |
v = arrUniq(v);
|
|
|
69 |
document.cookie = n+"="+v.join("|")+";";
|
|
|
70 |
},
|
|
|
71 |
arrUniq = function(a) {/* http://www.shamasis.net/2009/09/fast-algorithm-to-find-unique-items-in-javascript-array/ */
|
|
|
72 |
var o = {}, i, l = a.length, r = [];
|
|
|
73 |
for(i=0; i<l;i++) o[a[i]] = a[i];
|
|
|
74 |
for(i in o) r.push(o[i]);
|
|
|
75 |
return r;
|
|
|
76 |
};
|
|
|
77 |
|
|
|
78 |
try { //ie6 flickering fix
|
|
|
79 |
document.execCommand("BackgroundImageCache", false, true);
|
|
|
80 |
} catch(err) {}
|
|
|
81 |
|
|
|
82 |
for (var x=0,xl=map.length; x<xl;x++){//From map of parents, get map of kids
|
|
|
83 |
num = map[x];
|
|
|
84 |
if (!mapa[num]){
|
|
|
85 |
mapa[num]=[];
|
|
|
86 |
}
|
|
|
87 |
mapa[num].push(x+1);
|
|
|
88 |
}
|
|
|
89 |
buildText(0,"");
|
|
|
90 |
jq("tbody tr", this).each(function(i){//Inject the images into the column to make it work
|
|
|
91 |
jq(this).children("td").eq(opts.column).children("div").prepend(mapb[i]);
|
|
|
92 |
});
|
|
|
93 |
if(opts.state) collarr = cget(tid);
|
|
|
94 |
if (!collarr.length){
|
|
|
95 |
if(opts.collapse.constructor == Array) {
|
|
|
96 |
collarr=collarr.concat(opts.collapse);
|
|
|
97 |
if ((collarr.length) && (opts.state)){
|
|
|
98 |
cset(tid,collarr);
|
|
|
99 |
}
|
|
|
100 |
}
|
|
|
101 |
}
|
|
|
102 |
if (collarr.length){
|
|
|
103 |
for (var y=0,yl=collarr.length;y<yl;y++){
|
|
|
104 |
collapseKids(collarr[y], $("#"+tid+collarr[y]+ ".parimg").attr("last")==1);
|
|
|
105 |
}
|
|
|
106 |
}
|
|
|
107 |
stripe();
|
|
|
108 |
jq(".parimg", this).each(function(i){
|
|
|
109 |
var jqt = jq(this),last;
|
|
|
110 |
jqt.click(function(){
|
|
|
111 |
var num = parseInt(jqt.attr("id").substr(tid.length));//Number of the row
|
|
|
112 |
if (jqt.parents("tr").next().is(".collapsed")){//If the table row directly below is collapsed
|
|
|
113 |
expandKids(num, jqt.attr("last")==1);//Then expand all children not in collarr
|
|
|
114 |
if(opts.state){creset(num,true);}//If state is set, store in cookie
|
|
|
115 |
}else{//Collapse all and set image to opts.shutImg or opts.lastShutImg on parents
|
|
|
116 |
collapseKids(num, jqt.attr("last")==1);
|
|
|
117 |
if(opts.state){creset(num,false);}//If state is set, store in cookie
|
|
|
118 |
}
|
|
|
119 |
stripe();//Restripe the rows
|
|
|
120 |
});
|
|
|
121 |
});
|
|
|
122 |
if (opts.highlight){//This is where it highlights the rows
|
|
|
123 |
jq("tr", this).hover(
|
|
|
124 |
function(){jq(this).addClass("over");},
|
|
|
125 |
function(){jq(this).removeClass("over");}
|
|
|
126 |
);
|
|
|
127 |
};
|
|
|
128 |
};
|
|
|
129 |
return this;
|
|
|
130 |
})(jQuery);
|