使用Amaze UI Tree实现无限级分类

Amaze UI Tree是Amaze UI的一款jQuery树形插件最近我在做项目的时候使用了Amaze UI框架,做树形组织架构的时候找到了这款插件,由于组织架构是读取的钉钉部门列表,层级关系并不确定,研究了一下如何用这款插件来实现无限级分类。

简单说下实现方法和思路:

1.在 Amaze UI 样式之后引入 Tree 样式,然后在 jQuery 之后引入 Tree 插件。树形模板如下(这个是demo提供的模板,只修改了id为departmentTree):

<ul class="am-tree am-text-left" id="departmentTree">
    <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>
2.初始化Tree:
  $('#departmentTree').tree({
    dataSource: function(options, callback) {
      // 异步加载
      var url = '/admin/ding/departments/' + (options.id ? options.id : '');
      $.get(url,function(json) {
        var data = jQuery.parseJSON(json);
        callback({data: options.products || data});
      });
    },
    multiSelect: false,
    cacheItems: true,
    folderSelect: false
  });

实现思路如下:

此处url是调用了我后台的一个获取部门的API,路由如下:

Route::get('admin/dingding/departments/{pid?}','DingController@getDepartment')->name('ding.departments');

可见路由中有一个可选参数pid,在对应的后台方法中,如果获取到pid这个参数,表示请求选中部门的所有子部门,否则返回所有顶级部门。

var url = '/admin/ding/departments/' + (options.id ? options.id : '');

这里options.id的id是我后台返回的部门id,如果获取到options.id说明展开了某一部门,要请求获取子部门,否则不传参数,获取全部顶级部门。

一些坑:

Amaze UI Tree中有一个type属性用来判断是否有子节点,folder代表含有子节点,item代表该层级为最后一层。
在API中需要返回这个type属性。我在后台中定义了一个getSubDepartment方法用来查找是否含有子部门,然后返回相应的type。
$d['type'] = count($this->getSubDepartment($departments,$d['id'])) > 0 ? 'folder' : 'item';

最终效果如下: