树形菜单插件Amazeui.tree.js/Amazeui.tree.css使用起来非常方便，但是对于初次使用它的人来说，确实有些困难，因为例子太少。对于本人，也是看很多遍源代码之后，才明白如何使用。今天，让我来记录下学习使用它的笔记，以供他人参考，也方便日后再次使用时可以快速找回记忆！

官方demo地址

这是官方提供的demo地址，http://amazeui.github.io/tree/docs/demo.html，可以说少得可怜，初次看根本看不懂如何使用。

树形菜单HTML代码是固定的

<!-- 树形菜单 -->
<ul class="am-tree am-tree-folder-select" role="tree" id="myTreeSelectableFolder" style="border: 1px solid #3bb4f2;height: 480px;overflow: auto;padding-left: 10px;padding-right: 10px;">
    <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>

通过JS动态生成树

其中menu_list是由服务器返回的json_encode过的对应格式的数组:

 $('#myTreeSelectableFolder').tree({
    dataSource: function(options, callback) {
        callback({
            data: options.columns || {$menu_list}
        });
    },
    cacheItems: true,
    folderSelect: true,
    multiSelect: false,
    itemIcon: 'file-o',
    itemSelectedIcon: 'file-o',
}).on('loaded.tree.amui', function(e) {
    //console.log('Loaded');
}).on('selected.tree.amui', function(e, selected) {
    var item = selected.target;
    var page_type = {$page_type};

   if (item.type == "folder") { // 点击文件夹
   
   } else { // 点击item项
   
   }
    //console.log('Select Event: ', selected);
}).on('updated.tree.amui', function(e, selected) {
    //console.log('Updated Event: ', selected);
    //console.log($('#myTreeSelectableFolder').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);
});

API方法

.tree(‘destroy’)

销毁 Tree 产生的数据。

.tree(‘selectedItems’)

返回包含选中条目的数组。

.tree(‘selectItem’, $(‘#itemId’))

选中 `$(‘#itemId’) 条目（不包含子级的条目）。

.tree(‘openFolder’, $(‘#folderId’))

打开指定文件夹。

.tree(‘closeFolder’, $(‘#folderId’))

关闭指定文件夹。

.tree(‘toggleFolder’, $(‘#folderId’))

交替文件夹状态。

.tree(‘closeAll’)

关闭所有文件夹。

.tree(‘discloseAll’)

展开所有文件夹。

数据格式

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

如何操作选中文件/文件夹

我们通过attr下的id属性来操作的，因此我们一定要保证这个id唯一。

如下，会找到第一个id为1的节点，并选中它：

$('#myTreeSelectableFolder').tree('selectItem', "#1");

承接：ThinkPHP项目开发、网站项目开发、微信项目开发、微信小程序项目开发、App开发，欢迎联系标哥QQ632840804