Primefaces dataGrid 动态列数取决于显示宽度答案

【问题标题】：Primefaces dataGrid dynamic number of columns depending on the display widthPrimefaces dataGrid 动态列数取决于显示宽度
【发布时间】：2016-04-27 07:02:38
【问题描述】：

我正在使用 Primefaces 5.2.x 我实现了一个dataGrid：

<p:dataGrid var="data" value="#{dataGrid.data}" columns="3" layout="grid" 
                        rows="12" paginator="true" id="dataview">
<f:facet name="header">
    Ihre Daten
</f:facet>
<p:commandLink update=":form:dataDetail" oncomplete="PF('dataDialog').show()" title="View Detail">
    <p:panel header="#{data.id}" style="text-align:center">
        <p:panelGrid columns="1" style="width:100%">
            <h:outputText value="#{data.nummer}" />
            <h:outputText value="#{data.name}" />
            <h:outputText value="#{data.kurzname}" />
            <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
        </p:panelGrid>
    </p:panel>
    <f:setPropertyActionListener value="#{data}" target="#{dataGrid.selectedData}" />
</p:commandLink></p:dataGrid>

到目前为止，这有效。但现在我总是在自己的行中有 3 个面板。在 iphone 6、平板电脑、桌面上，每行总是 3 列。只有当我最小化宽度强。它打破了每行只显示一个条目。

现在，我希望在 iphone 等移动设备上，默认情况下每行只显示一个条目。在平板电脑 2 和台式机 3 上。

我该怎么做？谢谢

【问题讨论】：

标签： primefaces datagrid

【解决方案1】：

也许您应该升级到最新版本的 PrimeFaces。

看这里，试试看。 Datagrid 具有响应性。

DataGrid demo

【讨论】：

它确实是响应式的，但在我看来“完全响应式”是太多了。它没有为不同的窗口大小配置 8、5、3 列的选项（据我所知），但这可能是一个不错的补充。也许我们应该提出增强请求。
如果默认行为不满足要求，您可以使用 CSS 进行调整。
我知道，但我也可以创建一个带有一些 div、ui:repeat、一些 css 等的响应式数据网格。 ;-) 将它作为“响应式”组件的一部分会更好。