Wie man über Node var in der Primefaces-Struktur iteriert, um Icons in der CSS-Klasse von DB

Question

zu setzen Ich verwende PF V. 5.3.5 und JSF v. 2.2.8.

<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree"> 
       <p:treeNode icon=""> 

Meine CSS-Klasse ist unten:

.ui-treenode-icon{ 
    background: url("#{node.leafIcon}") no-repeat top !important; 
} 

Ich sehe das gleiche Symbol in jedem treeNode, dass es nicht erwünscht ist. Dieses Symbol ist für den letzten treeNode in der Struktur. Allerdings möchte ich durch sie iterieren, dass jeder TreeNode sein eigenes Symbol hat.

HINWEIS Die Baumgröße ist in jeder Umgebung unterschiedlich und wird dynamisch erstellt. Wie kann ich das bitte machen?

Bitte beachten Sie die aktuelle PF-Version here. Die gewünschte Icefaces-Version ist here.

Vielen Dank im Voraus.

Answer 1

ohne css GELÖST

ich durch Einfügen eines h gelöst: graphicImage innen treeNode ohne Facette. es jetzt wie ich es brauchte und wie es in der vorherigen Version gemacht wurde.

<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree" 
          selectionMode="checkbox"> 
    <p:treeNode> 
     <h:graphicImage value="#{node.leafIcon}" /> 
     <h:outputText value="#{node.text}" /> 
    </p:treeNode> 
</p:tree> 

Answer 2

In der Api-Dokumentation (http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml -> Dokumentation Tab) es sagt man es so tun könnte:

<p: tree value="#{bean.root}" var="doc"> 
    <p:treeNode type="mp3" icon="ui-icon ui-icon-video"> 
     <h:outputText value="#{doc.name}" /> 
    </p:treeNode> 
    <p:treeNode type="document" icon="ui-icon ui-icon-image-document"> 
     <h:outputText value="#{doc.name}" /> 
    </p:treeNode> 
</p:Tree> 

in dem Träger Bean so dass Sie dem Knoten einen Namen zu geben, was das sein wird, p: BaumNode-Typ. Also soweit ich

TreeNode mp3 = new TreeNode("mp3", "some music"); 

tun würde, die Verknüpfung für

<p:treeNode type="mp3" ... /> 

verstehen Lassen Sie mich wissen, ob es geholfen.

Prost kyhu :)

Answer 3

unterschiedliche Werte für jedes Element mit einer CSS-Klasse zu haben, ist nicht möglich. Sie müßten eine Klasse für jedes Symbol erstellen, etwa so:

my-treenode-icon-1 { 
    background: url("/resources/img/treenode/icon-1.jpg") no-repeat top !important; 
} 
my-treenode-icon-2 { 
    background: url("/resources/img/treenode/icon-2.jpg") no-repeat top !important; 
} 

und dann in Namen Verwendung Symbol Iteration statt Pfad (wenn Sie einen Pfad in der Datenbank haben, können Sie die letzten Teil davon in Scheiben schneiden und nehmen nur die Bildname, der Klassenname sein wird).

<p:tree value="#{userFiltersBean.objectsTreeModel}" var="node" hideRootNode="true" styleClass="filtersTree"> 
       <p:treeNode icon="my-treenode-#{node.iconName}">