我有一个带有实时滚动功能的数据表.该表非常适合我的开发机器,但是这个应用程序的用户有更大的屏幕.如果数据表根据屏幕尺寸适合,那将是很好的.此外,数据表的高度应该调整为更多的行数用于实时滚动.目前我有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中,您可以将scrollHeight(和width)定义为容器的百分比.
从文档(强调我的):
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文档和来源):
> http://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf#165
> https://github.com/primefaces/primefaces/blob/5_3/src/main/resources/META-INF/resources/primefaces/datatable/datatable.js#L612