Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > создание дерева (tree)

Автор: Edd 14.11.2007, 16:52

Нужно создать дерево:

+тема1
+тема2
-тема3
checkbox1
checkbox2
+тема4
...
Пример (В цикле):

Код


$strDivCat .= "<div valign=\"right\" style=\"padding-left: {$left_padding}px\">";
$strDivCat .= "<img src=\"gfx/xtree/Lplus.png\" id=\"icon_{$item["id"]}\" width=\"19\" height=\"16\" border=\"0\" onclick=\"toggle_visible({$item["id"]})\" />";
$strDivCat .= "{$item["name"]}<div id=\"children_{$item["id"]}\" style=\"display:none\"></div>";
   for ($i;$i<count($template_c);$i++)
    {
                 $strDivCat .= "<div valign=\"right\" style=\"padding-left: {$left_padding}px\">";
    if ($template_c[$i]["category_id"]==$item["id"] && $template_d[$i]["name"]!="")
    {   
    $strDivCat .= "<input type=\"checkbox\" name=\"cat_id\" value=\"{$template_d[$template_c[$i]["device_id"]]["id"]}\" />";
    $strDivCat .="{$template_d[$template_c[$i]["device_id"]]["name"]}";//."{$template_d[$template_c[$i]["device_id"]]["id"]}";
    }
    $strDivCat .= "</div>";
    }
$strDivCat .= "</div>";
echo $strDivCat;

Дерево отображается как надо, нужно только чтоб оно открывалось и закрывалось по "+" и "-".
Тоесть нужно, чтоби checkbox либо показывались, либо не показывались.
Может использовать для этого "visible"? Как это реализовать?

Автор: solenko 14.11.2007, 19:33

использовать element.style.display: none; и element.style.display: block;

Автор: Castro 15.11.2007, 00:02

visible нельзя использовать, потому что он делает лишь невидимым елемент, но он по прежнему занимает место на странице.
Используйте как писал solenko, element.style.display: none; и element.style.display: block;
Что-то типа

Код


var el=getElementByID("elemID");
(el.style.display: none)?(el.style.display: block):(el.style.display: none);

Автор: Castro 15.11.2007, 02:29

6) toggle()

Если быть полностью честным, вариантов этой функции существует более чем достаточно. По сути, история ‘переключалки’ происходит от скрытия\показа элемента как реакции на событие. Чтобы упростить дело, я тоже написал одну такую функцию. Я не имею в виду, что эта функция считается наилучшей функцией-’переключалкой’, но в ней заложены основы показа и скрытия элемента.
toggle() слова народные

Код


function toggle(obj) {
    
        var el = document.getElementById(obj);
        if ( el.style.display != 'none' ) {
                el.style.display = 'none';
        }
        else {
                el.style.display = '';
        }
}

Автор: Edd 15.11.2007, 16:41

Uraaa!

Большое спасибо, дерево работает.
Сделал так:

Код


....
$strDivCat .= "<div valign=\"right\"  style=\"display:none\" id=\"{$item["id"]}\">";
.....

И id посылал в функцию.

Автор: Castro 15.11.2007, 20:55

Edd, я и так посмотрю, на нескольких формах паралельно атакуете smile

))