Question

我的上一个问题取得了如此巨大的成功，以为我会尝试另一个问题。

我正在为我工作的公司打印一个“仪表板”，一个打印设施。此仪表板将列出正在进行的所有当前作业，已完成的作业等。（这将使每个人的生活更加美好）。

我使用PHP查询从MySQL数据库中提取了所有客户信息，并使用PHP while循环显示到DataTable中。我在每行末尾都有一个编辑按钮，打开一个模态框，显示并允许打印机输入信息并更新数据库。

这是有效的，但我开始认为......一切都很好，只有少数客户插入，但是一旦我们有1000多个客户，每个客户都有一个模态框（来自PHP while循环），它将会压倒性的。

任何人都可以向我解释，如果有可能的话，在页面上有一个单独的Modal Box代码，在点击链接时会将确切的客户数据输入其中，然后启动该框。

按钮启动模态（这是在PHP循环中）：

<a class=\"btn btn-info\" data-toggle=\"modal\" data-target=\"#modal_id\"
href=\"display=" . $row['id'] . "\">
<i class=\"icon-question-sign icon-white\"></i>  
</a>

模态代码本身（不在循环中的PHP中）：

<div class="modal hide fade" id="modal_id">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">×</button>
       <h3>Project Details</h3>
   </div>
   <div class="modal-body">

       ID is <?php echo $display ?>

   </div>
   <div class="modal-footer">
       <a href="#" class="btn btn-primary" data-dismiss="modal">Save Changes</a>
       <a href="#" class="btn" data-dismiss="modal">Close</a>
   </div>
</div>

里面的文字只是：ID是该变量未通过按钮href传递。

任何解决方案？

Answer 1

我想说最直接的方法是AJAX。

创建一个可以传递id的端点，该端点将显示相关的项目信息（类似于yoursite / projects / 5会返回ID为5的项目数据）
使用AJAX将ID发送到该端点并检索用户数据
将数据放入显示的模态中。

更改指向按钮的链接

<button class="project-button btn btn-info" data-toggle="modal" data-target="#modal_id" data-project-id="<?=$row['id']?>">
  <i class="icon-question-sign icon-white"></i>  
</button>

AJAX调用示例

var modal_body = $('#modal_id .modal-body');
$('.project_button').on('click', function() {
  var project_id = $(this).data('projectId');
  $.get('/project/', { id: project_id }, function(data) {
    // Populate modal
    modal_body.html(data);
  }
}

显然，您需要创建另一个页面来创建将返回显示的html。您还可以执行其他操作，例如在数据加载到模态时显示加载动画。但这对你来说应该是一个很好的起点。

Answer 2

最佳方式是使用AJAX，以便您可以将id传递到您选择的其他网页

我发现同样的问题在这里得到了解释：http://thecomputerstudents.com/web/using-bootstrap-modal-ajax-import-data-mysql/

将MySQL数据导入单个Bootstrap模式盒？

2 个答案: