1

在我的应用程序中，我有一个 PF 布局，西部有一个 Tree 节点，中心有一个内容部分，我想使用 ajax 技术动态加载不同的页面。
为了得到它，这个内容部分包含一个带有表达式的ui:include标签。EL当用户单击树节点按钮时，页面会在中心正确呈现（效果很好！）。但是数据表的某些功能（例如排序）已损坏或丢失。
此外，如果从网络浏览器完全刷新页面，一切正常。

为了给你一个干净的例子，我已经简化了我的项目。:
_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:includewithEL并使用容器h:panelGroup和 static的条件渲染ui:include，但问题仍然存在。

Tree菜单的backing 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豆子 ：

@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 Community
JSF 2.2
Glassfish 4
NetBeans 7.3.1
Safari 浏览器

4

2 回答 2

0

问题是 Primefaces 3.5 不适合 glassfish 4 切换到 primefaces 4.0-SNAPSHOT，我想它可能会工作

于 2013-09-02T18:08:51.647 回答
0

抱歉，我的英语说得不好，但发生这种情况是因为 PF 只在页面中包含成功呈现页面上存在的组件所需的 javascript。如果您使用例如 ui:include 将组件动态地包含到页面中，则页面将不包含用于呈现该组件的 js

于 2013-09-06T11:17:43.663 回答