如何在p:dataGrid中显示字符串的数组列表

Question

我有ajax功能，可以添加名称，并以表格的方式在同一页面上显示一个图像（位于文本左侧）和一个"X"图像（位于右侧可删除）。它应该像这样添加，从左到右，在完成一行之后，它应该从下一行开始。

所以我需要在p:datagrid或任何其他可以与相同功能一起使用的标记中显示字符串的数组列表。

我尝试使用ui:repeat和p:panelgrid的组合，但无法获得数据网格的功能。我没有使用p:dataTable，因为它会在底部添加新元素，而不是我需要的。

p.S.

<h:form>
        <h:selectOneMenu id="recepients" value="#{controller.selected}">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Info1" itemValue="Info1"></f:selectItem>
            <f:selectItem itemLabel="Info2" itemValue="Info2"></f:selectItem>
            <f:selectItem itemLabel="Info3" itemValue="Info3"></f:selectItem>
            <f:selectItem itemLabel="Info4" itemValue="Info4"></f:selectItem>
            <f:selectItem itemLabel="Info5" itemValue="Info5"></f:selectItem>

        </h:selectOneMenu>
        <p:commandButton value="Add" action="#{controller.submit}"
            update="nameslist" />
        <p:dataGrid id="nameslist" value="#{controller.tempNameList}"
            var="name" columns="3">
            <p:column>
                <p:outputLabel value="%" />
            </p:column>
            <p:column>
                <p:outputLabel value="#{name}" />
            </p:column>
            <p:column>
                <p:commandLink value="X" action="#{controller.delete(name)}"
                    update="nameslist">
                </p:commandLink>                

            </p:column>
        </p:dataGrid>
    </h:form>

结果应该是这样的。。。

%Abc X%Xyz X%dfd X

plz将%视为图像，将X视为闭合符号

Answer 1

<p:dataGrid>不支持<p:column>。此列布局仅适用于<p:dataTable>。

用一个单独的分组组件替换所有的<p:column>，例如<h:panelGroup>或<p:panel>，正如展示现场所示。

<p:dataGrid id="nameslist" value="#{controller.tempNameList}" var="name" columns="3">
    <h:panelGroup>
        <p:outputLabel value="%" />
        <p:outputLabel value="#{name}" />
        <p:commandLink value="X" action="#{controller.delete(name)}" update="nameslist" />
    </h:panelGroup>
</p:dataGrid>