调整PrimeFaces数据表格大小,实时滚动与屏幕尺寸同步

8

我有一个带有实时滚动功能的数据表。该表在我的开发机器上适合,但是应用程序的用户有更大的屏幕。如果数据表能够根据屏幕大小进行调整就好了。此外,数据表的高度应该随着实时滚动的行数增加而调整。目前,我有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;
}

1
你能提供你生成的HTML而不是你提供的那个吗?我之所以这样问,是因为我感觉这也可以通过css overflow属性来解决,并且需要建立一个带有函数HTML的fiddle来确认。 - Matheus
如果在CSS部分使用%而不是像素,那么文档会根据屏幕大小进行调整,对吗? - Brendan
如果你想这样做,可以尝试使用JavaScript。我认为这就是你想要的:http://www.w3schools.com/jsref/met_win_resizeto.asp - Brendan
请查阅文档。scrollHeight="69%" 不正确。该属性只接受整数。 - Aditzu
1个回答

3
在至少PrimeFaces 5.1中,您可以将scrollHeight(和width)定义为容器的百分比。
从文档中可以看出(我强调):
滚动有3种模式; x,y和x-y滚动,这些由scrollHeight和scrollWidth定义。这两个滚动属性可以使用整数值指定固定像素或相对于容器尺寸的百分比来定义。
另请参阅(5.3文档和源代码):

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接