Question

我正在尝试创建一个具有如下结构的表：

Project
--Category
----File
----File
----File
--Category
----File
Project
--Category
----File
----File

创建表的代码使用PHP从数据库中获取数据，如下所示：

<table>
        <thead>
          <tr class="table-row" tabindex="1">
            <th class="fixed-header"></th>
            <th>Dateiname</th>
            <th>Benutzer</th>
            <th>Erstelldatum</th>
            <th>Änderungsdatum</th>
            <th>Erste Zeile</th>
          </tr>
        </thead>
        <?php
        include_once('connect.php');

        //loop projects
        $resultProjects = $connect->query("SELECT project.name, project.idProject FROM project,user,user_has_project WHERE user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = '".$_SESSION['userid']."'");
        if($resultProjects->num_rows > 0) {
          echo "<tbody>";
          while($row = $resultProjects->fetch_assoc()) {
            $resultProjectID = $row['idProject'];
            echo "<tr class='".$row['idProject']." table-row project-marker' tabindex='1'>";
            echo "<th><img src='images/arrow_right.gif' class='expand expandProjectBtn'><img src='images/arrow_down.gif' class='collapse collapseProjectBtn'></th>";
            echo "<td class='table-project'>".$row['name']."</td>";
            echo "<td></td>";
            echo "<td></td>";
            echo "<td></td>";
            echo "<td></td>";
            echo "</tr>";

            //loop categories
            $resultCategories = $connect->query("SELECT category.name, category.idCategory FROM category,user,user_has_category WHERE user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'");
            if($resultCategories->num_rows > 0) {
              while($row = $resultCategories->fetch_assoc()) {
                $resultCategoryID = $row['idCategory'];
                echo "<tr class='".$row['idCategory']." table-row category-marker' tabindex='1'>";
                echo "<th><img src='images/arrow_right.gif' class='expand toggleCategoryBtn'><img src='images/arrow_down.gif' class='collapse toggleCategoryBtn'></th>";
                echo "<td class='table-category'>".$row['name']."</td>";
                echo "<td></td>";
                echo "<td></td>";
                echo "<td></td>";
                echo "<td></td>";
                echo "</tr>";

                //loop files
                $resultFiles = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile, createDate, editDate
                  FROM file JOIN file_has_project ON idFile = file_has_project.file_idFile
                            JOIN file_has_category ON idFile = file_has_category.file_idFile
                            JOIN project ON idProject = file_has_project.project_idProject
                            JOIN category ON idCategory = file_has_category.category_idCategory
                            JOIN user_has_project ON idProject = user_has_project.project_idProject
                            JOIN user_has_category ON idCategory = user_has_category.category_idCategory
                            JOIN user ON idUser = user_has_category.user_idUser
                            WHERE user.idUser = '".$_SESSION['userid']."' AND idCategory = '".$resultCategoryID."' AND idProject = '".$resultProjectID."'
                            ORDER BY file.name ASC");
                if ($resultFiles->num_rows > 0) {
                  while($row = $resultFiles->fetch_assoc()) {
                    echo "<tr class='".$row['idFile']." table-row file-marker' tabindex='1' draggable=true>";
                    echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
                    echo "<td class='table-file'>".$row['filename']."</td>";
                    echo "<td>".$row['username']."</td>";
                    echo "<td>".$row['createDate']."</td>";
                    echo "<td>".$row['editDate']."</td>";
                    echo "<td>".$row['filedescription']."</td>";
                    echo "</tr>";
                  }
                }
              }
            }
          }
          echo "</tbody>";
        }
        ?>
      </table>

使用作为第一个类写入行的数据库ID，以便我可以确定单击了哪一行。但这对我遇到的问题并不重要。

问题如下：我可以折叠类别，以便隐藏文件。我可以折叠项目，以便隐藏类别和文件。但是当我首先折叠一个类别然后折叠该类别所属的项目并在之后展开文件后再次切换。但是当我展开一个包含折叠类别的项目时，我希望文件保持隐藏状态。

这是我用来折叠和扩展类别和项目的代码（它由$(document).ready(function() {});包裹着：

function toggleTableCategory() {
    var className = $(this).closest('tr').next().attr('class').split(' ')[2];
    var element = $(this).closest('tr').next();

    while(className == 'file-marker') {
      element.toggle();
      element = element.next();
      className = element.attr('class').split(' ')[2];
    }

    $(this).closest('tr').find('img').toggle();
  }

  function collapseTableProject() {
    $(this).closest('tr').nextUntil('.project-marker', ':visible').toggle();
    $(this).closest('tr').find('img').toggle();
  }

  function expandTableProject() {
    $(this).closest('tr').nextUntil('.project-marker').toggle();
    $(this).closest('tr').find('img').toggle();
  }

  $(document).on("click", ".toggleCategoryBtn", toggleTableCategory);
  $(document).on("click", ".expandProjectBtn", expandTableProject);
  $(document).on("click", ".collapseProjectBtn", collapseTableProject);

崩溃类别的代码似乎过于复杂。我尝试使用.nextUntil('.category-marker')但是我遇到了一个问题，当我切换项目的最后一个类别时它也切换了下一个项目行，所以我必须这样做。

我现在的最后一个问题是：如何保存折叠类别的状态，以便在展开项目时折叠它们。

附加问题：可以通过拖放操作将文件从类别移动到类别，从项目移动到项目。为了给用户提供即时反馈，我会在发生这种情况时进行AJAX调用并将表格绘制成新的。保存切换类别和项目的状态也很棒。但是我不知道如何处理这个问题，因为表总是用PHP创建的，并提供来自MySQL数据库的数据。

如果您需要更多信息来帮助我告诉我，我会在其中进行编辑。

可折叠/可扩展嵌套表行的问题

0 个答案: