0

我是 angularjs 的新手，想实现一些hierarchy屏幕，用户可以在其中添加新组、子组，等等。（父/子层次结构）

像这样的东西

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

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

但我对此并不满意，因为我必须为所有节点（父/子）添加图像/头像，然后必须根据父节点为每个节点分配一些角色。但ui-tree没有任何程序来添加自定义节点或任何节点的子节点。

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

4

3 回答 3

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 链接 jsfiddle

于 2018-01-05T07:21:49.877 回答
1

我在类似的东西上推出了自己的解决方案。我不记得为什么我没有使用 ui-tree。我需要的是一种递归创建视图的方法，以便我可以模仿文件系统。 这是我校对时的笨拙。 这对您来说应该更简单，因为您没有像我那样尝试拆分文件和文件夹。

使用递归助手，我可以像这样声明我的数据结构：

$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);

我不能将递归助手作为它的核心。递归助手在这里 希望这会有所帮助。

于 2017-01-27T12:24:32.107 回答
1

很长一段时间..让我在这里发布我的解决方案..可能对其他人有帮助..

所以基本上我是在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>

这就是它的样子......

在此处输入图像描述

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

于 2018-01-10T10:00:43.437 回答