显示单击的引导表行的详细信息

时间:2017-04-15 09:38:39

标签: bootstrap-modal

我创建了一个表格,我想恢复模态中每行的细节来编辑它。 我的xhtml页面如下:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      template="/pages/indexTemplate.xhtml"> 

	<h:head>
    	<title>SLEAM Book | Consult a Facebooker</title>
        <link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
        <style>
			.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
    		border-style: none;
        </style>
        
    </h:head>
	<h:body>
    	<ui:composition template="indexTemplate.xhtml">
			<ui:define name = "content">
        		<h:form id="myForm">
            		<h:outputText value="Add a Publication" styleClass="text-primary"/>
            		<br/><br/>
           			<h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
           			<br/>
           			<p:commandButton value="Post" 
									 action="#{userBean.createPublication}"
									 styleClass="btn btn-primary"
									 id="btn" ajax="true"/>
					<br/><br/><br/>
					<div class="table-responsive">
    					<p:dataTable id="aa" var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
					        <f:facet name="header">
					            List Of Publications
					        </f:facet>
					        
					        <p:column headerText="Id">
					            <h:outputText value="#{car.id}" />
					        </p:column>
					        <p:column headerText="Title">
					            <h:outputText value="#{car.title}" />
					        </p:column>
        					<p:column style="width:32px;text-align: center">
        						<p:commandLink value="Edit" styleClass="btn btn-primary" onclick="$('#myModal').modal('show');" update=":myForm" immediate="true">
					                <f:setPropertyActionListener value="#{car}" target="#{userBean.selectedPublication}" />
					            </p:commandLink>
					            
								<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
								    <div class="modal-dialog modal-sm">
								        <div class="modal-content">
								            <h:form id="myForm">
								                <div class="modal-header">
								                    <h4 class="modal-title">Test Modal</h4>
								                </div>
								                <div class="modal-body">
								                	<p:outputPanel id="carDetail" style="text-align:center;">
									                    **
									                    <h:outputText value="#{userBean.selectedPublication.id}"/>
									                    **
								                    </p:outputPanel>
								                </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>
								            </h:form>
								        </div>
								    </div>
								</div>
        					</p:column>
    					</p:dataTable>
					</div>		 
				</h:form>
         	</ui:define>
   		</ui:composition>
	</h:body> 
</html>
&#13;
&#13;
&#13;

单击表格的一行后,会显示一个模态,但我的问题是我无法恢复所点击的行的ID。 你有没有想过要解决这个问题,非常感谢。

1 个答案:

答案 0 :(得分:0)

你无法做那辆车每一行都没有自己的参考。 您可以查看此链接https://blog.sixthpoint.com/calling-bootstrap-3-modal-from-jsf/

HTH

相关问题