Question

这可能很简单，但是我正在学习PHP和Javascript。我发现使用实际示例比在线给出的人工示例更容易学习。

我正在基于选择一个班级，然后按照姓和名对该班级的所有成员进行创建，从而创建了出勤登记页面。

表格行通过PHP设置了它的ID，作为记录的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 并按照说明获取/设置相关数据（相关点击的Glyphicon）。

更复杂的解决方案

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

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

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

1 个答案:

轻巧易用的解决方案

更复杂的解决方案