时间戳

首页 > 解决方案 > 动态展开和折叠表格行

javascript - 动态展开和折叠表格行

问题描述

我正在尝试实现一个引导表，当用户单击放置在第一列上的按钮时，特定行会展开并显示更多详细信息。

作为参考，我正在尝试实现类似于：

https://datatables.net/examples/server_side/row_details.html

但是，我不打算使用 DataTables 框架。

该表不应包含页面加载时所有行的详细信息。基本上，当单击按钮时，我希望发送一个 ajax 请求（使用 beforeSend 函数将出现一个 ajax 加载屏幕），当成功执行 ajax 函数时，应该使用通过 ajax 获取的详细信息来扩展特定行，当然加载屏幕覆盖将被隐藏）。然后，当单击与展开的行相关的按钮时，该行应该被折叠。

我只是在寻找此实施的入门指南。

你们能帮帮我吗？

标签： javascriptjqueryajaxbootstrap-4

解决方案

这是一个很好的问题！我很乐意帮助你。

首先- 一个 XML 文件 ( database.xml) 来调用您的信息（根据需要扩展）：

<?xml version = '1.0' encoding='utf-8' ?>
<database>
   <row id = '1'>
      <user>
          <name>Bob</name>
          <joined>10-10-2019</joined>
      </user>
   </row>
   <row id = '2'>
      <user>
          <name>Fred</name>
          <joined>10-11-2019</joined>
      </user>
   </row>
</database>

第二- 带有表格 ( index.php) 的 php 文件：

<html>
   <head>
   </head>
   <body>
      <table>
          <?
          $users = simplexml_load_file('database.xml');
          foreach ($users-row) as $row {
             echo '<tr class = "row '.$row['id'].'">'
             echo '<td class = "expand"><div role = "button" class = "expand-button '.$row['id'].'">Expand</div></td>'
             echo '<td class = "username">'.$row->name.'</td>';
             echo '</tr>';
          }
          ?>
      </table>
   </body>
</html>

第三- 一个带有 XMLHTTPRequest 的 JavaScript 文件来调用一个 php 文件（app.js）：

const getClass = (c) => document.getElementsByClassName(c);
for (let i = 0; i < getClass('expand-button').length; i++) {
   getClass('expand-button')[i].addEventListener('click', expand, false);
}
function expand(e) {
   let xhr = new XMLHTTPRequest();
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         getClass('row '+e.target.className.split(' ')[1]).innerHTML += xhr.responseText;
      }
   };
   xhr.open('GET', 'retrieveUsers.php?rowId='+e.target.parentElement.className.split(' ')[1], true);
   xhr.send();
}

第四- （最后！）处理请求的 php 文件：

<?
$rowId = $_GET['rowId'];
$users = simplexml_load_file('database.xml');
foreach ($users-row) as $row {
   if ($row['id'] === $rowId) {
      echo '<tr class = "expanded">';
      echo 'Username: '.$row->name;
      echo '<br />Joined: '.$row->joined;
      echo '</tr>';
   }
}
?>

告诉我这是否有效

推荐阅读