plugin Treeview - On clique sur un groupe et il referme les autres groupes déjà ouvert [Résolu]

[Dsphinx]

Bonjour,

J'utilise le JQuery.Treeview pour une liste de catégories et sous-catégories et j'aimerais que les catégories précédemment ouvertes se referment lorsqu'on clique sur une nouvelle (on aurait toujours qu'une catégorie d'ouverte, jamais deux dans ce cas).

Voici le code / classe, si vous pouvez m'aider et m'aiguiller :

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
/*
 * Treeview 1.3 - jQuery plugin to hide and show branches of a tree
 *
 * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
 *
 * Copyright (c) 2006 Jörn Zaefferer, Myles Angell
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: jQueryId: jquery.treeview.js 3506 2007-10-02 18:15:21Z joern.zaefferer jQuery
 *
 */
 
(function(jQuery) {
 
	// classes used by the plugin
	// need to be styled via external stylesheet, see first example
	var CLASSES = {
		open: "open",
		closed: "closed",
		expandable: "expandable",
		collapsable: "collapsable",
		lastCollapsable: "lastCollapsable",
		lastExpandable: "lastExpandable",
		last: "last",
		hitarea: "hitarea"
	};
 
	jQuery.extend(jQuery.fn, {
		swapClass: function(c1, c2) {
			return this.each(function() {
				var jQuerythis = jQuery(this);
				if ( jQuery.className.has(this, c1) )
					jQuerythis.removeClass(c1).addClass(c2);
				else if ( jQuery.className.has(this, c2) )
					jQuerythis.removeClass(c2).addClass(c1);
			});
		},
		replaceClass: function(c1, c2) {
			return this.each(function() {
				var jQuerythis = jQuery(this);
				if ( jQuery.className.has(this, c1) )
					jQuerythis.removeClass(c1).addClass(c2);
			});
		},
		hoverClass: function(className) {
			className = className || "hover";
			return this.hover(function() {
				jQuery(this).addClass(className);
			}, function() {
				jQuery(this).removeClass(className);
			});
		},
		heightToggle: function(animated, callback) {
			animated ?
				this.animate({ height: "toggle" }, animated, callback) :
				this.each(function(){
					jQuery(this)[ jQuery(this).is(":hidden") ? "show" : "hide" ]();
					if(callback)
						callback.apply(this, arguments);
				});
		},
		heightHide: function(animated, callback) {
			if (animated) {
				this.animate({ height: "hide" }, animated, callback)
			} else {
				this.hide();
				if (callback)
					this.each(callback);
			}
		},
		prepareBranches: function(settings) {
			// mark last tree items
			this.filter(":last-child").addClass(CLASSES.last);
			// collapse whole tree, or only those marked as closed, anyway except those marked as open
			this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
			// return all items with sublists
			return this.filter(":has(>ul)");
		},
		applyClasses: function(settings, toggler) {
			this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
				if ( this == event.target ) {
					toggler.apply(jQuery(this).next());
				}
			}).add( jQuery("a", this) ).hoverClass();
 
			// handle closed ones first
			this.filter(":has(>ul:hidden)")
					.addClass(CLASSES.expandable)
					.replaceClass(CLASSES.last, CLASSES.lastExpandable);
 
			// handle open ones
			this.not(":has(>ul:hidden)")
					.addClass(CLASSES.collapsable)
					.replaceClass(CLASSES.last, CLASSES.lastCollapsable);
 
            // create hitarea
			this.prepend("<div class=\"" + CLASSES.hitarea + "\"/>")
				.find("div." + CLASSES.hitarea).click( toggler )
		},
		treeview: function(settings) {
 
			// currently no defaults necessary, all implicit
			settings = jQuery.extend({}, settings);
 
			if (settings.add) {
				return this.trigger("add", [settings.add]);
			}
 
			if (settings.toggle ) {
				var callback = settings.toggle;
				settings.toggle = function() {
					return callback.apply(jQuery(this).parent()[0], arguments);
				}
			}
 
			// factory for treecontroller
			function treeController(tree, control) {
				// factory for click handlers
				function handler(filter) {
					return function() {
						// reuse toggle event handler, applying the elements to toggle
						// start searching for all hitareas
						toggler.apply( jQuery("div." + CLASSES.hitarea, tree).filter(function() {
							// for plain toggle, no filter is provided, otherwise we need to check the parent element
							return filter ? jQuery(this).parent("." + filter).length : true;
						}) );
						return false;
					}
				}
				// click on first element to collapse tree
				jQuery(":eq(0)", control).click( handler(CLASSES.collapsable) );
				// click on second to expand tree
				jQuery(":eq(1)", control).click( handler(CLASSES.expandable) );
				// click on third to toggle tree
				jQuery(":eq(2)", control).click( handler() );
			}
 
			// handle toggle event
			function toggler() {
				// this refers to hitareas, we need to find the parent lis first
				jQuery(this).parent()
					// swap classes
					.swapClass( CLASSES.collapsable, CLASSES.expandable )
					.swapClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
					// find child lists
					.find( ">ul" )
					// toggle them
					.heightToggle( settings.animated, settings.toggle );
				if ( settings.unique ) {
					jQuery(this).parent()
						.siblings()
						.replaceClass( CLASSES.collapsable, CLASSES.expandable )
						.replaceClass( CLASSES.lastCollapsable, CLASSES.lastExpandable )
						.find( ">ul" )
						.heightHide( settings.animated, settings.toggle );
				}
			}
 
			function serialize() {
				function binary(arg) {
					return arg ? 1 : 0;
				}
				var data = [];
				branches.each(function(i, e) {
					data[i] = jQuery(e).is(":has(>ul:visible)") ? 1 : 0;
				});
				jQuery.cookie("treeview", data.join("") );
			}
 
			function deserialize() {
				var stored = jQuery.cookie("treeview");
				if ( stored ) {
					var data = stored.split("");
					branches.each(function(i, e) {
						jQuery(e).find(">ul")[ parseInt(data[i]) ? "show" : "hide" ]();
					});
				}
			}
 
			// add treeview class to activate styles
			this.addClass("treeview");
			// prepare branches and find all tree items with child lists
			var branches = this.find("li").prepareBranches(settings);
 
			switch(settings.persist) {
			case "cookie":
				var toggleCallback = settings.toggle;
				settings.toggle = function() {
					serialize();
					if (toggleCallback) {
						toggleCallback.apply(this, arguments);
					}
				};
				deserialize();
				break;
			case "location":
				var current = this.find("a").filter(function() { return this.href == location.href; });
				if ( current.length ) {
					current.addClass("selected").parents("ul, li").add( current.next() ).show();
				}
				break;
			}
 
			branches.applyClasses(settings, toggler);
 
			// if control option is set, create the treecontroller
			if ( settings.control )
				treeController(this, settings.control);
 
			return this.bind("add", function(event, branches) {
				jQuery(branches).prev().removeClass(CLASSES.last).removeClass(CLASSES.lastCollapsable).removeClass(CLASSES.lastExpandable);
				jQuery(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, toggler);
			});
		}
	});
 
	// provide backwards compability
	jQuery.fn.Treeview = jQuery.fn.treeview;
})(jQuery);

Merci de votre aide !

[gianni7033]

puré lol moi je coince depuis une semaines sur les treeview en jQuery

si ça peut t'aider, ici tu prend le 2ème exemple, ça s'appelle l'effet accordion je pense

http://labs.abeautifulsite.net/proje...fileTree/demo/


------------------------

dans l'exemple que tu utilises je bug sur un truc :

Code :

$('.file, .folder').click(function(){ alert('ok'); });

cette action fonctionne uniquement les file et folder déja créé !

dès que je créé un nouveau file ou folder, plus moyen d'appeller la fonction click

[danielhagnoul]

Bonsoir

Je ne connais pas le plug-in, mais en regardant la documentation n'est-ce pas le rôle de l'option multiFolder ?

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
 
$(function(){
    $('#container_id').fileTree({
        root: '/some/folder/',
        script: 'jqueryFileTree.asp',
        expandSpeed: 1000,
        collapseSpeed: 1000,
        multiFolder: false // essayer avec false et avec true
    }, function(file) {
        alert(file);
    });
});