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

Question

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

我对 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>

ps。我使用了 bootstrap 2，包括 jQuery 等，但我认为这对我的问题并不重要

提前非常感谢!

Answer 1

是的，您可以使用单一模式。只需应用类，使用 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>