树形菜单提供一种展示层级关系(例如文件系统目录)菜单的视图。

综合示例

下方展示了一个树形菜单,当一个链接包含一个子菜单时,通过点击链接左侧的图标可以展开内部子菜单。子菜单中的链接也可以包含另一个子菜单。

<ul class="tree" data-ride="tree">
  <li>
    <a href="#">水果</a>
    <ul>
      <li><a href="#">苹果</a></li>
      <li>
        <a href="#">热带水果</a>
        <ul>
          ...
        </ul>
      </li>
      <li><a href="#">梨子</a></li>
      ...
    </ul>
  </li>
  <li><a href="#">粥饭</a></li>
  ...
</ul>

外观选项

在层级菜单之间显示连接线

.tree-lines

<ul class="tree tree-lines" data-ride="tree">
  ...
</ul>

使用不同的图标

内置图标类型
<ul class="tree tree-lines" data-ride="tree">
  ...
</ul>
使用CSS来自定义图标
.tree-custom-icons > li > .list-toggle:before {content: '\e6dd'}
.tree-custom-icons > li.open > .list-toggle:before {content: '\e6df'}

启用动画效果

data-animate="true"

<ul class="tree tree-lines" data-animate="true" data-ride="tree">
  ...
</ul>

用法

调用方式

提供两种方式来使用树形菜单。

$('#tree').tree(options);

参数

可用参数如下:

参数 名称 可选值 说明
animate 动画效果
  • true 启用动画
  • false(默认) 禁用动画
initialState 初始状态
  • 'normal'(默认) 自动根据dom结构决定
  • 'expand' 全部展开
  • 'collapse' 全部折叠
当使用'normal'选项时,如果一个<li>标签包含class.open且包含内部子菜单则子菜单(不包括子菜单的子菜单)在初始化之后会展开显示,其他情况下则折叠显示。

参数可以在手动调用$().tree(options)方法时传入,或者以data-*=""形式指定。

方法

展开菜单
$('#tree').tree('expand', params);

params参数可选值如下:

折叠菜单
$('#tree').tree('collapse', params);

params参数可选值如下:

切换菜单
$('#tree').tree('toggle', params);

params参数可选值如下:

事件

事件 jquery事件名称 说明
expand expand.zui.tree 当菜单展开之后会触发此事件
collapse collapse.zui.tree 当菜单被折叠之后会触发此事件
// 通过jQuery方法绑定事件
$('#tree').on('expand.zui.tree', function(){...});

// 通过参数指定事件回调方法
$('#tree').tree({expand: function(){...}});