提取树内置过滤器以分离输入答案

【问题标题】：Extract Tree built-in filter to separate input提取树内置过滤器以分离输入
【发布时间】：2018-06-14 10:12:39
【问题描述】：

我目前正在使用 Primefaces 开发一个应用程序，并且最近开始使用 Tree 组件。它完全提供了我需要的功能，但是在对话框中使用它时遇到了一些问题。当有很多记录时，我必须用<p:outputPanel> 包围这棵树才能滚动。在我向该树组件添加过滤之前，一切都很好。由于包围面板，此过滤器输入文本出现在树的正上方，在此面板内部，当我向下滚动时，此过滤器输入位于顶部上方。

是否有可能我在整个面板上方手动添加过滤器输入并将其连接到树，就像在 PrimeFaces 的 DataTable 组件中所做的那样？尝试过这种方式，但它不起作用。下面是我的对话框的 .xhtml。任何帮助将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core">
    <p:dialog id="manageKnownDeviceDlg" header="#{msg['ip.usb.manageKnownDlg.Title']}" height="700"
              showEffect="explode" resizable="true" modal="true" appendTo="@(body)"
              width="700" widgetVar="manageKnownDeviceDlg" style="text-align: right;">
        <h:form id="manageKnownDialogForm" >
            <p:outputPanel style="width: 100%; max-height: 600px; min-height: 600px;height: 88%;overflow: auto;display: block; border: solid 1px;">
                <p:tree id="manageKnownDevicesTree" var="knownDevice" value="#{baseModel.usbDeviceDictTreeRoot}"
                        widgetVar="usbDeviceDictTree"
                        selectionMode="checkbox" selection="#{baseModel.usbDeviceDictSelected}"
                        filterBy="#{knownDevice}" filterMatchMode="contains" emptyMessage="#{msg['global.noData']}"
                        style="text-align: left; width: 98%;">
                    <p:treeNode>
                        <h:outputText value="#{knownDevice.toString()}"/>
                    </p:treeNode>
                </p:tree>
            </p:outputPanel>
            <br/>
            <h:panelGrid columns="1" style="position: absolute; right: 5px;">
                <h:panelGrid columns="5" style="margin-top: 10px;">
                    <p:commandButton value="#{msg['ip.usb.manageKnownDlg.Disable']}" update="manageKnownDevicesTree"
                                     actionListener="#{knownDevicesDlgController.unselectKnownDeviceClasses}" styleClass="vs-button"
                                     process="manageKnownDeviceDlg"/>
                    <p:commandButton value="#{msg['ip.usb.manageKnownDlg.YesToAll']}" update="manageKnownDevicesTree"
                                     actionListener="#{knownDevicesDlgController.selectAllDevices}" styleClass="vs-button"
                                     process="manageKnownDeviceDlg"/>
                    <p:commandButton value="#{msg['ip.usb.manageKnownDlg.NoToAll']}" update="manageKnownDevicesTree"
                                     actionListener="#{knownDevicesDlgController.unselectAllDevices}" styleClass="vs-button"
                                     process="manageKnownDeviceDlg"/>
                    <p:commandButton value="#{msg['global.ok']}" update="usbForm:usbDeviceTable,manageKnownDialogForm"
                                     onclick="PF('manageKnownDeviceDlg').hide();" process="manageKnownDeviceDlg" styleClass="vs-button"
                                     actionListener="#{knownDevicesDlgController.addKnownDevice}" style="text-align: right"/>
                    <p:commandButton value="#{msg['global.cancel']}" update="manageKnownDeviceDlg" styleClass="vs-button"
                                     onclick="PF('manageKnownDeviceDlg').hide();"/>
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </p:dialog>
</ui:composition>

【问题讨论】：

您可以尝试一些 (jquery) dom 操作以将 client-side html 过滤器移出面板...或尝试showcase.omnifaces.org/components/moveComponent
但更好的是，也许不使用 outputPanel 而是在 .ui-tree-container 上设置 max-height 已经解决了您的问题。我尝试在展示中将其设置为 70px，我在“节点”部分得到一个滚动条，并且过滤器保持在顶部
.ui-tree-container with max-height on 可以解决问题，太棒了！

标签： jsf primefaces

【解决方案1】：

在 ui-tree-container 上设置最大高度可以解决问题。在展示中使用它

.ui-tree-container {
    max-height: 70px;
}

结果

您可能希望向树中添加一个显式类并在选择器中使用它，这样它就不会应用于所有树。

【讨论】：

不客气。如您所见，并非所有事情都需要以“jsf”的方式解决。它到底是所有的html css等...