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

Question

我有 ajax 功能来添加名称并以表格方式在同一页面上显示一张图片(在文本左侧)和一张“X”图片(在右侧删除)。它应该从左到右添加，完成一行后，它应该从下一行开始。

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

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

附言

<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>

结果应该是这样的……

% 字母 X% xyz X% dfd X

请将 % 视为图像，将 X 视为结束符号

Answer 1

<p:dataGrid>不支持 <p:column> .此栏目布局仅适用于<p:dataTable> .

替换所有这些 <p:column>通过单个分组组件，例如<h:panelGroup>或者也许 <p:panel> , 完全如 showcase site 所示.

<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>