javascript — раскрыть всю структуру дерева

Question

javascript — раскрыть всю структуру дерева

Здравствуйте, у меня есть код, который смешивает php и javascript для отображения моего поиска в виде древовидной структуры

php

<?php
class treeview {
private $fs;
private $d;
function __construct( $c ) {
$fs = array();
if( file_exists( $c)) {
if( $c[ strlen( $c ) - 1 ] ==  '/' )
$this->d = $c;
else
$this->d = $c . '/';
$this->dir = opendir( $c );
while(( $f = readdir( $this->dir ) ) != false )
$this->files[] = $f;
closedir( $this->dir );
}
}

function create_tree( ) {
if( count( $this->files ) > 2 ) { /* First 2 entries are . and ..  -skip them */
natcasesort( $this->files );
$list = '<ul class="filetree" style="display: none;">';
// Group ds first
foreach( $this->files as $f ) {
if( file_exists( $this->d . $f ) && $f != '.' && $f != '..' && $f != 'models' && $f != '.DS_Store' && is_dir( $this->d . $f )) {
$list .= '<li class="folder collapsed"><a href="#" rel="' . htmlentities( $this->d . $f ) . '/">' . htmlentities( $f ) . '</a></li>';
}
}
// Group all files
foreach( $this->files as $f ) {
if( file_exists( $this->d . $f ) && $f != '.' && $f != '..' && $f != '.DS_Store'  && !is_dir( $this->d . $f )) {
$ext = preg_replace('/^.*\./', '', $f);
$list .= '<li class="file ext_' . $ext . '"><a href="#" rel="' . htmlentities( $this->d . $f ) . '">' . htmlentities( $f ) . '</a></li>';
}
}
$list .= '</ul>';
return $list;
}
}
}
$c = urldecode( $_REQUEST['dir'] );
$tree = new treeview( $c );
echo $tree->create_tree();
?>

JavaScript

<script type="text/javascript" >
$(document).ready( function() {
$( '#container' ).html( '<ul class="filetree start"><li class="wait">' + 'Generating Tree...' + '<li></ul>' );
getfilelist( $('#container') , '<?php echo $_SERVER["DOCUMENT_ROOT"]."/pages" ;?>' );
function getfilelist( cont, root ) {
$( cont ).addClass( 'wait' );
$.post( 'Foldertree.php', { dir: root }, function( data ) {
$( cont ).find( '.start' ).html( '' );
$( cont ).removeClass( 'wait' ).append( data );
if( 'pages' == root )
$( cont ).find('UL:hidden').show();
else
$( cont ).find('UL:hidden').slideDown({ duration: 500, easing: null });
});
}

$( '#container' ).on('click', 'LI A', function() {
var entry = $(this).parent();
if( entry.hasClass('folder') ) {
if( entry.hasClass('collapsed') ) {
entry.find('UL').remove();
getfilelist( entry, escape( $(this).attr('rel') ));
entry.removeClass('collapsed').addClass('expanded');
}
else {
entry.find('UL').slideUp({ duration: 500, easing: null });
entry.removeClass('expanded').addClass('collapsed');
}
} else {
$( '#selected_file' ).text( "File:  " + $(this).attr( 'rel' ));
}
return false;
});
});
</script>

И HTML

<body>
<div id="container"> </div>
<div id="selected_file"></div>
</body>

Я пытался открыть папки, изменив класс, но безуспешно

$('#container ul li').removeClass('collapsed');
$('#container ul li').addClass('active expanded');
$('#container ul li ul:hidden').show;

Ul после li кажется полностью скрытым и не отображается на DOM, пока не нажата папка

Поэтому я ищу небольшую функцию onclick, которая расширяет все дерево. Я изучаю javascript, но этот механизм, в частности, слишком сложен для меня … нужна помощь …

0

expand javascript onclick php tree

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

Источник