activex.net.ru

ActiveX .NET SharePoint Утилиты Скрипты Статьи ... Форум

Статьи

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

Напишем скрипт, который формировал бы DHTML-дерево на стороне клиента на основе информации из таблицы БД. Основным преимуществом построения дерева на клиенте является то, что мы один раз отдаем сформированный код, а затем без обращений к серверу работаем с построенным деревом.
За основу для построения DHTML-дерева возьмем отличный скрипт dtree с сайта http://www.destroydrop.com/.
Иерархию разделов будем хранить в таблице базы данных 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:

    Пример index.php

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



    Copyright © 2000-2017 Христофоров Юрий Rambler's Top100

       Rambler's Top100