我的 primefaces 应用程序中有一个巨大的树组件。树有数百个节点，我希望树在我的 UI 中具有固定高度，并通过垂直滚动来导航节点。
有人可以帮我解决这个问题吗？ 谢谢
【问题讨论】：
scrollable和scrollHeight属性吗？您正在使用的代码在哪里？
标签： primefaces tree scroll
将该树放入面板中，然后将样式应用于该面板。例如：
<p:outputPanel style="width: 100%;height: 100px;overflow: auto;display: block">
<p:tree value="#{bean.root}">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>
</p:outputPanel>
【讨论】：
我用p:scrollPanel
<p:scrollPanel style="height:450px;width:500px;">
<p:tree ...>
</p:tree>
</p:scrollPanel>
【讨论】：
h:form、div、p:outputPanel，但只有p:scrollPanel 对我有用（我的代码与父注释中的代码仅在高度和宽度值上有所不同）。它适用于mode=default 和mode=native。
p:scrollPanel 不能正常工作。
使用：p:布局
这里是一个例子：
<p:layout style="max-width:800px;min-height:300px;width:800px;height:300px;">
<p:layoutUnit position="north">
<p:panelGrid columns="2" columnClasses="label,value"
style="text-align:left;">
<p:outputLabel value="Nombre:" for="nombre" />
<p:outputLabel id="nombre"
value="#{segPerfilBean.currentObject.segPerNombre}"
title="Nombre" />
</p:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:panelGrid id="catalogContent" style="width: 100%;">
<p:tree value="#{segPerfilBean.rootOpciones}" var="doc"
disabled="true" readOnly="true" selectionMode="checkbox"
selection="#{segPerfilBean.selectedNodes}"
style="width:100%;height:100%;">
<p:treeNode type="perfil">
<h:outputText value="#{doc.segPerNombre}" />
</p:treeNode>
<p:treeNode type="modulo">
<h:outputText value="#{doc.segModNombre}" />
</p:treeNode>
<p:treeNode type="opcion">
<h:outputText value="#{doc.segOpcNombre}" />
</p:treeNode>
</p:tree>
</h:panelGrid>
</p:layoutUnit>
</p:layout>
【讨论】：
<p:tree value="#{bean.root}"
style="width: 100%;height: 100px;overflow: auto;display: block">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>`
【讨论】：
所以我找到了一种方法来完成这项工作。但是，我会提前承认这不是我梦寐以求的解决方案。但是我只有这么多时间玩，因为这对我来说有点像宠物项目：
我创建了两个具有相同定义并使用固定标题宽度的表实例。然后我将每个表一个接一个地放在单独的 div 中。然后我为这些 div 设置样式：
#header {
height: 24px;
}
#body thead {
display: none;
}
然后我在下面有一个简单表格和 div 的示例：
<div id="header">
<p-treeTable [value]="[]">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
<div id="body">
<p-treeTable [value]="treedata">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
我认为有助于确保我设置每列的宽度，以便我可以确保在显示期间获得相同的列宽。我还将标题的树数据设置为 [] 或为空，因此我不会两次处理数据。这有点不雅。而且我肯定希望将滚动直接添加到树表，但时间不可用。
还要让表格本身滚动。使用类似的东西：
.ui-treetable-tablewrapper {
overflow-y: scroll;
height: 290px;
}
注意：我不知道如何获得高度，所以一行不会被剪裁。看起来展开行的行高与未展开行的行高不同。
如果你把它放在一个带页脚且没有填充的引导面板中，它看起来不错，尽管并不完美：
<div class="panel panel-default">
<div class="panel">
<div class="panel-heading">
...header...
</div>
<div class="panel-body" style="{ padding: '0' }">
...Table...
</div>
<div class="panel-footer">
<div class="row">
....footer...
</div>
<div>
</div>
【讨论】：