我有一个具有实时滚动功能的数据表。该表适合我的开发机器，但此应用程序的用户有更大的屏幕。如果数据表适合屏幕尺寸，那就更好了。此外，数据表的高度应该随着实时滚动的更多行数进行调整。目前我有 15 行用于实时滚动。如果滚动行随着屏幕的高度而增加就好了。请在这方面帮助我。
我的数据表代码片段:
<h:form id="form">
<div id="content">
<h:selectOneMenu id="workspaceOptions" />
<f:selectItem id="option1" itemLabel="Assignments"
itemValue="assignment" />
</h:selectOneMenu>
<p:dataTable id="workSpaceList" var="data"
value="#{workSpaceBean.lazylpId}" widgetVar="multiSelection"
selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
liveScroll="true" scrollRows="15" scrollWidth="85%"
scrollHeight="69%" styleClass=".ui-datatable-hor-scroll"
tableStyle="table-layout:auto;width:100%;" scrollable="true"
filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">
<p:ajax event="rowSelect" listener="#{workSpaceBean.onRowSelect}"
update=":editWrkSp:display" oncomplete="multiDialog.show()" />
<p:column selectionMode="multiple" style="width:5%" />
.
.
.
<p:column headerText="Insured" filterBy="#{data.insuredName}"
sortBy="#{data.insuredName}" style="width:20%">
<h:outputText value="#{data.insuredName}" />
<!-- style="width:250px" -->
</p:column>
<p:column headerText="City" filterBy="#{data.custAddress_City}"
sortBy="#{data.custAddress_City}">
<h:outputText value="#{data.custAddress_City}" />
</p:column>
</p:dataTable>
</div>
</form>
整个页面的CSS
body {
margin: 0px 0px 0px 0px;
font-family: tahoma;
font-size: 11px;
background-color: #E8F0F8;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#header {
width: 100%;
height: 90px;
background-color: #194775;
position: fixed;
}
#sidepanel {
width: 180px;
height: 100%;
background-color: #D9E6F3;
margin-top: 90px;
position: fixed;
float: left;
border-right-style: solid;
border-width: 0.5px;
border-color: #4A7EBB;
/* z-index:1; */
}
#logo {
float: left;
position: absolute;
left: 5px;
}
#title {
position: absolute;
float: right;
/* padding-right: 10px;
padding-bottom:90px; */
right: 30px;
top: -25px;
/* bottom:10px; */
}
.title1 {
font-family: Agency FB;
font-size: 32px;
color: #7F7F7F;
font-style: bold;
/* float: right; */
text-align: left;
/* padding-right: 10px; */
font-weight: bold;
/* padding-bottom:20px; */
}
.accordionMenu .ui-accordion-header a {
background: #194775;
color: white;
}
.accordionMenu .ui-accordion-content {
/* color:#254061!important */
text-decoration: none;
background-color: #B9CDE5;
font-weight: bold;
padding: 5px 5px;
}
#content {
position: fixed;
margin: 90px 0 0 180px;
width: 100%;
height: 100%;
background-color: #E8F0F8;
}
.label {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #194775;
width: 170px;
/* text-align:left; */
padding: 4px 4px 4px 6px;
text-decoration: none;
margin-top: 1px;
}
.selectMenu {
/* float:right; */
margin-left: 20px;
margin-top: 15px;
}
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper
{
overflow: auto;
width: 100%;
height: 100% padding-bottom: 5px;
}
.datatable {
padding-left: 15px;
padding-right: 15px;
}
.calendarStyle {
width: 250px;
}
.ui-corner-top {
display: none;
}
.ui-chkbox-box ui-widget ui-corner-all ui-state-default {
/* vertical-align:middle; */
display: none;
}
最佳答案
至少在 PrimeFaces 5.1 中，您可以将滚动高度(和宽度)定义为容器的百分比。
来自文档(强调我的):
Scrolling has 3 modes; x, y and x-y scrolling that are defined by scrollHeight and scrollWidth. These two scroll attributes can be defined using integer values indicating fixed pixels or percentages relative to the container dimensions.
另请参阅(5.3 文档和来源):
关于css - 调整 primefaces 数据表大小，实时滚动屏幕大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20559593/