Modifier un treeview en javascript
Bonjour,
j'aurais besoin de votre aide pour modifier un script qui permet de générer un treeview.
Voici l'adresse où j'ai recuperer ça :
http://www.softcomplex.com/products/tigra_menu_tree/
Il est composer de trois scripts pour fonctionner : tree.js, tree_tpl.js(qui permet de modifier les images) et tree_items.js (c'est la qu'il faut ecrire d'une certaine façon pour réaliser son arborescence).
J'arrive à le faire fonctionner correctement mais je voudrais faire quelques choses d'autre maintenant. Par exemple lorsque je clique sur un lien il m'ouvre un autre dossier. Je sais pas si c'est clair, c'est comme si dans l'arborescence j'avais un dossier "mes documents" dans lequel il y aurait trois dossiers (musique,images et video). Ce que je voudrais c'est qu'en cliquant dans le treeview sur le dossier musique, il m'ouvre video. Merci pour votre aide.
Le code de tree.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| function tree (a_items, a_template) {
this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;
var o_icone = new Image(),
o_iconl = new Image();
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 64; i++)
if (a_template['icon_' + i]) {
var o_icon = new Image();
a_template['im_' + i] = o_icon;
o_icon.src = a_template['icon_' + i];
}
this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };
this.select = function (n_id) { return this.a_index[n_id].select(); };
this.mout = function (n_id) { this.a_index[n_id].upstatus(true) };
this.mover = function (n_id) { this.a_index[n_id].upstatus() };
this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);
this.n_id = trees.length;
trees[this.n_id] = this;
for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init());
this.a_children[i].open();
}
}
function tree_item (o_parent, n_order) {
this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 2 : 0)];
if (!this.a_config) return;
this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;
this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;
this.a_children = [];
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);
this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}
function item_open (b_close) {
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;
if (!o_idiv.innerHTML) {
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children[i]= this.a_children[i].init();
o_idiv.innerHTML = a_children.join('');
}
o_idiv.style.display = (b_close ? 'none' : 'block');
this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}
function item_select (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : 'bold';
this.upstatus();
return Boolean(this.a_config[1]);
}
function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}
function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset[i] = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absbottom">';
o_current_item = o_current_item.o_parent;
}
return '<table cellpadding="0" cellspacing="0" border="0"><tr><td nowrap>' + (this.n_depth ? a_offset.join('') + (this.a_children.length
? '<a href="javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absbottom" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>'
: '<img src="' + this.get_icon(true) + '" border="0" align="absbottom">') : '')
+ '<a href="' + this.a_config[1] + '" target="' + this.o_root.a_tpl['target'] + '" onclick="return trees[' + this.o_root.n_id + '].select(' + this.n_id + ')" ondblclick="trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')" class="t' + this.o_root.n_id + 'i" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absbottom" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + '</a></td></tr></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}
function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}
var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) }; |
Le code de tree_tpl.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| var TREE_TPL = {
'target' : 'frameset', // name of the frame links will be opened in
// other possible values are: _blank, _parent, _search, _self and _top
'icon_e' : 'icons/empty.gif', // empty image
'icon_l' : 'icons/line.gif', // vertical line
'icon_32' : 'icons/base.gif', // root leaf icon normal
'icon_36' : 'icons/base.gif', // root leaf icon selected
'icon_48' : 'icons/base.gif', // root icon normal
'icon_52' : 'icons/base.gif', // root icon selected
'icon_56' : 'icons/base.gif', // root icon opened
'icon_60' : 'icons/base.gif', // root icon selected
'icon_16' : 'icons/folder.gif', // node icon normal
'icon_20' : 'icons/folderopen.gif', // node icon selected
'icon_24' : 'icons/folderopen.gif', // node icon opened
'icon_28' : 'icons/folderopen.gif', // node icon selected opened
'icon_0' : 'icons/page.gif', // leaf icon normal
'icon_4' : 'icons/page.gif', // leaf icon selected
'icon_2' : 'icons/joinbottom.gif', // junction for leaf
'icon_3' : 'icons/join.gif', // junction for last leaf
'icon_18' : 'icons/plusbottom.gif', // junction for closed node
'icon_19' : 'icons/plus.gif', // junctioin for last closed node
'icon_26' : 'icons/minusbottom.gif',// junction for opened node
'icon_27' : 'icons/minus.gif' // junctioin for last opended node
}; |
Le code de tree_items.js :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var TREE_ITEMS = [
['Overview','',
['Common/Affichage',,
],
],
['Home','',
['Common','',
['Affichage','',
['30071','',
['Content.html',''],
['Parm_30071.xls',''],
['Script_30071.SQL',''],
],
],
],
],
]; |
et enfin ce qui lance tout ca dans le html :
Code:
1
2
3
4
5
| <script language="JavaScript">
<!--//
new tree (TREE_ITEMS, TREE_TPL);
//-->
</script> |
Dans mon exemple ici je voudrais qu'en cliquant sur "Common/Affichage" de l'OVERVIEW, il m'ouvre le dossier Affichage contenu dans le HOME.
Merci encore pour l'aide.
