Динамически разверните и сверните строку таблицы - PullRequest
Новая
       2

Динамически разверните и сверните строку таблицы

0 голосов
/ 26 октября 2019

Я пытаюсь реализовать таблицу начальной загрузки, для которой, когда пользователь нажимает кнопку, расположенную в первом столбце, конкретная строка раскрывается и отображается дополнительная информация.

В качестве ссылки я пытаюсьдобиться чего-то похожего на:

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

Но я не планирую использовать платформу DataTables.

Таблица не должна содержать детали всех строк на страниценагрузить. В основном, когда нажимают кнопку, я хочу, чтобы ajax-запрос отправлялся (экран загрузки ajax появится с использованием функции beforeSend), и когда ajax-функция успеха будет выполнена, то конкретная строка должна быть расширена с подробностями, извлекаемыми через ajax и, конечно,оверлей экрана загрузки будет скрыт). Затем, когда нажимается кнопка, относящаяся к расширенной строке, строка должна свернуться.

Я просто ищу руководство по началу работы для этой реализации.

Не могли бы вы, ребята, помогите мне

1 Ответ

0 голосов
/ 26 октября 2019

Это отличный вопрос! Я был бы рад помочь вам.

Первый - 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>

Второй - Файл php с таблицей (index.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>

Третий - Файл JavaScript с XMLHTTPRequest для вызова файла 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>';
   }
}
?>

Скажите, работает ли это

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...