Построение DHTML-дерева с информацией из БД (PHP/MySQL)

Построение DHTML-дерева с информацией из БД (PHP/MySQL)

Напишем скрипт, который формировал бы DHTML-дерево на стороне клиента на основе информации из таблицы БД.

Основным преимуществом построения дерева на клиенте является то, что мы один раз отдаем сформированный код, а затем без обращений к серверу работаем с построенным деревом.

За основу для построения DHTML-дерева возьмем отличный скрипт dtree с сайта www.destroydrop.com/.

Пример работы кода на java script www.destroydrop.com/javascripts/tree/example/

Иерархию разделов будем хранить в таблице базы данных MySQL.

Ниже на скриншоте показана данная таблица (catalogue):

  • id — первичный ключ таблицы
  • pid — id родительского раздела
  • Далее напишем следующий PHP-скрипт:
    1. Файл dbopen.php (открывает соединение с MySQL)


    <?php
    $hostName = «localhost»;
    $userName = «user»;
    $password = «password»;
    $databaseName = «tree»;
    if (!($link=mysql_connect($hostName,$userName,$password))) {
    printf(«Ошибка при соединении с MySQL !\n»);
    exit();
    }
    if (!mysql_select_db($databaseName, $link)) {
    printf(«Ошибка базы данных !»);
    exit();
    }
    ?>

    2. Файл index.php (основной скрипт)

    
    <?php
    
    include( "dbopen.php" );
    
    $sSQL = "SELECT id, title, pid FROM catalogue ORDER BY title";
    
    $result = mysql_query($sSQL, $link);
    
    ?>
    
    <html>
    
    <head>
    
    <link rel="stylesheet" href="css/dtree.css" type="text/css" />
    
    <script type="text/javascript" src="js/dtree.js"></script>
    
    </head>
    
    <body>
    
    <div class="dtree">
    
    <p><a href="javascript: d.openAll();">раскрыть дерево</a> | 
    
    <a href="javascript: d.closeAll();">свернуть дерево</a></p>
    
    <script language="javascript" type="text/javascript">
    
    <!--
    
    var d = new dTree('d');
    
    d.add(0, -1 , 'Корневой раздел');
    
    <?php
    
    while ( $row = mysql_fetch_array($result) ) {
    
    ?>
    
    d.add(<?php echo($row["id"]);?>, <?php echo($row["pid"]);?>, '<?php echo($row["title"]);?>','#');
    
    <?php
    
    }
    
    ?>
    
    document.write(d);
    
    //-->
    
    </script>
    
    </div>
    
    </body>
    
    </html>
    
    <?php
    
    mysql_close($link);
    
    ?>
    

    Ниже на скриншоте показан пример работы index.php:

    Пример проекта прилагается: phpdtree.zip

    Автор скрипта Христофоров Юрий

    Понравилась статья? Поделиться с друзьями:
    Комментариев: 5
    1. Сергей

      Спасибо! за подробное объяснение! А то выводил дерево на стороне сервера, через рекурсию, 3500 строк, сервер отказывается!

    2. Вадим

      если выводить по 500 строк на страницу, то всё работает как надо :-)

    3. Иван

      А реализация на JQuery есть?

      1. FORTRESS-DESIGN (автор)

        На jQuery не встречал.

    4. Роман

      Спасибо, очень полезный скрипт.

    Добавить комментарий

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

    Перейти к верхней панели