Question

我有一个响应式DataGrid，有4列。

<p:dataGrid value="#{myController.objList}" var="obj" layout="grid" columns="4">

    <p:outputPanel>
      <h:outputText value="Label 1: " />
      <h:outputText value="#{obj.field1}" />
    </p:outputPanel>

    <p:outputPanel>
      <h:outputText value="Label 2: " />
      <h:outputText value="#{obj.field2}" />
    </p:outputPanel>

</p:dataGrid>

当DataGrid从4列切换到1列时，它取决于屏幕宽度（大约640px）。我的目的是，根据屏幕宽度，首先从4列切换到2列，然后从2列切换到1列，就像使用PrimeFaces GridCSS一样。

DataGrid可以吗？
我可以使用媒体查询更改CSS吗？
是否可以将ArrayList集成到GridCSS中？

Answer 1

使用媒体查询更改dataGrid样式类使其按要求工作。

.ui-grid-row {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
    .ui-datagrid-column {
        width: 100% !important;
    }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .ui-datagrid-column {
        width: 50% !important;
    }
}
@media screen and (min-width: 1025px) {
    .ui-datagrid-column {
        width: 25% !important;
    }
}

p：dataGrid：是否可以使用4-2-1列的网格布局？

1 个答案: