angular-tree-control

2018-07-13 admin

angular-tree-control是什么

什么是angular-tree-control,Angular Tree Control

angular-tree-control介绍、angular-tree-control使用

</script>

<!-- Include context-menu module if you’re going to use menu-id attribute --> <script type=“text/javascript” src="/context-menu.js"></script>

<!-- link for CSS when using the tree as a Dom element --> <link rel=“stylesheet” type=“text/css” href=“css/tree-control.css”>

<!-- link for CSS when using the tree as an attribute --> <link rel=“stylesheet” type=“text/css” href=“css/tree-control-attribute.css”>


Add a dependency to your application module.

```source-js
angular.module('myApp', ['treeControl']);

Add tree elements to your Angular template

<!-- as a Dom element -->
<treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</treecontrol>
<!-- as an attribute -->
<div treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</div>

and add the data for the tree

$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" : [] }
];

Usage

Attributes of angular treecontrol

  • treecontrol : the treeview element.
  • element content : the template to evaluate against each node (and the parent scope of the tree) for the node label.
  • tree-model : [Node|Array[Node]] the tree data on the $scope. This can be an array of nodes or a single node.
  • selected-node : [Node], used when multiSelection=false. Binding for the selected node in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.
  • selected-nodes : [Array[Node]], used when multiSelection=true. Binding for the selected nodes in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.
  • expanded-nodes : [Array[Node]] binding for the expanded nodes in the tree. Updating this value updates the nodes that are expanded in the tree.
  • on-selection : (node, selected) callback called whenever selecting a node in the tree. The callback expression can use the selected node (node) and a boolean which indicates if the node was selected or deselected (selected).
  • on-node-toggle : (node, expanded) callback called whenever a node expands or collapses in the tree. The callback expression can use the toggled node (node) and a boolean which indicates expansion or collapse (expanded).
  • on-right-click : (node) callback called whenever a node is right-clicked.
  • options : different options to customize the tree control.
    • multiSelection : [Boolean] enable multiple nodes selection in the tree.
    • nodeChildren : the name of the property of each node that holds the node children. Defaults to ‘children’.
    • dirSelectable : are directories (nodes with children) selectable? If not, clicking on the dir label will expand and contact the dir. Defaults to true.
    • allowDeselect : are nodes deselectable? If not, clicking on the label will not deselect node. Defaults to true.
    • equality : the function used to determine equality between old nodes and new ones when checking whether a replacement node should be expanded and/or marked as selected. Defaults to a function which uses angular.equals() on everything except the property indicated in nodeChildren.
    • isLeaf : function (node) -> boolean used to determine if a node is a leaf or branch. The default function checks for existence of children of the node to determine leaf or branch.
    • injectClasses : allows to inject additional CSS classes into the tree DOM
      • ul : inject classes into the ul elements
      • li : inject classes into the li elements
      • liSelected : inject classes into the li elements only when the node is selected
      • iExpanded : inject classes into the ‘i’ element for the expanded nodes
      • iCollapsed : inject classes into the ‘i’ element for the collapsed nodes
      • iLeaf : inject classes into the ‘i’ element for leaf nodes
      • label : inhject classes into the div element around the label
      • labelSelected : inject classes into the div element around the label only when the node is selected
  • order-by : value for ng-repeat to use for ordering sibling nodes
  • reverse-order : whether or not to reverse the ordering of sibling nodes based on the value of order-by
  • filter-expression : value for ng-repeat to use for filtering the sibling nodes
  • filter-comparator : value for ng-repeat to use for comparing nodes with the filter expression
  • menu-id : the id of an ul element which will be displayed after a right-click

The tree labels

The Angular Tree control uses a similar paradigm to ng-repeat in that it allows using the current node as well as values from the parent scope. The current node is injected into the scope used to render the label as the node member (unlike ng-repeat, we do not allow to name the current node item in the transcluded scope).

In order to render a template that takes a value X from the parent scope of the tree and value Y from the current node, use the following template {{X}} {{node.Y}}

Styling

The angular-tree-control renders to the following DOM structure

<treecontrol class="tree-classic">
  <ul>
    <li class="tree-expanded">
      <i class="tree-branch-head"></i>
      <i class="tree-leaf-head"></i>
      <div class="tree-label">
         ... label - expanded angular template is in the treecontrol element ...
      </div>
      <treeitem>
        <ul>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label tree-selected">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
        </ul>
      </treeitem>
    </li>
  </ul>

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35937.html

文章标题:angular-tree-control

回到顶部