Jsf 提取树内置过滤器以分离输入
我目前正在用Primefaces开发一个应用程序,最近开始使用树组件。它确实提供了我需要的功能,但在对话框中使用它时遇到了一些问题。当有很多记录,我必须围绕着这棵树,以便有滚动。在我将过滤添加到树组件之前,一切都很好。由于被包围的面板,这个过滤器输入文本出现在树的正上方,在这个面板的内部,当我向下滚动时,这个过滤器输入在顶部的左上方 是否有可能在整个面板上方手动添加一个过滤器输入,并将其连接到树,就像在PrimeFaces的DataTable组件中那样?用那种方法试过,但不起作用。下面是我的对话框的.xhtml。任何帮助都将不胜感激Jsf 提取树内置过滤器以分离输入,jsf,primefaces,Jsf,Primefaces,我目前正在用Primefaces开发一个应用程序,最近开始使用树组件。它确实提供了我需要的功能,但在对话框中使用它时遇到了一些问题。当有很多记录,我必须围绕着这棵树,以便有滚动。在我将过滤添加到树组件之前,一切都很好。由于被包围的面板,这个过滤器输入文本出现在树的正上方,在这个面板的内部,当我向下滚动时,这个过滤器输入在顶部的左上方 是否有可能在整个面板上方手动添加一个过滤器输入,并将其连接到树,就像在PrimeFaces的DataTable组件中那样?用那种方法试过,但不起作用。下面是我的对话
<!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>
在ui树容器上设置最大高度可以解决此问题。在showcase中使用此选项
.ui-tree-container {
max-height: 70px;
}
导致
您可能希望向树添加一个显式类,并在选择器中使用该类,这样它就不会应用于所有树。您可以尝试一些jquery dom操作,将客户端html过滤器移出面板。。。或者尝试,但更好的是,可能不使用outputPanel,但在.ui树容器上设置最大高度已经解决了您的问题。我在showcase中尝试将其设置为70px,我在“节点”部分得到一个滚动条,过滤器保持在顶部。启用“最大高度”的ui-tree-container实现了这一点,太棒了!不客气。如您所见,并非所有问题都需要以“jsf”的方式解决。它最终都是html css等。。。