Tabellenzellen ein/ausblenden (rekursiv)

_frank · 17. Februar 2011 um 14:41

hallo,

ich möchte Tabellenzeilen ein und ausblenden…funktioniert mit Tbody und einem Javascript.
das Problem, was ich habe ist, dass sich TBody nicht schachteln lässt.

Beispiel:
[HTML]

</table>

[/HTML]ein Klick auf 1-4-1 oder 1-4-2 muss auch die einträge 1-4-3-1 und 1-4-3-2 ausblenden, tut es aber nicht :( wie kann ich es anders lösen?

Gruß Frank

1-1
1-2
1-3-1
1-3-2
1-4-1
1-4-2
1-4-3-1
1-4-3-2

teeny · 17. Februar 2011 um 16:05

Du kannst [FONT=Courier New]tbody[/FONT] Elemente nicht schachteln! Sie muessen alle direkt unter dem [FONT=Courier New]table[/FONT] Element sein.

Du koenntest aber zum Beispiel mit Klassen arbeiten, und nach einem Klick auf ein Element, alle Elemente mit entsprechender Klasse verstecken.

Aber was fuer Daten willst Du denn darstellen? Dein Code Beispiel legt eher eine verschachtelte Liste nahe.

_frank · 18. Februar 2011 um 08:54

Hallo,
das ganze soll eine einfache Linkliste mit kategorien (und unterkategorien werden)

möchte also alles (links und unterkategorien) ein und ausblenden können.mit klassen habe ich halt das Problem, dass die Links der unterkategorien (mindesten) 2 klassen haben müssten (haupt-kategorie und unterkategorie)

[-] Kategorie1 1. Link von Kat1 2. Link von Kat1 [-] Unterkategorie 1-1 Link von Kat1-1 [-] Unterkategorie 1-2 Link von Kat1-2 [-] Kategorie2 Link von Kat2Gruß Frank

mermshaus · 18. Februar 2011 um 10:26

Ich habe neulich mal dieses Beispiel erstellt, vielleicht hilft dir das weiter?

Algorithmic Advent: 16 ? Expandable tree menu with PHP and jQuery

Falls nicht, habe ich es falsch verstanden.

_frank · 18. Februar 2011 um 11:19

ich möchte die liste schon gerne als tabelle haben (schon wegen der ausrichtung), da den einträgen zusätzliche Infos folgen (u.a. links zum löschen/bearbeiten)

mermshaus · 18. Februar 2011 um 11:41

Das ist theoretisch nur eine Frage der Formatierung.

(Am Rande: Du jetzt speziell kannst den Code auch gerne ohne GPL-Lizenz verwenden. Ich hab’s nur gern ordentlich, was sowas angeht. ;))

[php]<?php
/**

This is an example on how to create an expandable tree menu structure with
PHP, CSS and jQuery.
@version 2011-Feb-18
@author Marc Ermshaus http://www.ermshaus.org/
@license GNU General Public License http://www.gnu.org/licenses/gpl.html
*/

define(‚X_BASEURL‘, ‚/nb/menutest‘);
define(‚X_CHARSET‘, ‚UTF-8‘);

/**

Assembles an internal URL
@param string $path
@param array $queryPart
@return string The assembled URL
*/
function url($path, $queryPart = array())
{
$baseUrl = X_BASEURL;

$url = $baseUrl . $path;

if (count($queryPart) > 0) {
$url .= ‚?‘ . http_build_query($queryPart);
}

return $url;
}

/**

Escapes a string for HTML display
@param strng $s
@param int $quoteStyle
@param string $charset
@return string
*/
function escape($s, $quoteStyle = ENT_QUOTES, $charset = X_CHARSET)
{
return htmlspecialchars($s, $quoteStyle, $charset);
}

/**

Arranges the input data into a tree structure
@param array $data
@param int|null $parentId

@return array
*/
function toTree(array $data, $parentId = null)
{
$rec = function (array $data, array &$root, $parent_id = null) use (&$rec)
{
$root[‚children‘] = array();

 foreach ($data as $item) {
     if ($item['parent_id'] === $parent_id) {

         $newChild = array('data' => $item['data']);

         $root['children'][] = &$newChild;

         $rec($data, $newChild, $item['id']);
         unset($newChild);
     }
 }

};

$root = array(‚title‘ => ‚root‘);

$rec($data, $root, $parentId);

return $root;
}

/**

Creates the HTML output for a navigation tree
@param array $root Tree root (see toTree function)

@return string HTML code of navigation
*/
function menuHelper($root)
{
$s = ‚‘;

$s .= ‚

$recm = function (array $node, $depth = 0) use (&$recm)
{
$pad = ’ ';

 foreach ($node['children'] as $child) {
     $spanClasses = 'title ';

     if (count($child['children']) > 0) {
         $spanClasses .= 'hasChildren ';
     }

     $spanClasses = trim($spanClasses);

     $s .= str_repeat($pad, $depth) . '<li>';

     $s .= '<span class="'.$spanClasses.'">';

     if ($child['data']['path'] !== null) {
         $s .= '<a href="'.url($child['data']['path']).'">'
             . escape($child['data']['title']) . '</a>';
     } else {
         $s .= escape($child['data']['title']);
     }

     $s .= '</span>';

     if (count($child['children']) === 0) {
         $s .= '<div style="float: right;"><span>edit</span> <span>delete</span></div>';
         $s .= '<p>Additional info.</p>';
     }

     if (count($child['children']) > 0) {
         $s .= "\n";

         $depth++;

         $s .= str_repeat($pad, $depth) . '<ul>' . "\n";
         $s .= $recm($child, $depth + 1);
         $s .= str_repeat($pad, $depth) . '</ul>' . "\n";

         $depth--;

         $s .= str_repeat($pad, $depth);
     }

     $s .= '</li>' . "\n";
 }

 return $s;

};

$s .= $recm($root, 1);

$s .= ‚

‘ . „\n“;

return $s;
}

$menuData = array(
array(‚id‘ => 1,
‚parent_id‘ => null,
‚data‘ => array(‚title‘ => ‚Item 1‘,
‚path‘ => ‚/item1‘)),
array(‚id‘ => 2,
‚parent_id‘ => null,
‚data‘ => array(‚title‘ => ‚Item 2‘,
‚path‘ => ‚/item2‘)),
array(‚id‘ => 3,
‚parent_id‘ => 1,
‚data‘ => array(‚title‘ => ‚Item 1.1‘,
‚path‘ => ‚/item1/item1‘)),
array(‚id‘ => 4,
‚parent_id‘ => 2,
‚data‘ => array(‚title‘ => ‚Item 2.1‘,
‚path‘ => ‚/item2/item1‘)),
array(‚id‘ => 5,
‚parent_id‘ => 2,
‚data‘ => array(‚title‘ => ‚Item 2.2‘,
‚path‘ => ‚/item2/item2‘)),
array(‚id‘ => 6,
‚parent_id‘ => 1,
‚data‘ => array(‚title‘ => ‚Item 1.2‘,
‚path‘ => ‚/item1/item2‘)),
array(‚id‘ => 7,
‚parent_id‘ => 4,
‚data‘ => array(‚title‘ => ‚Item 2.1.1‘,
‚path‘ => ‚/item2/item1/item1‘)),
array(‚id‘ => 8,
‚parent_id‘ => null,
‚data‘ => array(‚title‘ => ‚Item 3‘,
‚path‘ => ‚/item3‘))
);

?>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Expandable tree menu</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <style type="text/css">

    ul, li {
        margin: 0; padding: 0;
    }

    ul ul {
        padding-left: 2em;
    }

    li p {
        padding: 0.5em 1em;
        margin: 0;
    }

    #navigation li {
        display: block;
        background: #eee;
        border-top: 1px solid #ccc;
    }

    #navigation .title {
        cursor: pointer;
    }

    #navigation .hasChildren {
        /*background: #9ff;*/
    }

    #navigation .hasChildren:after {
        content: " (expand)";
    }

    #navigation .hidden {
        display: none;
    }

    #navigation .open-category {

    }

    /* "#navigation .open-category > .title" or
       "#navigation .title.open" won't work in IE6 */
    #navigation .open-title {
        color: #f00;
    }
    </style>

    <script type="text/javascript">
    $(document).ready(function () {
        $('#navigation ul').addClass('hidden');
        $('#navigation li').click(function (event) {
            // Entry has children?
            if ($(this).children('ul').length > 0) {
                $(this).toggleClass('open-category');
                $(this).children('.title').toggleClass('open-title');
                $(this).children('ul').toggleClass('hidden');
            }
            event.stopPropagation();
        });
    });
    </script>
</head>

<body>

    <?php echo menuHelper(toTree($menuData)); ?>

</body>

[/php]

_frank · 18. Februar 2011 um 12:01

vielleicht mal meine bisherige Arbeit:
http://dl.dropbox.com/u/3228629/links.zip

möchte das gerne verwenden und nich auf etwas komplett neues umsteigen

wenn ich in die obere Kategorie eine weitere Tabelle einbaue, sollte das doch funktionieren, oder?
also so etwa:
[HTML]

[-]

kategorie 1

link 1

[X]

link 2

[X]

[-]	kategorie 2
	link 1	[X]
	link 2	[X]

[/HTML]

Gruß Frank

mermshaus · 18. Februar 2011 um 14:28

Ja, verstehe.

Mir stellt sich die Frage, wie du Unterkategorien grafisch darstellen möchtest. Du könntest beispielsweise in die entsprechenden td-Elemente weitere Tabellen setzen, die du automatisch durch das Ausblenden des td-Elements ebenfalls ausblenden würdest. Wenn du Unterkategorien nicht weiter nach rechts verschieben möchtest, müsste man wohl wirklich anfangen zu tricksen. Ich bin mir relativ sicher, dass das mit Listen einfacher wäre.

Edit: Hatte vor meiner Antwort die Seite nicht mehr aktualisiert und dein Edit nicht gesehen. Müsste funktionieren, ja.

_frank · 23. Februar 2011 um 09:10

ich habe es jetzt mit verschachtelten Tabellen realisiert, hab zwar noch Darstellungsprobleme (Rahmen), aber damit muss ich wohl leben…

es sieht jetzt so aus: Linkliste

danke