Ajax更新打破了Primefaces数据表功能

时间:2013-09-02 16:28:22

标签: ajax jsf primefaces

在我的应用程序中,我有一个PF布局,西部有一个Tree节点,中心有一个内容部分,我想用ajax技术动态加载不同的页面。
为此,此内容部分包含ui:include标记,其中包含EL表达式。当用户单击树节点按钮时,页面将在中心正确呈现(并且效果非常好!)。但是数据的某些功能(例如排序)会被破坏或丢失 而且,如果从Web浏览器完全刷新页面都可以正常工作。

我简化了我的项目,以便给你一个干净的例子 index.xhtml:     

    <p:layout fullPage="true">
        <p:layoutUnit position="north" size="100" header="Top">
        </p:layoutUnit>

        <p:layoutUnit position="west" size="100" resizable="true"> 
            <h:form>
            <p:tree id="menuTree" 
                    value="#{menuController.root}"
                    var="node" 
                    selection="#{menuController.selectedNode}"
                    selectionMode="single">  
                <p:ajax event="select" update=":content" listener="#{menuController.setPage(node)}" />
               <p:treeNode>
                   <h:outputText value="#{node}" />
               </p:treeNode>
            </p:tree>
            </h:form>
        </p:layoutUnit>
        <p:layoutUnit position="east" size="50"/>

        <p:layoutUnit position="south" size="60"/>

        <p:layoutUnit position="center" id="centerlayout">   
            <h:panelGroup id="content">
            <c:if test="${not empty menuController.page}">
                <ui:include src="#{menuController.page}.xhtml" />
            </c:if>
            </h:panelGroup>
        </p:layoutUnit>
    </p:layout>
</h:body>

我想说的是,我尝试使用ui:include更改EL,并使用容器h:panelGroup和静态ui:include的条件呈现,但是问题仍然存在。

Tree菜单的支持bean:

@Named
@SessionScoped
public class MenuController implements Serializable {

private TreeNode root;  
private TreeNode selectedNode;
private String pageName;

public MenuController() {  
    root = new DefaultTreeNode("Root", null);  
    TreeNode node0 = new DefaultTreeNode("Node 0", root);  

    TreeNode node00 = new DefaultTreeNode("/list", node0);  
    TreeNode node01 = new DefaultTreeNode("/list2", node0);     
}  

public TreeNode getRoot() {  
    return root;  
} 

public TreeNode getSelectedNode() {
    return selectedNode;  
}  

public void setSelectedNode(TreeNode selectedNode) {  
    this.selectedNode = selectedNode;        
}     

public void setPage(String page){
    this.pageName = page;       
}
public String getPage(){       
    return this.pageName;
}     

包含数据表list.xhtml的页面(请注意list2.xhtml相同,将某些文字更改为“观看”内容更新):

<ui:composition>  

<h:form id="ItemListForm">

    <p:panel header="Title">

        <p:dataTable id="datalist" value="#{itemController.items}" var="item"
                     selectionMode="single" selection="#{itemController.selected}"
                     rowKey="#{item.itemid}"
                     paginator="true"
                     rows="10"
                     rowsPerPageTemplate="10,20,30" >

            <p:column sortBy="#{item.itemid}" filterBy="#{item.itemid}">
                <f:facet name="header">
                    <h:outputText value="Id"/>
                </f:facet>
                <h:outputText value="#{item.itemid}"/>
            </p:column>
            <p:column sortBy="#{item.productid}" filterBy="#{item.productid}">
                <f:facet name="header">
                    <h:outputText value="ProductId"/>
                </f:facet>
                <h:outputText value="#{item.productid}"/>
            </p:column>
            <p:column sortBy="#{item.name}" filterBy="#{item.name}">
                <f:facet name="header">
                    <h:outputText value="Name"/>
                </f:facet>
                <h:outputText value="#{item.name}"/>
            </p:column>
            <p:column sortBy="#{item.description}" filterBy="#{item.description}">
                <f:facet name="header">
                    <h:outputText value="Description"/>
                </f:facet>
                <h:outputText value="#{item.description}"/>
            </p:column>
        </p:dataTable>
    </p:panel>
</h:form>

ItemController bean:

@Named
@SessionScoped
public class ItemController implements Serializable {
private Item selected;
private List<Item> items;


public ItemController() {
    this.items = new ArrayList<>();
    this.items.add(new Item("1", "1", "Product 1", "testing sorting"));
    this.items.add(new Item("3", "3", "Product 3", "testing sorting"));
    this.items.add(new Item("2", "2", "Product 2", "testing sorting"));
    this.items.add(new Item("4", "4", "Product 4", "testing sorting"));
    this.items.add(new Item("5", "5", "Product 5", "testing sorting"));
    this.items.add(new Item("6", "6", "Product 6", "testing sorting"));
}

public Item getSelected() {
    return selected;
}

public void setSelected(Item selected) {
    this.selected = selected;
}    

public List<Item> getItems() {
    return items;
}

班级Item,非常简单:

public class Item implements Serializable {

private String itemid;

private String productid;

private String name;

private String description;


public Item() {
}

public Item(String itemid) {
    this.itemid = itemid;
}

public Item(String itemid, String productid, String name, String description) {
    this.itemid = itemid;
    this.productid = productid;
    this.name = name;
    this.description = description;
}

public String getItemid() {
    return itemid;
}

public void setItemid(String itemid) {
    this.itemid = itemid;
}

public String getProductid() {
    return productid;
}

public void setProductid(String productid) {
    this.productid = productid;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}

最后,我正在使用:
Java EE 7
PrimeFaces 3.5社区
JSF 2.2
Glassfish 4
NetBeans 7.3.1
Safari浏览器

2 个答案:

答案 0 :(得分:0)

问题是Primefaces 3.5不能很好地使用glassfish 4切换到primefaces 4.0-SNAPSHOT并且我想它可能会起作用

答案 1 :(得分:0)

对不起,我说英语不太好,但这是因为PF只在页面中包含了成功呈现页面上存在的组件所需的javascript。如果通过使用例如ui:include将页面组件包含在页面中,则页面将不包含用于呈现此组件的js