ng2-tree

【转】https://github.com/valor-software/ng2-tree#eyes-demo

?? ng2-tree

ng2-tree is a simple Angular 2 component for visualizing data that can be naturally represented as a tree.

?? Usage

Ok, let‘s start with an installation - all you need to do is:

npm install --save ng2-tree

Now when you have ng2-tree installed, you are in a few steps from having tree in your application:

  1. Add the TreeModule to your application‘s module imports section:
import { NgModule } from ‘@angular/core‘;
import { AppComponent } from ‘./app.component‘;
import { BrowserModule } from ‘@angular/platform-browser‘;
import { TreeModule } from ‘ng2-tree‘;

@NgModule({
  declarations: [MyComponent],
  imports:      [BrowserModule, TreeModule],
  bootstrap:    [MyComponent]
})
export class MyModule {
}
  1. As soon as the previous step is done we need to give ng2-tree a model to render - this can be accomplished by populating its [tree] attribute with an object that conforms to the TreeModel interface (see API):
// 1 - import required classes and interfaces
import { TreeModel } from ‘ng2-tree‘;

@Component({
  selector: ‘myComp‘,
  // 2 - set [tree] attribute to tree object
  template: `<tree [tree]="tree"></tree>`
})
class MyComponent {
  // 3 - make sure that tree object conforms to the TreeModel interface
  public tree: TreeModel = {
    value: ‘Programming languages by programming paradigm‘,
    children: [
      {
        value: ‘Object-oriented programming‘,
        children: [
          {value: ‘Java‘},
          {value: ‘C++‘},
          {value: ‘C#‘},
        ]
      },
      {
        value: ‘Prototype-based programming‘,
        children: [
          {value: ‘JavaScript‘},
          {value: ‘CoffeeScript‘},
          {value: ‘Lua‘},
        ]
      }
    ]
  };
}
  1. Apart from that, in order to have usable tree in the browser, you need to add ng2-tree styles which you can find in your node_modules/ng2-tree/styles.css
  2. And finally, I suppose, you‘d want to listen to events generated by ng2-tree (for a full list of supported events look at the API). No problem, this is also easy to do - for example let‘s add a listener for node was selected kind of events:
// 1 - import required classes and interfaces
import { TreeModel, NodeEvent } from ‘ng2-tree‘;

@Component({
  selector: ‘myComp‘,
  // 2 - listent for nodeSelected events and handle them
  template: `<tree [tree]="tree" (nodeSelected)="logEvent($event)"></tree>`
})
class MyComponent {
  public tree: TreeModel = { ... };

  // 3 - print caught event to the console
  public logEvent(e: NodeEvent): void {
    console.log(e);
  }
}

Voila! That‘s pretty much it - enjoy ??

?? Demo

Feel free to examine the demo and its sources to find out how things are wired. Also there is another demo built with Angular CLI.

?? API

Here is the fully stuffed tree tag that you can use in your templates:

    <tree
      [tree]="tree"
      [settings]="settings"
      (nodeRemoved)="handleRemoved($event)"
      (nodeRenamed)="handleRenamed($event)"
      (nodeSelected)="handleSelected($event)"
      (nodeMoved)="handleMoved($event)"
      (nodeCreated)="handleCreated($event)">
    </tree>

Let‘s go through every element of this structure one by one.

tree

tree is the selector for TreeComponent which is bundled into TreeModule:

[tree]

tree has a [tree] attribute which needs to be populated with an object implementing TreeModel interface. You can import this interface like below:

import { TreeModel } from ‘ng2-tree‘;

Here is the definition of the TreeModel interface:

interface TreeModel {
  value: string | RenamableNode;
  children?: Array<TreeModel>;
  loadChildren?: ChildrenLoadingFunction;
  settings?: TreeModelSettings;
}

As you can see - object that conforms to this interface has a recursive nature, example can be seen below:

{
    value: ‘Programming languages by programming paradigm‘,
    children: [
      {
        value: ‘Object-oriented programming‘,
        children: [
          {value: ‘Java‘},
          {value: ‘C++‘},
          {value: ‘C#‘},
        ]
      },
      {
        value: ‘Prototype-based programming‘,
        children: [
          {value: ‘JavaScript‘},
          {value: ‘CoffeeScript‘},
          {value: ‘Lua‘},
        ]
      }
    ]
  }

Property value can be of type string or RenamableNode. RenamableNode gives you an additional control over the way node is renamed and rendered (by rendered I mean its text representation). Here is the definition of the RenamableNode interface:

interface RenamableNode {
  // This method will be invoked in order to apply new value to this kind of node
  setName(name: string): void;

  // This method will be invoked in order to get a text for rendering as a node value
  toString(): string;
}

Here is an example of such a node in the TreeModel object:

{
    value: ‘Programming languages by programming paradigm‘,
    children: [
      {
        value: ‘Object-oriented programming‘,
        children: [
          {
            // I am a RenamableNode. Yeah, that‘s me :)
            value: <RenamableNode>{
              name: ‘Java‘,
              setName(name: string): void {
                this.name = name;
              },
              toString(): string {
                return this.name;
              }
            }
          },
          {value: ‘C++‘},
          {value: ‘C#‘},
        ]
      },
      {
        value: ‘Prototype-based programming‘,
        loadChildren: (callback) => {
          setTimeout(() => {
            callback([
              {value: ‘JavaScript‘},
              {value: ‘CoffeeScript‘},
              {value: ‘TypeScript‘},
            ]);
          }, 5000);
        }
      }
    ]
  };

Load children asynchronously

Another worth noting thing is loadChildren. This function on TreeModel allows you to load its children asynchronously.

{
  value: ‘Prototype-based programming‘,
  loadChildren: (callback) => {
    setTimeout(() => {
      callback([
        {value: ‘JavaScript‘},
        {value: ‘CoffeeScript‘},
        {value: ‘TypeScript‘},
      ]);
    }, 5000);
  }
}

Node that defines this function is collapsed by default. At the moment of clicking ‘Expand‘ arrow it starts loading its children by calling given function. If loadChildren function is given to the node - children property is ignored. For more details - have a look at the Demo.

Configure node via TreeModelSettings

Apart from that TreeModel interface has an optional field called settings of type TreeModelSettings.

Here is an example of its usage:

{
  value: ‘Prototype-based programming‘,
  settings: {
    ‘static‘: true
  },
  children: [
    {value: ‘JavaScript‘},
    {value: ‘CoffeeScript‘},
    {value: ‘Lua‘},
  ]
}

Right now only one option is supported - static. This option makes it impossible to drag a tree or modify it in a some way, though you still can select nodes in the static tree and appropriate events will be generated. static option that‘s defined on a parent is automatically applied to its children. If you don‘t want to make static all the children, then you can override settings of the child node.

[settings]

Object that should be passed to [settings] must be of type Ng2TreeSettings. This attribute is optional. Right now only one setting is available in there - rootIsVisible. This setting allows you to make a root node of the tree invisible:

const treeSettings: Ng2TreeSettings = {
  rootIsVisible: false
}

By default rootIsVisible equals to true

Tree class

Also in the next section you‘ll be reading about events generated by the ng2-tree. And here Tree class comes in handy for us, because its instances propagated with event objects. Under the hood ng2-tree wraps a TreeModel provided by the user in Tree. And Tree in turn has lots of useful methods and properties (like parent, hasChild(), isRoot() etc.)

events (nodeMoved, nodeSelected, nodeRenamed, nodeRemoved, nodeCreated)

Here is the diagram that shows tree events‘ hierarchy

NodeEvent is the root of the tree events‘ hierarchy. It defines property node that contains a receiver of the event action (node is an instance of the Tree class).

NodeDestructiveEvent is the parent for all events that cause changes to the structure of the tree or to the node‘s value.

NodeSelectedEvent

You can subscribe to the NodeSelectedEvent by attaching listener to the (nodeSelected) attribute

    <tree
      [tree]="tree"
      (nodeSelected)="handleSelected($event)">
    </tree>

NodeSelectedEvent has just one property node which contains a Tree object representing selected node.

{node: <Tree>{...}}

NodeMovedEvent

You can subscribe to NodeMovedEvent by attaching listener to (nodeMoved) attribute

    <tree
      [tree]="tree"
      (nodeMoved)="handleMoved($event)">
    </tree>

NodeMovedEvent has two properties node and previousParent both of which contain Tree objects:

  • node contains a moved node;
  • previousParent contains a previous parent of the moved node;
{node: <Tree>{...}, previousParent: <Tree>{...}}

NodeRemovedEvent

You can subscribe to NodeRemovedEvent by attaching listener to (nodeRemoved) attribute

    <tree
      [tree]="tree"
      (nodeRemoved)="handleRemoved($event)">
    </tree>

NodeRemovedEvent has a node property, which contains removed node (of type Tree).

{node: <Tree>{...}}

NodeCreatedEvent

You can subscribe to NodeCreatedEvent by attaching listener to (nodeCreated) attribute

    <tree
      [tree]="tree"
      (nodeCreated)="handleCreated($event)">
    </tree>

NodeCreatedEvent has a node property of type Tree, which contains a created node.

{node: <Tree>{...}}

NodeRenamedEvent

You can subscribe to NodeRenamedEvent by attaching listener to (nodeRenamed) attribute

    <tree
      [tree]="tree"
      (nodeRenamed)="handleRenamed($event)">
    </tree>

NodeRenamedEvent has three properties:

  • node contains node that was renamed (instance of Tree).
  • oldValue contains a value, that node used to have (it might be string or RenamableNode)
  • newValue contains a new value of the node (it might be string or RenamableNode)
{
  node: <Tree>{...},
  oldValue: <string|RenamableNode>{...},
  newValue: <string|RenamableNode>{...}
}

Changes that should be taken into account in order to migrate from ng2-tree V1 to ng2-tree V2

  • Events were reworked:

    • In V1 all events that were inherited from NodeDestructiveEvent used to have property parent. It‘s not the case anymore. If you need a parent you should get it from node in event object like node.parent;
    • All events used to have node property of type TreeModel. Now node is of type Tree (as well as node.parent);
    • NodeMovedEvent now has property previousParent, which contains tree in which moved node used to be.
  • CSS styles in ng2-tree V2 are distributed as separate file which you can find in node_modules/ng2-tree/styles.css. That allows you to override ng2-tree styles more easely.
时间: 2024-10-27 17:39:46

ng2-tree的相关文章

easyui js取消选中 Tree 指定节点

取消所有选中 var rootNodes = treeObject.tree('getRoots'); for ( var i = 0; i < rootNodes.length; i++) { var node = treeObject.tree('find', rootNodes[i].id); treeObject.tree('uncheck', node.target); }

Maximum Depth of Binary Tree

这道题为简单题 题目: Given a binary tree, find its maximum depth.The maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node. 思路: 我是用递归做的,当然也可以用深搜和广搜,递归的话就是比较左右子树的深度然后返回 代码: 1 # Definition for a binary tre

538. Convert BST to Greater Tree 二叉搜索树转换为更大树

Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original BST is changed to the original key plus sum of all keys greater than the original key in BST. Example: Input: The root of a Binary Search Tree like thi

SPOJ375 Query on a tree

https://vjudge.net/problem/SPOJ-QTREE 题意: 一棵树,每条边有个权值 两种操作 一个修改每条边权值 一个询问两点之间这一条链的最大边权 点数<=10000 多组测试数据,case<=20 Example Input: 1 3 1 2 1 2 3 2 QUERY 1 2 CHANGE 1 3 QUERY 1 2 DONE Output: 1 3 #include<cstdio> #include<iostream> #include&

POJ 1741 Tree(树的点分治,入门题)

Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21357   Accepted: 7006 Description Give a tree with n vertices,each edge has a length(positive integer less than 1001).Define dist(u,v)=The min distance between node u and v.Give an in

命令-tree

tree命令 tree - list contents of directories in a tree-like format. 显示目录的层级结构: tree 命令英文理解为树的意思,其功能是创建文件列表,将目录所有文件以树状的形式列出来.linux中的tree命令默认并不会安装,所以需要通过yum install tree -y来安装此命令. [SYNOPSIS] tree [options] [directory] [OPTIONS] -L level:指定要显示的层级: -d:仅列出目

[LeetCode] Find Mode in Binary Search Tree 找二分搜索数的众数

Given a binary search tree (BST) with duplicates, find all the mode(s) (the most frequently occurred element) in the given BST. Assume a BST is defined as follows: The left subtree of a node contains only nodes with keys less than or equal to the nod

226反转二叉树 Invert Binary Tree

Invert a binary tree. 4 / 2 7 / \ / 1 3 6 9 to 4 / 7 2 / \ / 9 6 3 1 Trivia:This problem was inspired by this original tweet by Max Howell: Google: 90% of our engineers use the software you wrote (Homebrew), but you can't invert a binary tree on a wh

[hihoCoder#1381]Little Y&#39;s Tree

[hihoCoder#1381]Little Y's Tree 试题描述 小Y有一棵n个节点的树,每条边都有正的边权. 小J有q个询问,每次小J会删掉这个树中的k条边,这棵树被分成k+1个连通块.小J想知道每个连通块中最远点对距离的和. 这里的询问是互相独立的,即每次都是在小Y的原树上进行操作. 输入 第一行一个整数n,接下来n-1行每行三个整数u,v,w,其中第i行表示第i条边边权为wi,连接了ui,vi两点. 接下来一行一个整数q,表示有q组询问. 对于每组询问,第一行一个正整数k,接下来一

1020. Tree Traversals (25) PAT甲级真题

之前我看了这道题,实在是看不懂网上的解题答案,他们的具体思路基本上就是通过后续遍历和中序遍历,直接推出层次遍历. 我苦思冥想了半天,是在没看懂这种思路,于是想了一个笨点的但是也比较好理解的思路,通过后续和中序,先推出整个二叉树,再考虑 对二叉树层次遍历. 本题还有一点要注意的时在输出结果的末尾,如果使用了类似 pirntf("%d ",data); 这样的格式是不对的,一定要对末尾进行判断消除最尾端的空格. 首先最核心的部分是通过两次遍历反推回二叉树:这里的思路是,后续遍历的最末尾,一