Question

我的primefaces应用程序中有一个巨大的树组件。树有数百个节点，我希望树在我的UI中具有固定的高度，垂直滚动以导航节点。

有人可以帮我解决这个问题吗？感谢

Answer 1

将该树放在面板中，然后将样式应用于该面板。例如：

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

Answer 2

我使用p:scrollPanel

<p:scrollPanel style="height:450px;width:500px;">
    <p:tree ...>
    </p:tree>           
</p:scrollPanel>

Answer 3

p：scrollPanel效果不佳。

使用：p：layout

这是一个例子：

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

Answer 4

所以我找到了一种方法来完成这项工作。但是，我会事先承认这不是我梦寐以求的解决方案。但是后来我只有很多时间可以玩，因为这对我来说是一个宠物项目：

我创建了具有相同定义的表的两个实例，并使用了固定的标题宽度。然后我将每个表一个接一个地放在各个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>

我认为有帮助的是确保我在每列上设置宽度，这样我就可以确保在显示期间获得相同的列宽。我还将treedata设置为[]或为标题清空，因此我不会处理数据两次。这有点不优雅。我肯定希望将滚动直接添加到treetable，但时间不可用。

还要让表格本身滚动。使用类似的东西：

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

Answer 5

<p:tree value="#{bean.root}"
   style="width: 100%;height: 100px;overflow: auto;display: block">
      <p:treeNode>  
          <h:outputText value="#{doc}" />
      </p:treeNode>
</p:tree>`

PrimeFaces Tree可滚动固定大小

5 个答案: