Bootstrap Modal-如何從php提供數據（數據庫）

Question

這可能很簡單，但是我正在學習PHP和Javascript。 我發現使用實際示例比在線給出的人工示例更容易學習。

我將根據選擇一個班級，然后按姓和名對該班級的所有成員進行創建，從而創建一個出勤登記頁面。

表格行已將其ID由PHP設置為記錄的mem_id，並且只包含前名+“” +姓氏和一些復選框。

所有這些都工作正常，但是現在我被要求添加一個鏈接，以便單擊它會彈出一個模態，其中包含所選人的相關數據。 多余的數據已經在$ a_fetch數組中。

已經為每行添加了一個glyphicon鏈接，單擊它會顯示模式好，通過使用javascript函數，我知道我可以獲取行索引和行ID

<tbody>
  <?php 
  while($g_fetch = $a_query->fetch_array()) {
    $checked = array();
    $memid = $g_fetch['mem_id'];
    $name = $g_fetch['firstname'].' '.$g_fetch['lastname'];
    $attendences = explode(",",$g_fetch['attend']);
    for ($x = 0; $x <= 12; $x++) {
      if ($attendences[$x]!="0") {
        $checked[$x] = 'checked = "checked"';
       }
      else $checked[$x] = '';
      } 
    echo "<tr id='".$memid."'>"; 
    echo "<td>".$name."</td>";
    echo "<td align='center'><div id='".$memid."' class='glyphicon glyphicon-info-sign' onclick='getId(this.id)' style='cursor:pointer' data-toggle='modal' data-target='#ModalCentre'></div>";
    for ($y = 0; $y <= 12; $y++) {
      echo '<td align="center"><input type="checkbox"  value = "" '.$checked[$y].'></td>';
    } 
   }     
  unset($checked);
  unset($attendences);
  ?>
  </tbody>
</table>

我不知該如何進行-甚至有可能將數據傳遞給模式以顯示相關數據嗎？

如果是這樣，我需要運行一個新查詢（SELECT），或者該行與$ A_fetch中的數據索引相同，並且該行ID具有正確的mem_id，是否有可能從現有$中獲取數據使用其中一個的a_fetch數組，還是我需要運行一個新的SELECT？

非常感謝

Answer 1

有多種向模式提供數據的方法-（在我看來）這取決於您需要將多少數據傳遞給模式以及有多少行。

我想用兩種方式描述您：

輕便易用的解決方案

如果您不想顯示大量數據，而只有幾行。 想法是將數據直接添加到每個div.glyphicon（作為data屬性），然后在模式中使用它

在您的foreach中，將其添加到模型中，如下所示：

<div id='".$memid."' class='glyphicon glyphicon-info-sign' onclick='getId(this.id)' style='cursor:pointer' data-toggle='modal' data-target='#ModalCentre' data-link='".$g_fetch['additional_link'] ."' data-moreInfo='".$g_fetch['moreInfo']."'></div>

您尚未發布模式的HTML或JS代碼，但是您編寫的代碼是使用引導程序，因此請堅持使用https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content和fetch / set所描述的相關數據（相關的點擊glyphicon）。

更復雜的解決方案

有關更多數據/更多行。 初始加載的HTML頁面中未提供其他數據-因此，並非一開始就需要加載所有數據。 而是在單擊一行時通過ajax加載其他數據。

為此，您需要提供一個附加端點（php），該端點為一行提供模態內容。

在Bootstrap 3中查看第二個答案-如何通過AJAX加載模態主體中的內容？

基本上，您有一個php文件（例如getAdditionalData.php），在此文件中，您可以通過GET訪問mem_id

$mem_id = $_GET['mem_id'];

從數據庫中獲取其他數據並打印/呈現模式內容（類似於第二個答案的完整html ）

然后在JS（初始頁）中加載模式內容onClick （從php中獲取，提供的mem_id作為參數）

var clicked = $(e.relatedTarget);
$(this).find(".modal-body").load("%PATH%/getAdditionalData.php?mem_id="+clicked.attr("id"));

希望它能幫助您解決問題，如果您需要其他信息，請告訴我。 有更多方法可以存檔目標，但我認為這2種可能性在一開始就足夠了：-)