Как я могу создать древовидную таблицу, используя AJAX, который загружает 1 уровень за раз?

Я все еще не могу сделать treetable как мое ожидание. Мои данные взяты из базы данных MySQL с 8 уровнями иерархии и тысячами записей.

Я последовал за ответом, опубликованным bcoughlan, на вопрос: как создать таблицу сворачивающегося дерева в html/css/js? и использовать данные из моей базы данных.

Это работает очень хорошо, но:

  1. Загрузка таблицы занимает слишком много времени в начале, так как мой AJAX все еще зацикливает все данные из базы данных в начале (я не знаю об этом, только копирование и пробная версия).

  2. Я могу сделать дерево свернутым в первый раз, используя style="display: none;" но когда я щелкаю по любому узлу с этого 1-го уровня, он расширяет все уровни ниже этого узла (2-й до 8-го уровня) вместо того, чтобы расширять только 2-й уровень.

Я до сих пор не могу понять, как сделать AJAX-скрипт для вышеуказанных 2 задач, чтобы сократить время загрузки страницы в начале страницы.

ОБНОВЛЕНИЕ ПРОГРЕССА:

Теперь я могу сделать AJAX работающим для 2-го уровня.

Все еще пытаюсь, хотя не имею понятия, как добраться до 3-го уровня до 8-го уровня.:)

Мой сценарий теперь выглядит следующим образом при попытке перейти на 3-й уровень:

  1. main.php

    <html>
<head>
    <style type="text/css">
        .name               {   color: #000000;         }
        .folderclose        {   height: 16px;
                                width: 16px;
                                display: inline-block;  }
        .area .last         {   background-image: url(02_files/01_images/paper_small.png);          }
        .folderclose        {   background-image: url(02_files/01_images/folder_green.png);         }
        .expand .tog        {   background-image: url(02_files/01_images/folder_green_open.png);    }
    </style>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<body>
    <form>
    <table>
        <tr><th>No</th>
            <th>Area & Plant</th>
            <th>Location</th>
            <th>Main Group</th>
            <th>Sub Group</th>
            <th>Function Group</th>
            <th>Functional Location</th>
            <th>Equipment</th>
        </tr>
<?  mysql_connect("localhost","root","");
    mysql_select_db("sfer");
    $areaid = 1;
    $sql = mysql_query("SELECT DISTINCT(Business_Area) FROM b01_functional_location");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="area">
            <td align='center' class="id"><?=$areaid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$areaid.'. '.$data['Business_Area']?>' href="javascript:void(0)" class="name"><?=$data['Business_Area']?></a></td></tr>
        <tr id="plant<?=$areaid?>"></tr><?
        $areaid++; }

if (!empty($_POST['area'])){
    $plantid = 1;
    $sql = mysql_query("SELECT DISTINCT(Plant) FROM b01_functional_location WHERE Business_Area='$_POST[area]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="plant">
            <td align='center' class="id"><?=$plantid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td></tr>
        <tr id="location<?=$plantid?>"></tr><?
        $plantid++; }}?>

        </table>
    </form>
</body>
<script type="text/javascript">
$('document').ready(function(){
    $('#area .name').click(function() {
        var area = $(this).text();
        var areaid = $(this).parent().parent().find('.id').text();
        $('#plant'+areaid).html('<img src="02_files/01_images/loading.gif">');
        $.ajax({
            type:   'POST',
            url:    'Action.php',
            data:   'area='+area+'&areaid='+areaid,
            success: function(data){
                $('#plant'+areaid).html(data).toggle();
            }
        });
    });
    $('#plant .name').click(function() {
        var plant = $(this).text();
        var plantid = $(this).parent().parent().find('.id').text();
        $('#location'+plantid).html('<img src="02_files/01_images/loading.gif">');
        $.ajax({
            type:   'POST',
            url:    'Action.php',
            data:   'plant='+plant+'&plantid='+plantid,
            success: function(data){
                $('#location'+plantid).html(data);
            }
        });
    });
});
</script>

  2. action.php

    <?php
mysql_connect("localhost","root","");
mysql_select_db("sfer");

if (!empty($_POST['area'])){
$plantid = 1;
$sql = mysql_query("select DISTINCT(Plant), Plant_Description from b01_functional_location where Business_Area='$_POST[area]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id="plant">
            <td align='center' class="id"><?=$plantid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$plantid.'. '.$data['Plant']?>' href="javascript:void(0)" class="name"><?=$data['Plant']?></a></td>
            <td align='left'><?=$data['Plant_Description']?></td>
        </tr><? $plantid++;}    }

if (!empty($_POST['plant'])){
$locationid = 1;
$sql = mysql_query("select DISTINCT(Location), Location_Desc from b01_functional_location where Plant='$_POST[plant]'");
    while($data=mysql_fetch_array($sql)){?>
        <tr id='location'>
            <td align='center' class="id"><?=$locationid?></td>
            <td align='left' width='400'>   <a class="folderclose"></a>
                                            <a title='<?=$locationid.'. '.$data['Location']?>' href="javascript:void(0)" class="name"><?=$data['Location']?></td>
            <td align='left'><?=$data['Location_Desc']?></td>
        </tr><? $locationid++;} }

Нужна ваша помощь.

Источник

0 ответов

Другие вопросы по тегам