jquery-ui - 多行的 JQuery 对话框

Question

我有一个对象列表。每个对象都有自己的值。在网页上，它们显示为行。我想要做的是添加当单击特定行上的链接时弹出的 JQuery 对话框。最好的方法是什么？在每一行中定义一个对话框还是只使用一个更好？问题是我无法到达对话框内的元素以用行数据填充它们。有没有这方面的好例子？谢谢

Answer 1

只需使用一个对话框，它最初应该是隐藏的：

<div id="rowDialog" style="display:none">
  <div id="rowDialogDiv">in here we are
  </div>
  <button id="rowDialogButton>Custom button</div>
</div>

初始化对话框，一开始不显示：

$('#rowDialog').dialog({ autoOpen: false });

为该行放入一个事件处理程序：

$("tr").click(function(){
  var rowClicked = $(this);
  $('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
  $('#rowDialog").dialog("open");
});

强烈建议您提供表格和 ID，然后从中访问表格行以提高速度，以防万一您有多个表格等。

您还可以为对话框元素设置事件处理程序：

$('#rowDialogButton').click(function(){
//do button stuff
});

Answer 2

像这样的东西？

<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>

jQuery代码：

$("#myDialog").dialog({
options:....
});    

$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});