首页 > 解决方案 > 如何将zk树元素的打开/关闭图标从树元素放在右侧?

问题描述

我想知道,是否可以将打开/关闭元素放置在树单元的右侧,如下面的屏幕截图所示?

在此处输入图像描述

标签: javazkzul

解决方案


一种非侵入性的方式是一种基于 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>

这是与 zk 7.0.0+ 兼容的 zkfiddle上运行的示例,针对具有冰蓝主题的 8.5.2.1 进行了优化。


推荐阅读