我有一个 JSF 页面,其中有一个包含许多列的表格。当我尝试使列可调整大小时,结果很奇怪,而且对所有浏览器都不一样。
对于 FireFox,第一列(演示代码中的“ID”)工作正常。当您尝试将第二列(“书名”)的右边界向左推时,它的下一列会在两侧接合。其余列只有有限的空间可以放大。
对于 Chrome 来说,情况更为严峻。第一列不能放大。当您尝试扩大其余列时,整个表格宽度实际上正在缩小。
Microsoft Edge 的行为与 FireFox 大致相同。
我将 Primefaces 5.2 与 JSF 2.2 (JavaEE 7) 结合使用,并使用 GlassFish 4.1 作为服务器。开发环境为 NetBeans 8.0.2 和 Bundled Maven 3.0.5。
我附上了JSF和CSS的演示代码,有谁知道解决办法,请帮忙。提前致谢。
JSF 页面:
<h:head>
<title>Data Table Format</title>
<h:outputStylesheet name="css/datatable-format.css"/>
</h:head>
<h:body>
<h:form>
<p:dataTable styleClass="ui-datatable-hor-scroll" var="book" value="#{publishedBookView.books}" id="viewDataTable" paginator="true" rows="20"
paginatorTemplate="{Calendar} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {Exporters}"
rowsPerPageTemplate="10,20,50,100" resizableColumns="true" liveResize="true" paginatorPosition="top">
<f:facet name="{Calendar}">
<p:outputLabel class="header-calendar">From Date</p:outputLabel>
<p:calendar class="header-calendar" id="fromDate" value="#{book.publishDate}" pattern="dd MMM yyyy" readonlyInput="true">
<p:ajax event="dateSelect" update="viewDataTable" />
</p:calendar>
<p:outputLabel class="header-calendar">To Date</p:outputLabel>
<p:calendar class="header-calendar" id="toDate" value="#{book.publishDate}" pattern="dd MMM yyyy" readonlyInput="true" >
<p:ajax event="dateSelect" update="viewDataTable"/>
</p:calendar>
</f:facet>
<f:facet name="{Exporters}">
<h:commandLink>
<p:graphicImage name="/img/excel.png" styleClass="exporter-button"/>
<p:dataExporter type="xls" target="viewDataTable" fileName="records" />
</h:commandLink>
<h:commandLink>
<p:graphicImage name="/img/csv.png" styleClass="exporter-button"/>
<p:dataExporter type="csv" target="viewDataTable" fileName="records" />
</h:commandLink>
</f:facet>
<p:column headerText="ID" class="book-id-format" sortBy="#{book.bookId}" filterBy="#{book.bookId}" filterMatchMode="contains">
<h:outputText value="#{book.bookId}"/>
</p:column>
<p:column headerText="BOOK Name" class="book-name-format">
<h:outputText value="#{book.bookName}" />
</p:column>
<p:column headerText="Published Date 01" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 02" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 03" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 04" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 05" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 06" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 07" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 08" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 09" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 10" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
CSS 表:
.book-id-format {
height: 8px !important;
margin-top: 3px !important;
width: 180px;}
.book-name-format {
height: 8px !important;
margin-top: 3px !important;
min-width: 80px;}
.published-date-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;}
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
overflow: auto;
width: auto;}
.ui-datatable.ui-widget {
font-size: 50%;}
.ui-paginator {
font-size: x-small;
width: auto;
height: 26px;}
.exporter-button {
float: right;
width: 24px;
margin-right: 5px;
background: none;}
.header-calendar {
float: left;
margin-right: 5px;}
.ui-datepicker {
background: white;
font-size: 70%;}
最佳答案
如果您在 CSS 中给出列宽的完整定义,它可能会正常工作:
.book-name-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;
min-width: 80px;
max-width: 200px;
}
关于html - Primefaces数据表resizableColumns无法正常使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33298673/