桌面浏览器中的 primefaces 数据表重排

Question

primefaces 5.2

我有一个 primefaces 数据table，table 很长，这就是为什么我想以列堆叠模式显示它，我尝试使用数据的回流属性table.

现在，如果我在 chrome 中使用开发者模式并在我减小屏幕尺寸时切换到移动视图，它实际上会响应并进入堆叠列模式，现在我想证明table 在普通桌面视图中的类型也是如此。我认为简单的事情，比如减少 table 的大小会有所帮助，但无论我减少多小，它只会将 table 塞进那个小 space 而不是让它响应。

我是否遗漏了一些有关如何使某些内容在桌面浏览器上响应的信息。

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
            rowIndexVar="rowindex"  reflow="true" 
            >

在正常尺寸下 table 看起来像这样

在 chrome 开发者模式移动视图中

如果我调整 table 的大小以获得相同的效果，而不是响应式大小更改，则会发生这种情况

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
            rowIndexVar="rowindex"  reflow="true"  style="width:200px"
            >

如果我使用与上面相同的 table 调整浏览器大小并使其变小，它就可以工作

也许我只是不明白响应式的实际含义，是否无法通过更改 table 的大小来触发响应式行为，它似乎只有在浏览器的大小更改时才有效

我这样做的主要 objective 与使 table 响应并没有多大关系，我真正想要实现的是将 table 放入列中堆叠模式，据我所知，这是 PF 的唯一方式

任何帮助将不胜感激

Answer 1

回流模式适用于 CSS 媒体查询。当您的 window 宽度小于 35em（另请参阅下面的 primefaces.css 片段）时，将应用回流模式。

因此，将 width: 200px; 应用于您的 dataTable 不会被考虑在内，也不会导致堆叠数据 table。

为了实现您的目标（当您的 window 宽度大于 35em 时应用堆栈模式）您可以创建（我想不出更简洁的解决方案）您自己的 css class 摆脱了媒体查询。类似于 table-reflow-desktop:

.table-reflow-desktop .ui-datatable-data td .ui-column-title {
      display: none;
}
.table-reflow-desktop thead th,
.table-reflow-desktop tfoot td {
      display: none;
}
.table-reflow-desktop .ui-datatable-data td {
     text-align: left;
     display: block;
     border: 0px none;
     width: 100%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     float: left;
     clear: left;
}
.table-reflow-desktop .ui-datatable-data.ui-widget-content {
     border: 0px none;
}
.table-reflow-desktop .ui-datatable-data tr.ui-widget-content {
     border-left: 0px none;
     border-right: 0px none;
}
.table-reflow-desktop .ui-datatable-data td .ui-column-title {
     padding: .4em;
     min-width: 30%;
     display: inline-block;
     margin: -.4em 1em -.4em -.4em;
}

并且不要忘记将此 class 应用到您的 p:dataTable:

<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}" rowIndexVar="rowindex" styleClass="table-reflow-desktop">

供参考，这是原始的 PrimeFaces 5.2 css 负责回流模式的部分：

/** Reflow **/
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
   display: none;
}
@media ( max-width: 35em) {
    .ui-datatable-reflow thead th,
    .ui-datatable-reflow tfoot td {
        display: none;
    }
    .ui-datatable-reflow .ui-datatable-data td {
        text-align: left;
        display: block;
        border: 0px none;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
    .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
        border: 0px none;
    }
    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0px none;
        border-right: 0px none;
    }
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
        padding: .4em;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4em;
    }
}

桌面浏览器中的 primefaces 数据表重排

primefaces datatable reflow in desktop browser

css

datatable

jsf

primefaces

jsf-2