Как сделать эту таблицу с расширяемыми строками для отображения других строк при развертывании? - PullRequest
Новая
       11

Как сделать эту таблицу с расширяемыми строками для отображения других строк при развертывании?

0 голосов
/ 29 апреля 2020

У меня есть дата в HTML, которую я заполняю динамическими c данными из PHP. каждая строка расширяема, но я хочу иметь дочерние строки для каждой родительской строки. Так, например, существует тип устройства с номером 4, который содержит 20 различных устройств, поэтому я хочу отобразить в родительской строке Номер устройства 4, а при расширении этой строки отобразить 20 устройств (с заголовками, такими как IMEI, Serial no. ., et c.)

Вот таблица, которая у меня сейчас есть:

Смотрите скриншот моей таблицы

РЕДАКТИРОВАТЬ: Добавлен текущий таблица (без дочерних строк) 

 <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
            <thead>
                <th>Device</th>
                <th>Dev.no</th>
                <th>Barcode</th>
                <th>IMEI</th>                    
                <th>Serial no.</th>
                <th>Date added on stock</th>
            </thead>

            <tbody>

                <?php if (!empty($devices)) { ?>
                    <?php foreach ($devices as $device) : ?>
                        <tr>
                            <td>
                                <?php echo $device["name"] ?>
                            </td>

                            <td>
                                <?php echo $device["device_no"] ?>
                            </td>

                            <td>
                                <?php echo $device["barcode"] ?>
                            </td>

                            <td>
                                <?php echo $device["serial_imei"] ?>
                            </td>

                            <td>
                                <?php echo $device["serial_no"] ?>
                            </td>

                            <td>
                                <?php echo $device["created_date"] ?>
                            </td>

                        </tr>
                    <?php endforeach; ?>
                <?php } ?>
                </br>
            </tbody>
        </table>

1 Ответ

0 голосов
/ 29 апреля 2020

Я думаю, вы ищете что-то вроде этого https://datatables.net/reference/api/row (). Child () . Затем вы можете добавить таблицу в дочернюю строку с дополнительной информацией.

Примечание. Похоже, у вас включена опция реагирования (зеленая кнопка плюс, которая скрывает / показывает скрытые столбцы). Если у вас открыт дочерний ряд и вы пытаетесь показать скрытые столбцы, он может перезаписать ваш дочерний ряд.

Редактировать: вам нужно указать HTML, который вы хотите добавить в дочерний. Я бы лично использовал ajax, чтобы получить детей, когда я хотел показать их. В противном случае данные должны быть скрыты где-то на странице.

Я создал codepen , который помещает HTML в атрибут данных в строке. Затем вы можете нажать кнопку, чтобы просмотреть дочерние строки (устройства). Очевидно, есть много других способов хранения данных на странице. 

$(document).on("click", ".viewChildren", rowClickHandler);

$("#example").DataTable();

function rowClickHandler() {
  var btn = $(this);
  var tr = btn.closest('tr');
  var dtRow = $("#example").DataTable().row(tr);
  if (dtRow.child.isShown()) {
    dtRow.child.hide();
    btn.text('Show Children');
  } else {
    var children = tr.data("children");
    dtRow.child(children).show();
    btn.text('Hide Children');
  }
}
th{
  text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
 <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
   <thead>
     <tr>
       <th>Device</th>
       <th>Dev.no</th>
       <th>Action</th>
     </tr>
   </thead>
   <tbody>
     <tr data-children='<table>
  <thead>
    <tr>
      <th>barcode</th>
      <th>imei</th>
      <th>serial_no</th>
      <th>created_date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123456</td>
      <td>11324</td>
      <td>654654</td>
      <td>2020-01-17</td>
    </tr>
    <tr>
      <td>1234987</td>
      <td>1654</td>
      <td>654687</td>
      <td>2020-04-30</td>
    </tr>
  </tbody>
</table>'>
       <td>Laptop</td>
       <td>2</td>
       <td><button class = 'viewChildren'>See Children</button></td>
     </tr>
   </tbody>
 </table>
...