调整primefaces数据表大小，实时滚动屏幕大小

Posted 2023-02-23

【中文标题】调整primefaces数据表大小，实时滚动屏幕大小

【英文标题】：To adjust primefaces datatable size,live scrolling with screen size

【发布时间】：2013-12-31 19:32:12

【问题描述】：

我有一个带有实时滚动功能的数据表。该表适合我的开发机器，但此应用程序的用户具有更大的屏幕。如果数据表适合屏幕尺寸，那就太好了。此外，数据表的高度应该通过更多的行数进行调整以进行实时滚动。目前我有 15 行用于实时滚动。如果滚动行随着屏幕高度的增加而增加会很好。请在这方面帮助我。

我的数据表代码sn-p：

 <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;

【问题讨论】：

你能给我们你的generetad html而不是你提供的吗？我之所以这么问，是因为我觉得这也可以使用 css 溢出属性来修复，并且需要构建一个具有 HTML 功能的fiddle 以确认这一点。

如果您在 css 部分使用 % 而不是像素，那不会相对于屏幕大小调整文档吗？

如果您想这样做，可以尝试使用 javascript。我想这就是你想要的：w3schools.com/jsref/met_win_resizeto.asp

查看文档。 scrollHeight="69%" 不正确。该属性只接收整数

【参考方案1】：

至少在 PrimeFaces 5.1 中，您可以将滚动高度（和宽度）定义为容器的百分比。

来自文档（重点是我的）：

滚动有 3 种模式； x, y 和 x-y 滚动定义为 滚动高度 和 滚动宽度。 这两个滚动属性可以使用表示固定像素或相对于容器尺寸的百分比的整数值来定义。

另请参阅（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