angularjs 中的层次结构实现

Question

我是 angularjs 的新手，想实现一些 hierarchy 屏幕，用户可以在其中添加新组，child 到该组等等。（parent/child 层级）

像这样

1 Admin

1.1 -----User Admin

1.1.1 ----------Tech Support Admin

1.1.1.1 --------------------Tech Support Team

1.2 ----------Login Admin

1.2.1 --------------------Profiles

1.3 -----Client Admin

1.3.1 ----------Client 1

1.3.2 ----------Client 2

2 Users

2.1 -----User 1

2.2 -----User 2

2.3 -----User 3

我搜索了一些教程，我找到的与我的问题相关的唯一解决方案是 angular ui tree。

但我对此并不满意，因为我必须为所有节点 (parents/children) 添加 images/avatar，然后必须根据它们的 parent节点。但是 ui-tree 没有任何程序来添加自定义节点或任何节点的 child。

有没有更好的方法来做到这一点？任何形式的帮助将不胜感激。

Answer 1

我在类似的事情上推出了自己的解决方案。我不记得为什么我没有选择 ui-tree。我需要的是一种递归创建视图的方法，以便我可以模仿文件系统。 Here's the plunk from when I was proofing it out. 这对您来说应该更简单，因为您不会像我那样尝试拆分文件和文件夹。

借助递归助手，我能够像这样声明我的数据结构：

$scope.items = [
  new File('item1', '/item1', 11, false),
  new File('item2', '/item2', 22, true),
  new File('item3', '/item3', 33, false),
  new File('A Really Long File Name Should Go Here', '/item4', 44, false),
  new Folder('Folder 1', '/folder1', [new File('item5', '/item5', 55, false)], false)
];

我可以用这个渲染它：

<table class="table table-condensed table-responsive">
<tbody>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Size</th>
      <th></th>
    </tr>
    <tr ng-repeat="item in getFiles()">
      <td class="minWidth4px">
        <input type="checkbox" ng-model="item.isSelected" />
      </td>
      <td class="truncateName">
        {{item.name}}
      </td>
      <td class="minWidth4px">{{item.size}}mb</td>
      <td ng-show="item.canPreview()" class="minWidth4px">
        <button class="btn" ng-click="openPreview(item)">Preview</button>
      </td>
    </tr>
    <tr ng-repeat="item in getFolders()" ng-click="openFolder(item)">
      <td class="minWidth4px">
        <i ng-show="item.isOpen" class="fa fa-folder-open-o"></i>
        <i ng-hide="item.isOpen" class="fa fa-folder-o"></i>
      </td>
      <td colspan="3">
        <label>{{item.name}}</label>
        <attachments ng-show="item.isOpen" items="item.items"></attachments>
      </td>
    </tr>
  </tbody>
</table>

附件指令如下：

var attachmentsLink = function($scope) {
  $scope.openFolder = function(folder) {
    folder.isOpen = !folder.isOpen;
    console.log(folder);
  };

  $scope.getFiles = function() {
    return $scope.items.filter(function(x) {
      return x instanceof File;
    });
  };

  $scope.getFolders = function() {
    return $scope.items.filter(function(x) {
      return x instanceof Folder;
    });
  };
};

var attachmentsController = function($scope, previewService){
  $scope.openPreview = function(file) {
    previewService.preview = file;
    previewService.showPreview = true;
  };
};

var attachments = function(RecursionHelper) {
  return {
    compile: function(element) {
      return RecursionHelper.compile(element, attachmentsLink);
    },
    controller: attachmentsController,
    restrict: 'E',
    scope: {
      items:'=',
    },
    templateUrl: 'attachments.html'
  };
};

angular.module("app").directive("attachments", attachments);

我不能相信递归助手是它的核心。递归助手是 here 希望这有帮助。

Answer 2

为了实现以下结构，添加了属性名称 $parentNodesScope 以获取父索引，所以我添加了 {{this.$parentNodesScope.$parentNodesScope.$index+1}}. {{this.$parentNodesScope.$index+1}}. {{$index+1}} {{node.title}}

1 位管理员

1.1 -----用户管理

1.1.1 ------------技术支持管理员

1.1.1.1 --------------------技术支持团队

1.2 ----------登录管理员

1.2.1 ------------------配置文件

1.3 -----客户端管理员

1.3.1 ----------客户端 1

1.3.2 ----------客户端2

2 位用户

2.1 -----用户1

2.2 -----用户 2

2.3 -----用户 3

这是我的 jsfiddle link jsfiddle

Answer 3

Long time.. let me post my solution here..may be it helps someone else..

所以基本上我是在 angular-ui-tree 的帮助下完成的，并进行了一些自定义更改以添加头像和链接等。这里是 html 代码；

<div class="panel-body">
     <div class="col-sm-12">
        <div ui-tree id="tree-root" ng-if="data.length > 0" data-drop-enabled="false" data-drag-enabled="false" data-nodrop-enabled="true">
           <ol ui-tree-nodes ng-model="data">
              <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ></li>
           </ol>
        </div>
     </div>
  </div>

这是我的脚本；

<script type="text/ng-template" id="nodes_renderer.html">

 <div ui-tree-handle class="tree-node tree-node-content">

   <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
   class="glyphicon"
   ng-class="{
     'glyphicon-chevron-right': collapsed,
     'glyphicon-chevron-down': !collapsed
   }"></span></a>

   <a class="btn btn-xs" data-nodrag>
       <img ng-src="{{node.image}}" class="img-avatar" alt="Avatar" height="35" width="35"></a>
   {{node.title}}


   <div class="dropdown pull-right ">
       <a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" data-nodrag><span class="glyphicon glyphicon-th-list"></span></a>
       <div class="dropdown-content dropdown-menu" data-nodrag>
           <a ng-show = "flagCreateUserHierarchy" ng-click="btnAddUserClick(this)"><i class="fa fa-user"></i> Add User</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnEditClick(this)"><i class="fa fa-folder-open"></i> Edit</a>
           <a ng-show="{{node.type}} <2 && flagUpdateUserHierarchy" ng-click="btnEditGroupClick(this)"><i class="fa fa-folder-open"></i> Edit Group Name</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnDeleteHierarchy(this)"><i class="fa fa-ban"></i> Delete</a>
       </div>
   </div>

这就是它的样子...

如果有人需要理解，我可以进一步解释整个过程。

angularjs 中的层次结构实现

Hierarchy implementation in angularjs

hierarchical-data

angularjs

angular-ui-tree