Amaze UI

Tree

树插件

基础用法


使用 Tree 插件时,需要设置一个 HTML 模板,然后使用 JS 初始化。

下面是必须的模板结构:

<ul class="am-tree">
  <!-- 包含子级的条目模板 -->
  <li class="am-tree-branch am-hide" data-template="treebranch">
    <div class="am-tree-branch-header">
      <button class="am-tree-branch-name">
        <span class="am-tree-icon am-tree-icon-folder"></span>
        <span class="am-tree-label"></span>
      </button>
    </div>
    <ul class="am-tree-branch-children"></ul>
    <div class="am-tree-loader">Loading...</div>
  </li>

  <!-- 不包含子级的条目模板 -->
  <li class="am-tree-item am-hide" data-template="treeitem">
    <button class="am-tree-item-name">
      <span class="am-tree-icon am-tree-icon-item"></span>
      <span class="am-tree-label"></span>
    </button>
  </li>
</ul>
var dataSource = function(parentData, callback){
  //...
};

$('#myTree').tree({dataSource: dataSource});

演示 1

    Copy
    <ul class="am-tree" id="firstTree">
      <li class="am-tree-branch am-hide" data-template="treebranch">
        <div class="am-tree-branch-header">
          <button class="am-tree-branch-name">
            <span class="am-tree-icon am-tree-icon-folder"></span>
            <span class="am-tree-label"></span>
          </button>
        </div>
        <ul class="am-tree-branch-children"></ul>
        <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
      </li>
      <li class="am-tree-item am-hide" data-template="treeitem">
        <button class="am-tree-item-name">
          <span class="am-tree-icon am-tree-icon-item"></span>
          <span class="am-tree-label"></span>
        </button>
      </li>
    </ul>
    
    <script>
    jQuery(function($) {
      // demo 1
      var data = [
        {
          title: '苹果公司',
          type: 'folder',
          products: [
            {
              title: 'iPhone',
              type: 'item'
            },
            {
              title: 'iMac',
              type: 'item'
            },
            {
              title: 'MacBook Pro',
              type: 'item'
            }
          ]
        },
        {
          title: '微软公司',
          type: 'item'
        },
        {
          title: 'GitHub',
          type: 'item',
          attr: {
            icon: 'am-icon-github'
          }
        }
      ];
    
      $('#firstTree').tree({
        dataSource: function(options, callback) {
          // 模拟异步加载
          setTimeout(function() {
            callback({data: options.products || data});
          }, 400);
        },
        multiSelect: false,
        cacheItems: true,
        folderSelect: false
      });
    
    });
    </script>
    

    演示 2

    Copy
    <ul class="am-tree" role="tree" id="myTree">
      <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
        <div class="am-tree-branch-header">
          <button class="am-tree-branch-name">
            <span class="am-tree-icon am-tree-icon-folder"></span>
            <span class="am-tree-label"></span>
          </button>
        </div>
        <ul class="am-tree-branch-children" role="group"></ul>
        <div class="am-tree-loader" role="alert">Loading...</div>
      </li>
      <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
        <button class="am-tree-item-name">
          <span class="am-tree-icon am-tree-icon-item"></span>
          <span class="am-tree-label"></span>
        </button>
      </li>
    </ul>
    
    <script>
    jQuery(function($) {
      // demo 2
      var $myTree = $('#myTree');
      $myTree.tree({
        dataSource: function(options, callback) {
          setTimeout(function() {
            callback({
              data: [
                {
                  title: 'Ascending and Descending',
                  type: 'folder',
                  attr: {
                    id: 'folder1'
                  }
                },
                {
                  title: 'Sky and Water I (with custom icon)',
                  type: 'item',
                  attr: {
                    id: 'item1',
                    icon: 'am-icon-file'
                  }
                },
                {
                  title: 'Drawing Hands',
                  type: 'folder',
                  attr: {
                    id: 'folder2'
                  }
                },
                {
                  title: 'Waterfall',
                  type: 'item',
                  attr: {
                    id: 'item2'
                  }
                },
                {
                  title: 'Belvedere',
                  type: 'folder',
                  attr: {
                    id: 'folder3'
                  }
                },
                {
                  title: 'Relativity (with custom icon)',
                  type: 'item',
                  attr: {
                    id: 'item3',
                    icon: 'am-icon-picture-o'
                  }
                },
                {
                  title: 'House of Stairs',
                  type: 'folder',
                  attr: {
                    id: 'folder4'
                  }
                },
                {
                  title: 'Convex and Concave',
                  type: 'item',
                  attr: {
                    id: 'item4'
                  }
                }
              ]
            });
          }, 400);
        },
        multiSelect: true,
        cacheItems: true,
        folderSelect: false
      }).on('loaded.tree.amui', function(e) {
        console.log('Loaded');
      }).on('selected.tree.amui', function(e, selected) {
        console.log('Select Event: ', selected);
        console.log($myTree.tree('selectedItems'));
      }).on('updated.tree.amui', function(e, selected) {
        console.log('Updated Event: ', selected);
        console.log($myTree.tree('selectedItems'));
      }).on('opened.tree.amui', function(e, info) {
        console.log('Open Event: ', info);
      }).on('closed.tree.amui', function(e, info) {
        console.log('Close Event: ', info);
      });
    });
    </script>
    

    文件夹可选择

    Copy
    <ul class="am-tree am-tree-folder-select" role="tree" id="myTreeSelectableFolder">
      <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
        <div class="am-tree-branch-header">
          <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span class="am-sr-only">Open</span></button>
          <button class="am-tree-branch-name">
            <span class="am-tree-icon am-tree-icon-folder"></span>
            <span class="am-tree-label"></span>
          </button>
        </div>
        <ul class="am-tree-branch-children" role="group"></ul>
        <div class="am-tree-loader" role="alert">Loading...</div>
      </li>
      <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
        <button class="am-tree-item-name">
          <span class="am-tree-icon am-tree-icon-item"></span>
          <span class="am-tree-label"></span>
        </button>
      </li>
    </ul>
    
    <script>
    jQuery(function($) {
      // demo 3
      $('#myTreeSelectableFolder').tree({
        dataSource: function(options, callback) {
          setTimeout(function() {
            callback({
              data: [
                {
                  title: 'Ascending and Descending',
                  type: 'folder',
                  attr: {
                    id: 'F1'
                  }
                },
                {
                  title: 'Drawing Hands',
                  type: 'folder',
                  attr: {
                    id: 'F2'
                  }
                },
                {
                  title: 'Belvedere',
                  type: 'folder',
                  attr: {
                    id: 'F3'
                  }
                },
                {
                  title: 'House of Stairs',
                  type: 'folder',
                  attr: {
                    id: 'F4'
                  }
                },
                {
                  title: 'Belvedere',
                  type: 'folder',
                  attr: {
                    id: 'F5'
                  }
                }
              ]
            });
          }, 400);
        },
        cacheItems: true,
        folderSelect: true,
        multiSelect: true
      });
    });
    </script>
    

    方法

    方法描述
    .tree('destroy')销毁 Tree 产生的数据
    .tree('selectedItems')返回包含选中条目的数组。
    .tree('selectItem', $('#itemId'))选中 $('#itemId') 条目(不包含子级的条目)。
    .tree('openFolder', $('#folderId'))打开指定文件夹。
    .tree('closeFolder', $('#folderId'))关闭指定文件夹。
    .tree('toggleFolder', $('#folderId'))交替文件夹状态。
    .tree('closeAll')关闭所有文件夹。
    .tree('discloseAll')展开所有文件夹。

    选项

    名称类型默认描述
    dataSourcefunction数据处理函数
    multiSelectbooleanfalse是否开启多选
    cacheItemsbooleantrue是否缓存已经渲染的选项
    folderSelectbooleantrue是否允许选择文件夹
    folderIconstringplus-square-o文件夹图标
    folderOpenIconstringminus-square-o文件夹打开图标
    itemIconstringangle-right条目图标
    itemSelectedIconstringcheck条目选中图标

    数据格式

    插件需要以对象数组的形式提供数据,数据格式如下:

    类型描述
    titlestring必需 节点标题
    typestring必需 节点类型 folderitem
    attrobject附加数据
    attr.classNamesstring添加到节点的类名
    attr.iconstring自定义图标的 class 名称
    attr.idstring

    自定义事件

    Event TypeDescription
    selected.tree.amuiFires when a user selects an item or folder. Returns an object containing an array of the selected items' jQuery data and the jQuery data of the triggering item. { selected: [array], target: [object] }
    deselected.tree.amuiFires when a user deselects an item or folder. Returns an object containing an array of the selected items' jQuery data and the jQuery data of the triggering item. { selected: [array], target: [object] }
    loaded.tree.amuiFires when sub-content has been is loaded. Returns the jQuery element of the folder loaded.
    updated.tree.amuiFires after selected.tree.amui and deselected.tree.amui events. Returns an object containing an array of selected items' jQuery data, the triggering jQuery element and the event type. { selected: [array], item: [object], eventType: [string] }
    disclosedFolder.tree.amuiFires when a user opens a folder. Returns an object containing the jQuery data of the opened folder.
    closed.tree.amuiFires when a user closes a folder. Returns an object containing the jQuery data of the closed folder.
    closedAll.tree.amuiFires when all folders have finished closing. Returns an object containing an array of closed folders' jQuery data and the tree's jQuery element. The length of reportedClosed will provide the number of folders closed. { reportedClosed: [array], tree: [$element] }
    disclosedVisible.tree.amuiFires when all visible folders have disclosed/opened. Returns an object containing an array of disclosed folders' jQuery data and the tree's jQuery element. The length of reportedOpened will provide the number of folders opened. { reportedOpened: [array], tree: [$element] }
    exceededDisclosuresLimit.tree.amuiFires when tree halts disclosing due to hitting discloserLimit cap. Returns an object containing { disclosures: [number], tree: [$element] }
    disclosedAll.tree.amuiFires when all folders have disclosed. It will not fire if tree stops disclosing due to hitting discloserLimit cap. Returns an object containing { disclosures: [number], tree: [$element] }

    所有事件在 .am-tree 上触发。

    $('#myTree').on('selected.tree.amui', function (event, data) {
      // do something with data: { selected: [array], target: [object] }
    });