Witam,
przyznam, że zabawa z Prototype mnie wciągnęła i chciałbym Wam pokazać moją inną pracę.

http://phpworkstation.com/prototype/kategorie.html

Jest to skrypt umożliwiający wybór kategorii w taki sposób w jaki wybiera się kategorie na allegro. Obsługuje nieograniczoną liczbę zagnieżdżeń. Docelowo tablica k ma być tworzona dynamicznie na podstawie bazy danych (Ajax niepotrzebnie spowolniłby skrypt).

Proszę o opinie nt. skrypciku oraz pomoc w pewnym problemie. Mam problem z usuwaniem zbędnych selectów przy cofnięciu się w drzewie kategorii. Sądziłem, że użycie remove() będzie ok ale nie bardzo chce to działać. Tymczasowo więc dałem hide(). Wizualnie wygląda tak jak chciałem jednak elementy nadal siedzą w kodzie, a nie powinny. Gdyby ktoś znał rozwiązanie proszę o info.

[HTML] pobierz, plaintext 
var Category = Class.create();
Category.prototype = {
	initialize: function(id, name) {
		this.id = id;
		this.name = name;
	},
 
	getId: function() {
		return this.id;
	},
 
	getName: function() {
		return this.name;
	}
}
 
var CategoryList = Class.create();
CategoryList.prototype = {
	initialize: function(id) {
		this.id = id;
	},
 
	build: function() {
		var categoryId = this.id;
 
		if (k[this.id]) {
			categoryId = "";
 
			var select = document.createElement("select");
 
			select.setAttribute("size", 10);
 
			select.onchange = function() {
				var i = 0;
 
				while (select.next(i)) {
					//select.next(i).remove(); //<- 
				 select.next(i).hide();
					i++;
				}
 
				var cl = new CategoryList(this.value);
				cl.build();
			}
 
			var length = k[this.id].length;
 
			for (var i=0; i<length; i++) {
				var option = document.createElement("option");
				option.text = k[this.id][i].getName();
				option.value = k[this.id][i].getId();
 
				select.appendChild(option);
			}
 
			$("container").appendChild(select);
		}
 
		setCategoryId(categoryId);
	}
}
 
var k = new Array();
 
k[0] = new Array();
k[0][0] = new Category(1, "Kategoria 1");
k[0][1] = new Category(2, "Kategoria 2");
k[0][2] = new Category(3, "Kategoria 3");
 
k[1] = new Array();
k[1][0] = new Category(4, "Kategoria 1 1");
k[1][1] = new Category(5, "Kategoria 1 2");
k[1][2] = new Category(6, "Kategoria 1 3");
 
k[2] = new Array();
k[2][0] = new Category(7, "Kategoria 2 1");
 
k[5] = new Array();
k[5][0] = new Category(8, "Kategoria 1 2 1");
k[5][1] = new Category(9, "Kategoria 1 2 2");
 
function initCategoryList() {
	var categoryList = new CategoryList(0);
	categoryList.build();
}
 
function setCategoryId(id) {
	$("categoryId").value = id;
}
 
Event.observe(window, "load", initCategoryList, false);
[HTML] pobierz, plaintext 

Pozdrawiam: pion

PS: zastanawiałem się czy nie dać tego do "Gotowe rozwiązania" gdyż jest to dość często poszukiwany skrypt, jednak na razie chciałbym poznać opinie na jego temat.
PS2: teraz zauważyłem, że pod IE skrypt nie działa :/ Opera i FireFox śmigają.

Testowałem na FF i muszę przyznać cud malina

Good idea, dude!

to dopisz do tego jak powinna wygladac struktura tabel w bazie oraz kod php do wygenerowania tablicy w JS.
wtedy bedzie calkiem uzyteczne gotowe rozwiazanie:)

ps. w alledrogo tez tak jest to zrobione? tzn tez od razu wszystkie tablice sa w JS wpisywane? jak bedzie tego 100 tys kategorii to nie bedzie za duzo? przeciez user zazwyczaj wybiera tylko jedna kategorie wiec 90% innych bedzie niepotrzebnie zaladowane, moze zrobisz w AJAX jezeli jest duzo kategorii?

Czy stworze kategorie o poziomie zagnieżdżenia powiedzmy 10 i zacznę wybierać kategorię w Twoim prototype dochodząc do ostatniego poziomu (10), zdecyduje się wybrać inną podkategorię w poziomie 2 to czy wybór wpłynie na wszystkie podkategorie w głąb czy tylko na następną głębiej. ?

Tabela może mieć różną strukturę ale powinna zawierać polę id, parent_id, name. Tyle jest potrzebne do działania tego skryptu. Kod PHP chyba nie jest trudny do napisania więc jeśli ktoś będzie zainteresowany to sam sobie napisze.


Nie wiem czy jest tam użyty Ajax czy nie. Na moje potrzeby odwołania ajaxowe byłyby zbędne, lategorie w spokoju można trzymać w tablicy.


Tak, wpłynie na wszystkie następne. Zobacz na przykładzie w podanym przeze mnie linku. Wybierasz kolejno:
- Kategoria 1
- Kategoria 1 2
- Kategoria 1 2 1
po czym chcesz zmienić Kategorię 1 na Kategorię 2. Następuje usunięcie (a konkretnie ukrycie :/) selectów powyżej danego poziomu zagnieżdżenia i pojawiaja się select dla Kategorii 2 (zawierający 1 pozycję Kategoria 2 1).

Tak ale jesli bedzie wiecej w głąb kategorii ?

Również nie będzie problemu.

nie wiem czy to tymczasowe czy jak, ale u mnie na IE7 nie działa