1

我正在使用https://wix.github.io/angular-tree-control/#multi-selection来处理树结构示例。我没有得到正确格式的预期结果。下面是代码，还附上了 plunkr给它。

 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
 <link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
 <link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
 </head>
 <div ng-app="app">
 <div ng-controller="myController">
 <treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
 </treecontrol>
 </div>
 </div>

  angular.module('app', ['treeControl'])
 .controller('myController', function() {
 $scope.treeOptions = {
 nodeChildren: "children",
 dirSelectable: true,
 injectClasses: {
    ul: "a1",
    li: "a2",
    liSelected: "a7",
    iExpanded: "a3",
    iCollapsed: "a4",
    iLeaf: "a5",
    label: "a6",
    labelSelected: "a8"
  }
 }
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
    { "name" : "Smith", "age" : "42", "children" : [] },
    { "name" : "Gary", "age" : "21", "children" : [
        { "name" : "Jenifer", "age" : "23", "children" : [
            { "name" : "Dani", "age" : "32", "children" : [] },
            { "name" : "Max", "age" : "34", "children" : [] }
        ]}
    ]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview
4

1 回答 1

2

我注意到缺少两件事：

  1. 缺少上下文菜单模块。
  2. 添加的 CSS 链接中没有rel="stylesheet"。

即使angular-tree-control 自述文件说：

如果要使用 menu-id 属性，请包括 context-menu 模块

我在他们的 GitHub 页面中发现了类似这样的问题，这是由于缺少上下文菜单模块。

添加以下行以包含上下文菜单模块：

<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>

还请更新链接元素以包含rel如下属性：

<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />

不需要像在 Plunker 中那样添加 CSS，它是上述链接的副本。

希望这可以解决您的问题。这是一个工作示例的完整代码：

angular.module('app', ['treeControl'])
  .controller('myController', ['$scope', function($scope) {
    $scope.treeOptions = {
      nodeChildren: "children",
      dirSelectable: true,
      injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
      }
    }
    $scope.dataForTheTree = [{
        "name": "Joe",
        "age": "21",
        "children": [{
            "name": "Smith",
            "age": "42",
            "children": []
          },
          {
            "name": "Gary",
            "age": "21",
            "children": [{
              "name": "Jenifer",
              "age": "23",
              "children": [{
                  "name": "Dani",
                  "age": "32",
                  "children": []
                },
                {
                  "name": "Max",
                  "age": "34",
                  "children": []
                }
              ]
            }]
          }
        ]
      },
      {
        "name": "Albert",
        "age": "33",
        "children": []
      },
      {
        "name": "Ron",
        "age": "29",
        "children": []
      }
    ];
  }]);
treecontrol.tree-classic li .full {
  display: none;
}

treecontrol.tree-classic li .empty {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .full {
  display: inline;
}

treecontrol.tree-classic li .tree-selected .empty {
  display: none;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
  <script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
  <link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body ng-app="app">
  <div ng-controller="myController">
    <treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
      <span class="fa fa-square-o empty"></span>
      <span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
    </treecontrol>
  </div>

</body>

</html>

2018 年 8月 10 日更新：编辑代码片段以使用 FontAwsome 添加复选框。

于 2018-08-09T07:46:48.997 回答