Xav*_*ois 18 java jquery jsf primefaces jsf-2
我们有一个基于JBoss 7.1构建的Web应用程序,包含JSF2和Primefaces 3.3.
在我们的一个页面上,ui:repeat显示了10个项目; 然后用户可以点击某种"显示更多"按钮,并通过ajax显示另外10个项目.用户可以单击"显示更多"按钮,直到没有更多项目显示.注意:这不是分页,每次单击"显示更多"时显示的列表会变长.
实际上,当用户点击按钮时,服务器返回旧项和新项,而JSF的客户端每次都必须通过jQuery重建整个转发器.
我们希望找到更好,更高效的解决方案.旧项目在n-1和n调用之间不会发生变化,因此如果服务器只能通过ajax返回10个新项目,那么效率会更高.
在JSF2中有可能吗？JSF似乎并不真正符合这种递归渲染.唯一可以帮助我们的组件是TreeNode组件,但它看起来有点像黑客: - /
Bal*_*usC 10
在标准的JSF API中没有类似的东西. PrimeFaces也没有任何想法. 对于PrimeFaces,请参阅最后的更新
然而,OmniFaces <o:componentIdParam>可能正是您所期待的.它允许您让JSF仅基于特定的请求参数呈现组件树的子集,该参数可以是组件ID或客户端ID.您基本上只需使用jQuery 将start索引作为请求参数$.get()重新加载,<ui:repeat>并使用jQuery $.append()将其附加到HTML DOM.
这是一个完整的启动示例.风景:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui"
>
<f:metadata>
<o:componentIdParam componentIdName="componentId" />
</f:metadata>
<h:head>
<title>Stack Overflow Question 11364006</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Substitute with PrimeFaces' one, if necessary. -->
</h:head>
<h:body>
<ul id="items">
<ui:repeat id="itemsRepeater" value="#{bean.items}" var="item">
<li>#{item}</li>
</ui:repeat>
</ul>
<input type="button" id="showMore" value="Show more"/>
<h:outputScript>
$("#showMore").click(function() {
$items = $("#items");
var params = { start: $items.find("li").length, componentId: "itemsRepeater" };
$.get(location, params, function(html) {
$items.append(html);
});
});
</h:outputScript>
</h:body>
</html>
支持bean:
@ManagedBean
@RequestScoped
public class Bean {
private List<String> items;
@ManagedProperty("#{param.start}")
private int start;
@PostConstruct
public void init() {
// Just a stub. Do your thing to fill the items.
items = new ArrayList<String>();
int size = start + 10;
for (int i = start; i < size; i++) {
items.add("item " + (i + 1));
}
}
public void setStart(int start) {
this.start = start;
}
public List<String> getItems() {
return items;
}
}
更新:现场演示可以的"扩展列表"的例子中找到的<o:componentIdParam>当前展示应用程序的页面.
更新2):PrimeFaces p:datascroller已与"按需滚动"惰性加载