如何将zk树元素的open/close图标放在树元素的右边？

Question

我想知道，是否可以将 open/close 元素放在树单元格的右侧，如下面的屏幕截图所示？

Answer 1

非侵入性方法是基于 CSS 的方法，使用 display:flex 并为图标定义 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 冰蓝主题优化。

如何将zk树元素的open/close图标放在树元素的右边？

How to place open/close icon of zk tree elements to the right side from tree element?

java

zk

zul