使用引导程序单击表格行时如何使用模态弹出窗口显示数据？

Question

我创建了一个学生表，我想在弹出窗口中单击表格行时显示模态的详细信息（ID，名称，年龄）。

ListStudents.xhtml

<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th><center>Name</center></th>
			<th><center>Age</center></th>
		</tr>
	</thead>
	<tbody>
		<ui:repeat var="stud" value="#{dataModelBeanD.model}">
			<tr>
				<td>#{stud.name}</td>
				<td><center>#{stud.age}</center></td>
				<td>
					<p data-placement="top" data-toggle="tooltip" title="Consult">
						<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" >
							<span class="glyphicon glyphicon-modal-window"></span>
						</button>
					</p>
					<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      					<div class="modal-dialog">
    						<div class="modal-content">
          						<div class="modal-header">
        							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        								<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        							</button>
        							<h4 class="modal-title custom_align" id="Heading">Your Detail</h4>
      							</div>
          						<div class="modal-body">
        							<h:outputLabel value="Name : " styleClass="control-label col-sm-2"/>
									<h:outputLabel value="#{stud.name}" styleClass="form-control"/>
									<h:outputLabel value="Age : " styleClass="control-label col-sm-2"/>
									<h:outputLabel value="#{stud.age}" styleClass="form-control"/>
      							</div>
        					</div>
  						</div>
     				</div>
    			</td>
			</tr>
		</ui:repeat>
	</tbody>
</table>
				

在JS上，我做了：

$(document).ready(function(){
	$("#mytable #checkall").click(function () {
	        if ($("#mytable #checkall").is(':checked')) {
	            $("#mytable input[type=checkbox]").each(function () {
	                $(this).prop("checked", true);
	            });

	        } else {
	            $("#mytable input[type=checkbox]").each(function () {
	                $(this).prop("checked", false);
	            });
	        }
	    });
	    
	    $("[data-toggle=tooltip]").tooltip();
	});

如果我们谈论静态表，知道我找到了很多教程来解决这个问题。 但是，正如您所看到我正在使用动态表格，问题是我在点击this screenshot所描述的2行后获得了第一行的相同详细信息

有任何关于解决这个问题的想法吗？ 非常感谢。

Answer 1

您可以依赖此Example。所以你可以这样做：

相关HTML

＆＃13;

＆＃13;

  <ui:repeat var="stud" value="#{dataModelBeanD.model}">
			<tr>
				<td>#{stud.name}</td>
				<td><center>#{stud.age}</center></td>
				<td style="text-align:center;">
                	<button class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>
            	</td>
            	<td>
					<h:form>
						<center>
							<p:commandLink action="#{dataModelBeanD.performRedirectEdit}" >
								<p:graphicImage value="/resources/pictures/edit.png" />  
							</p:commandLink>
						</center>
					</h:form>
				</td>
 				<td>
					<h:form>
						<center>
							<p:commandLink action="#{dataModelBeanD.deleteN(stud.id)}">
								<p:graphicImage value="/resources/pictures/delete.png" /> 
							</p:commandLink>
						</center>
					</h:form>
				</td>
			</tr>
		</ui:repeat>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content"></div>
</div>
<div class="modal-dialog">
    <div class="modal-content"></div>
</div>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">×  </span><span class="sr-only">Close</span>

            </button>
             <h4 class="modal-title" id="myModalLabel">Modal title</h4>

        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

相关JS：

＆＃13;

＆＃13;

$(".btn[data-target='#myModal']").click(function() {
       var columnHeadings = $("thead th").map(function() {
                 return $(this).text();
              }).get();
       columnHeadings.pop();
       var columnValues = $(this).parent().siblings().map(function() {
                 return $(this).text();
       }).get();
  var modalBody = $('<div id="modalContent"></div>');
  var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
  $.each(columnHeadings, function(i, columnHeader) {
       var formGroup = $('<div class="form-group"></div>');
       formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
       formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />'); 
       modalForm.append(formGroup);
  });
  modalBody.append(modalForm);
  $('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
   $('form[name="modalForm"]').submit();
});

＆＃13;

＆＃13;

＆＃13;

HTH。