非侵入性方式是使用display:flex
的基于CSS的方法,并为图标和一些order
调整定义margin-left
:
<zk>
<style>
.z-treecell:first-child .z-treecell-content {
display: flex;
}
.z-treecell:first-child .z-tree-icon {
order: 1; /*order it to the right*/
}
.z-treecell:first-child .z-tree-icon+.z-treecell-text {
margin-left: 24px; /*this value might need adjustment based on the theme*/
}
</style>
<tree>
<treechildren>
<treeitem label="item 1"/>
<treeitem label="item 2">
<treechildren>
<treeitem label="item 2.1">
<treechildren>
<treeitem label="item 2.1.1"/>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
</zk>
这里运行的example on zkfiddle与zk 7.0.0+兼容,针对8.5.2.1优化了iceblue主题。