电子表格中的单个动态模态/ JS(而不是每个单元格一个)


Single dynamic modal/JS in spread-sheet like overview (instead one for each cell)

我有一个类似电子表格的概述,其中包含数百个单元格,每个单元格都是一个链接,可以打开一个带有表单的模态来调整单元格的内容(以及一些额外的数据,因此内联编辑不可取)。

我对 JS 不是很熟悉,但页面(带有 php db 的 html)目前所做的是创建数百个 JS 脚本(每个单元格 1),但我不相信这是正确的方法,它绝对不会提高页面的性能。

我需要的是,每个链接调用相同的模态,但要显示不同的内容。但是我怎样才能传递一些变量或其他东西呢?(例如,一些GET变量左右)。

我现在为每个单元格创建一个唯一的 ID,以使用预填充的内容调用模态(因此此页面中有数百个表单),但最好是单个模态接收信息,我可以用来与数据库通信并在打开模态时获取内容。

<a href="#42aa04334a02670b6cf0fbe7b4be3e37" role="button" data-toggle="modal">0,00</a>
<div id="42aa04334a02670b6cf0fbe7b4be3e37" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">xx modal content that is created related to the cell</div>

附言。我使用了引导程序 2,包括 jQuery 等,但我认为这对我的问题无关紧要

提前非常感谢!

是的,您可以使用单个模态。只需应用类,使用 data-target=".className" 调用模态,使用 data-* 传递公式。

$(document).ready(function() {
  $(".cell").click(function() {
    $(".modal .modal-body").html("<input type='text' value='" + $(this).data('formula') + "'/>");
  });
});
.cell {
  border: 1px solid #ddd;
  float: left;
  padding: 3px 5px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="cell" data-formula="x-y/z" role="button" data-toggle="modal" data-target=".modal">1</div>
<div class="cell" data-formula="x-a/z" role="button" data-toggle="modal" data-target=".modal">2</div>
<div class="cell" data-formula="x*b*cz" role="button" data-toggle="modal" data-target=".modal">3</div>
<div class="cell" data-formula="c*d/0.5" role="button" data-toggle="modal" data-target=".modal">4</div>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Edit cell formula</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>