使用模板的PrimeNG TreeNodes的条件样式

时间:2018-06-12 09:44:29

标签: css angular primeng tree-nodes

我很清楚如何同时为所有节点设置样式但是如果节点是一个叶子(节点有子节点)但是没有父节点并且节点有父节点但是没有节点我需要添加一个样式儿童。 这是我的代码。

<p-tree [value]="nodes" layout="horizontal">
        <ng-template let-node pTemplate="default">
                <p>ADD CONTENT HERE</p>
        </ng-template>
    </p-tree>

检查一旦呈现的样式表明我需要为这两个条件中的每一个更改的类是ui-treenode

enter image description here

将类添加到styleClass的{​​{1}}属性可以为每个节点设置样式,但我无法在此处有条件地设置任何内容。 在模板中添加条件样式不能正常运行,因为p-tree呈现了我需要更改的样式。

我已多次阅读PrimeNG文档,但我没有找到任何解决方案。 是否存在某些内容或可能是可行的工作?

修改 Riscie提出了一个解决方案,但是在他的演示中添加的类比我需要改变的类更深。类pTemplate位于控制台窗口的顶部,自定义类ui-treenode位于控制台窗口底部的更深处。

enter image description here

那么为什么我需要改变那种特定的风格呢?因为它为节点添加了一些填充 - 我想在某些情况下删除它,而不是所有情况。

第二次编辑

这可能不是最好的方式,我不确定它的浏览器兼容性,但它按预期工作。

首先,在模板中的第一个div中添加id:leaf-style 其次,循环遍历ngAfterViewInit中的所有节点,按id获取节点,并使用类id="{{node.data.id}}"获取最接近的父节点,并根据条件添加类:

ui-treenode

1 个答案:

答案 0 :(得分:-1)

Map<String, String> env = new HashMap<>(); 
env.put("create", "true");
// locate file system by using the syntax 
// defined in java.net.JarURLConnection
URI uri = URI.create("jar:file:/codeSamples/zipfs/zipfstest.zip");
try (FileSystem zipfs = FileSystems.newFileSystem(uri, env)) {
    Path externalTxtFile = Paths.get("/codeSamples/zipfs/SomeTextFile.txt");
    Path pathInZipfile = zipfs.getPath("/SomeTextFile.txt");          
    // copy a file into the zip file
    Files.copy( externalTxtFile,pathInZipfile, 
                StandardCopyOption.REPLACE_EXISTING ); 
}

然后使用样式表中的<p-tree [value]="nodes" layout="horizontal"> <ng-template let-node pTemplate="default"> <p [class.leaf-style]="node.leaf" [class.no-leaf-style]="!node.leaf" > ADD CONTENT HERE </p> </ng-template> </p-tree> .leaf-style类。

<强>更新

应该有效: 请参阅:https://stackblitz.com/edit/primeng-xzmmf9