< 返回首页

标哥的笔记,是记录在日常学习技术和日常开发中那些年遇到过的坑!本站为新站,原"标哥的技术博客"中的文章会慢慢移到本站,欢迎收藏本站!
在使用本站过程中,有任何建议请联系标哥! 另,承接App开发、网站开发和微信小程序开发!欢迎联系我们


树形菜单插件

 作者:标哥    发布日期:2017-03-01 09:48    阅读量:1341次
 

树形菜单插件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’)

展开所有文件夹。

数据格式

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

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

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

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

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

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


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