Witam, jak w temacie. Muszę zrobić coś w stylu tego formularza z allegro, a mianowicie, po kliknięciu w kategorię, ma pokazać się okno z wyborem podkategorii i tak aż do wybrania tej ostatniej podkategorii (prawdopodobnie 6 podkategorii to będzie max).
Domyślam się, ze potrzebna będzie znajomość js, ale jak połączyć js z danymi pobieranymi z MySQL ?
Może jquery events? Dane są wczytane od razu, natomiast kontenery <div> "uwidaczniają się" tylko w przypadku wykonania akcji np. wybrania pozycji z listy 
.
.
Z tym wczytywaniem danych od razu może być trochę problemu. Chodzi o to, że jak wybiorę z listy kategorię, to chcę, aby w okienku obok pokazały się wszystkie podkategorie przypisane do tej kategorii/podkategorii (przy większej liczbie poziomów)
Toteż właśnie. Dla przykładu masz formularz z listą, po wybraniu pierwszej pozycji z listy ma się pojawić pole tekstowe, a po wybraniu drugiej druga rozwijana lista. Struktura:
Formularz
lista rozwijana
- pozycja nr jeden
- pozycja nr dwa
<div id="jeden">
pole tekstowe
</div>
<div id="dwa>
inna lista rozwijana
</div>
Domyślnie div jeden i dwa mają display: hidden. Po wybraniu odpowiedniej opcji, kolejny poziom formualrza (czyli div) pojawia się. Liczba poziomów jest dowolna. Jeżeli typów danych jest sporo, to trzeba się trochę nagimnastykować, ale myślę że jquery events to załatwi.
Formularz
lista rozwijana
- pozycja nr jeden
- pozycja nr dwa
<div id="jeden">
pole tekstowe
</div>
<div id="dwa>
inna lista rozwijana
</div>
Domyślnie div jeden i dwa mają display: hidden. Po wybraniu odpowiedniej opcji, kolejny poziom formualrza (czyli div) pojawia się. Liczba poziomów jest dowolna. Jeżeli typów danych jest sporo, to trzeba się trochę nagimnastykować, ale myślę że jquery events to załatwi
.
Wiem na jakiej zasadzie ma to działać, ale czy uda się to zrobić tak:
klikam na pozycję w pierwszym divie, dostaję pewien parametr (id kategorii), wyświetla mi się drugi div, w którym automatycznie z bazy MySQL pobierają się dane i tak, aż do wybrania odpowiedniej kategorii?
W szczególności chodzi mi o przekazanie wartości id, bo wszystko musi być oparte o MySQL i generować się automatycznie.
Pomysł dobry, też o czymś takim myślałem, ale zatrzymałem się nad pobieraniem danych z MySQL.
klikam na pozycję w pierwszym divie, dostaję pewien parametr (id kategorii), wyświetla mi się drugi div, w którym automatycznie z bazy MySQL pobierają się dane i tak, aż do wybrania odpowiedniej kategorii?
W szczególności chodzi mi o przekazanie wartości id, bo wszystko musi być oparte o MySQL i generować się automatycznie.
Pomysł dobry, też o czymś takim myślałem, ale zatrzymałem się nad pobieraniem danych z MySQL.
Zrobiłem kiedyś coś w tym stylu jako plugin do jQuery, może Ci się przyda, będzie dobrze działać jak masz małe drzewo kategorii, musisz je sobie jakoś robić w jsonie, forma:
Plugin:
Użycie:
Jak to ostylować: firebug i popatrz jakie klasy nadaje
Kod
{
"Business Root 1":{
"Business SubRoot 1":{
"Business Category 1":35,
"Business Category 2":34,
},
"Business SubRoot 2":{
"Business Category 3":29,
"Business Category 4":28,
},
"Business Category 5":23,
},
"Business Root 2":{
"Business SubRoot 3":{
"Business Category 6":18,
"Business Category 23":17,
},
"Business SubRoot 4":{
"Business Category 34":12,
},
},
}
"Business Root 1":{
"Business SubRoot 1":{
"Business Category 1":35,
"Business Category 2":34,
},
"Business SubRoot 2":{
"Business Category 3":29,
"Business Category 4":28,
},
"Business Category 5":23,
},
"Business Root 2":{
"Business SubRoot 3":{
"Business Category 6":18,
"Business Category 23":17,
},
"Business SubRoot 4":{
"Business Category 34":12,
},
},
}
Plugin:
Kod
/*
* jQuery.gtreeCategories v0.1
*
* Copyright (c) 2010 aart3k@gmail.com
* Licensed under the New BSD license.
*
* TODO: options
*/
(function($) {
$.fn.gtreeCategories = function(tree, parentName) {
// function that removes all child optionsBoxes
var removeNested = function (name) {
$("ul[name^='"+ name + "']").remove();
};
categoryIdPicker = this;
// set unique prefix for optionboxes - will be used with deleting
if(! parentName) {
parentName = "__catselect";
$("<br>").css('clear','left').insertAfter(categoryIdPicker);
}
// number of _ determines what level of choice optionbox belongs to
var domName = parentName + "_";
// create box with selectable options
optionsBox = $("<ul>")
.addClass("ui-selectable")
.attr('name', domName);
// always insert box before category picker
optionsBox.insertBefore(categoryIdPicker);
// process every node on category tree on this level
$.each(tree, function(name, value) {
// create choice element, add classes that mimics behavior of ui.selectable, add to optionsbox
element = $("<li>")
.addClass("ui-widget-content")
.addClass("ui-selectee")
.html(name)
.attr('id', 'cp-' + name.replace(/\s/g, "-"))
.appendTo(optionsBox);
// clicked element will be highlighted
element.click(function () {
$(this).addClass("ui-selected").siblings().removeClass("ui-selected")
removeNested(domName + '_');
});
if(typeof value == 'object') { // value is object - has children categories
element.addClass('ui-selectee-haschildren');
element.click(function() {
// make new gtreeCategories of lower level (pass child branch)
$(categoryIdPicker).gtreeCategories(value, domName);
});
} else {
// save picked category ID to the input
element.click(function() {
$(categoryIdPicker).val(value);
});
}
});
};
})(jQuery);
* jQuery.gtreeCategories v0.1
*
* Copyright (c) 2010 aart3k@gmail.com
* Licensed under the New BSD license.
*
* TODO: options
*/
(function($) {
$.fn.gtreeCategories = function(tree, parentName) {
// function that removes all child optionsBoxes
var removeNested = function (name) {
$("ul[name^='"+ name + "']").remove();
};
categoryIdPicker = this;
// set unique prefix for optionboxes - will be used with deleting
if(! parentName) {
parentName = "__catselect";
$("<br>").css('clear','left').insertAfter(categoryIdPicker);
}
// number of _ determines what level of choice optionbox belongs to
var domName = parentName + "_";
// create box with selectable options
optionsBox = $("<ul>")
.addClass("ui-selectable")
.attr('name', domName);
// always insert box before category picker
optionsBox.insertBefore(categoryIdPicker);
// process every node on category tree on this level
$.each(tree, function(name, value) {
// create choice element, add classes that mimics behavior of ui.selectable, add to optionsbox
element = $("<li>")
.addClass("ui-widget-content")
.addClass("ui-selectee")
.html(name)
.attr('id', 'cp-' + name.replace(/\s/g, "-"))
.appendTo(optionsBox);
// clicked element will be highlighted
element.click(function () {
$(this).addClass("ui-selected").siblings().removeClass("ui-selected")
removeNested(domName + '_');
});
if(typeof value == 'object') { // value is object - has children categories
element.addClass('ui-selectee-haschildren');
element.click(function() {
// make new gtreeCategories of lower level (pass child branch)
$(categoryIdPicker).gtreeCategories(value, domName);
});
} else {
// save picked category ID to the input
element.click(function() {
$(categoryIdPicker).val(value);
});
}
});
};
})(jQuery);
Użycie:
Kod
$('#id_inputa_do_wpisywania_id_kategorii').gtreeCategories(drzewko);
Jak to ostylować: firebug i popatrz jakie klasy nadaje
Cytat(aart3k @ 3.12.2010, 00:38:21 ) 
będzie dobrze działać jak masz małe drzewo kategorii
Co oznacza małe ? W moim przypadku będzie raczej duże, liczę ok 50 kategorii i po drugie tyle pod i pod kategorii (max 6 podkategorii).
Prawdę mówiąc szukam czegoś banalnie prostego z jak najmniejszą ilością js czy jQuery.
Ogólne założenie przy projekcie mówiło o tym, żeby nie było wcale js bo ( i tu trochę moje zdziwienie) nie każdy ma włączone js w przeglądarce. Ale tak to jest jak takie projekty robią ludzie którzy nie mają kompletnie nic z programowaniem, dla nich zmiana np. wyświetlania obrazów w galerii to nic wielkiego, a, że człowiek czasami połowę kodu musi poprawi to już nie do nich. Bo przecież to tylko inaczej się wyświetla ... .
Wracając do tematu myślałem już nawet o zwykłej liście rozwijanej, ale pobranie wszystkich kategorii i pod kategorii nie będzie takie proste, a stworzenie struktury drzewa też nie będzie takie proste ( co i tak mnie czeka przy tworzeniu menu).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.