Twitter bootstrap 推特引导&x2B;JSF2
我试图将twitter boostrap合并到第一个JSF2项目中 我的问题是如何从datatable中获取所选索引,这样当我单击edit按钮时,就会显示带有所选信息的模式表单 我的想法是用h:link替换普通的html href标记,这样我就可以添加一个操作事件来设置托管bean中的所选记录,但是h:link结果没有拾取“#myModal”引用,h:link的URL在末尾缺少“#myModal” 希望这有意义Twitter bootstrap 推特引导&x2B;JSF2,twitter-bootstrap,jsf-2,Twitter Bootstrap,Jsf 2,我试图将twitter boostrap合并到第一个JSF2项目中 我的问题是如何从datatable中获取所选索引,这样当我单击edit按钮时,就会显示带有所选信息的模式表单 我的想法是用h:link替换普通的html href标记,这样我就可以添加一个操作事件来设置托管bean中的所选记录,但是h:link结果没有拾取“#myModal”引用,h:link的URL在末尾缺少“#myModal” 希望这有意义 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="WEB-INF/templates/default.xhtml">
<ui:define name="content">
<div class="well">
<h2>Members</h2>
<br />
<h:panelGroup rendered="#{empty members}">
<em>No registered members.</em>
</h:panelGroup>
<h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
rendered="#{not empty members}" styleClass="table table-striped table-bordered">
<h:column>
<f:facet name="header">Id</f:facet>
#{_member.memberId}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
#{_member.firstName}
</h:column>
<h:column>
<f:facet name="header">Email</f:facet>
#{_member.lastname}
</h:column>
<h:column>
<f:facet name="header">Phone #</f:facet>
#{_member.contactNumber}
</h:column>
<h:column>
<f:facet name="header">REST URL</f:facet>
<a href="#{request.contextPath}/rest/members/#{_member.memberId}">/rest/members/#{_member.memberId}</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:link href="#myModal" role="button" class="btn" data-toggle="modal" value="Edit"></h:link>
</h:column>
</h:dataTable>
</div>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</ui:define>
</ui:composition>
</html>
成员
没有注册会员。
身份证件
#{{u member.memberId}
名称
#{{u成员.名字}
电子邮件
#{{u member.lastname}
电话#
#{{u成员.联系人号码}
RESTURL
行动
行动
×
模态头
一个好身体
接近
保存更改
对于任何有相同问题的人,我就是这样让它工作的:
- 您必须自己打开模式javascript
- 如果您不希望模式在页面重新加载时消失,则必须使用
来防止页面重新加载 - 我发现将变量(这里:
)获取到支持bean的唯一方法是在ajax侦听器中计算EL表达式{u member}
<h:form>
<h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
rendered="#{not empty members}"
styleClass="table table-striped table-bordered">
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandLink value="Edit">
<!-- the listener sets the variable in backing bean and onevent opens the modal -->
<!-- you also have to render the form inside the modal, so the values get updated with new ones from backing bean -->
<f:ajax listener="#{ajaxBean.handleEvent}" onevent="openModal('myModal');" render=":modalForm" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<h:form id="modalForm>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Use backing Bean property here... <h:outputText value="#{ajaxBean.member.name}</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</h:form>
</div>
<script type="text/javascript">
function openModal(modalName) {
$(modalName).modal('show');
return false;
}
</script>
这样,模式将打开,您可以通过模式中的#{ajaxBean.member}从数据表访问#{u member}
有时,如果按“关闭”按钮,第一次按此方式,模态将无法关闭。如果是,您可以将其替换为
<h:commandLink onclick="$(#myModal).modal('hide');" />
我几乎可以肯定,有一种更优雅的方式可以做到这一点。如果有人知道我有多高兴收到他的来信
<h:commandLink onclick="$(#myModal).modal('hide');" />