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 并按照描述获取/设置相关数据（相关的点击字形图标）。

更复杂的解决方案

更多数据/更多行。初始加载的 HTML 页面中未提供附加数据 - 因此并非所有数据都需要在开始时加载。 而是通过ajax 在单击一行时加载附加数据。

为此，您需要提供一个额外的端点 (php)，它为一行提供模态内容。

在Bootstrap 3 - How to load content in modal body via 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"));

我希望它能帮助您解决问题，如果您需要更多信息，请告诉我。有更多方法可以归档您的目标，但我认为这两种可能性一开始就足够了:-)