0

我是 JSF 的新手。我们正在使用 JSF 和 primefaces 构建一个 Web 应用程序。我们有很多地方需要展示表格。表格应该有分页，列可调整大小，在某些地方我们需要右键单击上下文菜单等。

我可以使用dataTableprimefaces 提供的组件来实现这一点。但我想将它创建为更可定制的组件。诸如可重用的 javascript/jquery ( Jqgrid ) 插件之类的东西，我们只需设置一些应该足够的属性值。

如果创建了一个可以在所有地方重用并设置参数的组件（例如：columnResizable='true'，columnSortable='true'），我也想做类似的方式，而不是为所有功能编写整个代码这节省了开发时间。

我没有得到任何关于如何完成它的图片。如果有人可以指导，那就太好了。我并不期待完整的代码，任何使用 JSF 实现它的想法都会非常感激。

4

1 回答 1

3

您应该使用复合组件，您可以传递任意数量的参数并使用#{cc.attrs.param1}语法相应地对其进行自定义。这是一个示例 XHTML。

复合组件

<ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:u="http://java.sun.com/jsf/composite/ui" 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:s="http://jboss.org/seam/faces" xmlns:p="http://primefaces.org/ui" xmlns:cc="http://java.sun.com/jsf/composite">
    <cc:interface>
        <cc:attribute name="tableId" />
        <cc:attribute name="param1" />
        <cc:attribute name="param2" default="false" />
        <cc:attribute name="param3" required="true" />
    </cc:interface>
    <cc:implementation>
        <p:dataTable id="#{cc.attrs.tableId}" rendered="#{cc.attrs.param2}" value="#{cc.attrs.param1}" var="result" emptyMessage="#{messages['global.noItemsFound']}">
                            <ui:include src="#{cc.attrs.param3}" />
        </p:dataTable>
    </cc:implementation>
</ui:component>

使用<c:if test="#{not empty cc.attrs.param4}">orrendered属性，您可以进一步自定义您的组件

看法

让我们将您的复合材料称为 myList.xhtml，然后您可以调用它：

<u:myList param1="#{backingbean.results}" param2="true" id="list1" param3="/items/columns.xhtml" />

并且不要忘记在您的视图中添加标题：

xmlns:u="http://java.sun.com/jsf/composite/ui"

列.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.org/seam/faces" xmlns:u="http://java.sun.com/jsf/composite/ui"
    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">
    <p:column  headerText="Name">
        <h:outputText value="#{result.name}" />
    </p:column>
    <p:column  headerText="Salary">
        <h:outputText value="#{result.salary}" />
    </p:column>
    <p:column  headerText="Age">
        <h:outputText value="#{result.age}" />
    </p:column>
</ui:composition>

为列包含单独视图的替代方法是<p:columns>在复合组件中使用并传递另一个包含列数据的列表作为参数。动态列

于 2014-01-15T09:38:30.187 回答