时间戳

首页 > 解决方案 > Bootstrap Modal - 如何从 php（数据库）提供数据

javascript - Bootstrap Modal - 如何从 php（数据库）提供数据

问题描述

这可能很简单，但我正在学习 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？

非常感谢

标签： javascriptphpbootstrap-modal

解决方案

有多种方法可以向模态提供数据 - 并且（在我看来）这取决于您需要将多少数据传递给模态以及您拥有多少行。

我想用两种方式描述你：

轻+易解决方案

如果您不想显示大量数据并且只有几行。这个想法是将数据直接添加到每个 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描述的相关数据（相关的点击字形图标）。

更复杂的解决方案

更多数据/更多行。初始加载的 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"));

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

推荐阅读