Javascript 角状树景

你好,

我用的是Angular 4，也许你现在可以叫我菜鸟。 我在谷歌搜索树视图，发现了两个非常好的框架。 和ng2树（不能发布链接，信誉不够；（））。 但对于这两个节点，我在创建新节点时遇到了问题

在第一个示例中，添加方法是正常编写的，但我不知道如何将节点添加到树的选定部分

在第二个例子中，adding方法写得有些奇怪，我不知道如何修复它。当添加节点时，它会直观地添加，但它不会添加到数组中（或者我们称之为tree）。我确实尝试过push（）方法在添加方法时，但我无法获得与树数组相同的对象，然后，当我尝试将其作为json导入firebase时，它会给我一个错误

这是针对ng2 treeview的。我尝试使用的方法是onNodeCreated（）

从'@angular/core'导入{组件，输入，视图封装，OnInit}；
从“ng2树”导入{NodeEvent，TreeModel，RenamableNode，Ng2TreeSettings}；
从“app/pages/components/components/treeView/storeService.service”导入{ServerService}；
从“alertify.js”导入alertify；
从“@angular/Http”导入{Http，Response}；
声明const alertify：任何；
@组成部分({
选择器：“树视图”，
样式URL:['treeView.css']，
templateUrl:'treeView.html'，
提供程序：[ServerService]，
封装：视图封装。无
})
导出类TreeView实现OnInit{
构造函数（private-serverService:serverService，private-http:http/*private-treeview:TreeModel*/）{
}
树：树模型={
值：“按编程范式编程语言”，
儿童：[
{
值：“面向对象编程”，
儿童：[
{
//我是一个可重命名节点。是的，就是我：）
价值：{
名称：“Java”，
setName（名称：字符串）：void{
this.name=名称；
},
toString（）：字符串{
返回此.name；
}
}
},
{value:'C++'}
]
},
{
值：“基于原型的编程”，
设置：{
“静态”：真
},
loadChildren：（回调）=>{
设置超时（（）=>{
回拨([
{value:'JavaScript'}，
{value:'CoffeeScript'}，
{value:'TypeScript'}
]);
}, 5000);
}
}
]
};
恩戈尼尼特（）{
this.http.get（'https://testing-angular-50890.firebaseio.com/data.json）。地图(
（回复：回复）=>{
const data=response.json（）；
this.tree=数据；
}
);
}
私有静态日志事件（e:NodeEvent，消息：string）：void{
控制台日志（e）；
alertify.logPosition（“右上”）；
如果（（消息==“已移动”）| |（消息==“已重命名”）| |（消息==“已创建”）| |（消息==“已选定”））{
alertify.success（`${message}:${e.node.value}`）；
}
否则{
error（`${message}:${e.node.value}`）；
}
}
public onNodeRemoved（e:NodeEvent）：void{
logEvent（e，“删除”）；
this.http.put（'https://testing-angular-50890.firebaseio.com/data.json，此.tree）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
);
}
public onNodeMoved（e:NodeEvent）：void{
logEvent（e，“Moved”）；
this.http.put（'https://testing-angular-50890.firebaseio.com/data.json，此.tree）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
);
}
public onNodeRenamed（e:NodeEvent）：void{
logEvent（e，“重命名”）；
this.http.put（'https://testing-angular-50890.firebaseio.com/data.json，此.tree）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
);
}
public onNodeCreated（e:NodeEvent）：无效{
logEvent（即“已创建”）；
控制台日志（e）；
this.tree.children.push（e.node）；
console.log（this.tree）；
this.http.put（'https://testing-angular-50890.firebaseio.com/data.json，此.tree）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
);
}
public onNodeSelected（e:NodeEvent）：无效{
this.http.put（'https://testing-angular-50890.firebaseio.com/data.json，此.tree）。订阅(
（响应）=>console.log（响应），
（错误）=>console.log（错误）
);
logEvent（e，‘Selected’）；
console.log（this.tree.children）；
}
}

错误消息

**这是另一个，它没有给出任何错误，我只是不知道如何在这里开发加法。比如，我想在所选节点上添加节点，但在本例中，它只在一个（硬编码）节点上添加**

从'@angular/core'导入{Component，Input}；
从“角度树组件”导入{TreeNode、TreeModel、TREE_操作、键、IActionMapping、ITreeOptions}；
常量actionMapping:IActionMapping={
鼠标：{
上下文菜单：（树，节点，$event）=>{
$event.preventDefault（）；
警报（${node.data.name}`的上下文菜单）；
},
dblClick：（树，节点，$event）=>{
if（node.hasChildren）TREE\u ACTIONS.TOGGLE\u EXPANDED（TREE，node，$event）；
},
单击：（树，节点，$event）=>{
$event.shiftKey
？树操作。切换选定的树操作（树、节点、事件）
：树\操作。切换\选择（树、节点、$event）
}
},
关键点：{
[KEYS.ENTER]：（树，节点，$event）=>alert（`This is${node.data.name}`）
}
};
@组成部分({
选择器：“应用程序完整树”，
风格：[
`按钮：{
线高：24px；
长方体阴影：0.1pxRGBA（0,0,0,0.5）；
边界：无；
博尔德
import { Component, Input, ViewEncapsulation, OnInit } from '@angular/core';
import { NodeEvent, TreeModel, RenamableNode, Ng2TreeSettings } from 'ng2-tree';
import { ServerService } from "app/pages/components/components/treeView/storeService.service";
import alertify from 'alertify.js';
import { Http, Response } from "@angular/http";
declare const alertify: any;
@Component({
  selector: 'tree-view',
  styleUrls: ['treeView.css'],
  templateUrl: 'treeView.html',
  providers: [ServerService],
  encapsulation: ViewEncapsulation.None
})

export class TreeView implements OnInit {
    constructor(private serverService: ServerService, private http: Http /*private treeview: TreeModel*/){
    }
    tree: TreeModel = {
    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: 'Prototype-based programming',
        settings: {
          'static': true
        },
        loadChildren: (callback) => {
          setTimeout(() => {
            callback([
              {value: 'JavaScript'},
              {value: 'CoffeeScript'},
              {value: 'TypeScript'}
            ]);
          }, 5000);
        }
      }
    ]
  };

    ngOnInit(){
        this.http.get('https://testing-angular-50890.firebaseio.com/data.json').map(
            (response: Response) => {
                const data = response.json();
                this.tree = data;
            }
        );
    }
    private static logEvent(e: NodeEvent, message: string): void {
        console.log(e);
        alertify.logPosition("top right");
        if((message==="Moved") || (message==="Renamed") || (message==="Created") || (message==="Selected")){
            alertify.success(`${message}: ${e.node.value}`);
        }
        else{
            alertify.error(`${message}: ${e.node.value}`);
        }

    }
    public onNodeRemoved(e: NodeEvent): void {
        TreeView.logEvent(e, 'Removed');
        this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
    }

    public onNodeMoved(e: NodeEvent): void {
        TreeView.logEvent(e, 'Moved');
        this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
    }

    public onNodeRenamed(e: NodeEvent): void {
        TreeView.logEvent(e, 'Renamed');
        this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
    }

    public onNodeCreated(e: NodeEvent): void {
        TreeView.logEvent(e, 'Created');
        console.log(e);
        this.tree.children.push(e.node);
        console.log(this.tree);
        this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
    }

    public onNodeSelected(e: NodeEvent): void {
        this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
            (response) => console.log(response),
            (error) => console.log(error)
        );
        TreeView.logEvent(e, 'Selected');
        console.log(this.tree.children);
    }
}

import { Component, Input } from '@angular/core';
import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';

const actionMapping:IActionMapping = {
  mouse: {
    contextMenu: (tree, node, $event) => {
      $event.preventDefault();
      alert(`context menu for ${node.data.name}`);
    },
    dblClick: (tree, node, $event) => {
      if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
    },
    click: (tree, node, $event) => {
      $event.shiftKey
        ? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event)
        : TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event)
    }
  },
  keys: {
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`)
  }
};

@Component({
  selector: 'app-fulltree',
  styles: [
    `button: {
        line - height: 24px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
        border: none;
        border-radius: 2px;
        background: #A3D9F5;
        cursor: pointer;
        margin: 0 3px;
      }`
  ],
  template: `
  <form>
    <input #filter (keyup)="filterNodes(filter.value, tree)" placeholder="filter nodes"/>
  </form>
  <div style="height: 400px; width: 300px">
    <tree-root
      #tree
      [nodes]="nodes"
      [options]="customTemplateStringOptions"
      [focused]="true"
      (event)="onEvent($event)"
      (initialized)="onInitialized(tree)"

    >
      <ng-template #treeNodeTemplate let-node>
        <span title="{{node.data.subTitle}}">{{ node.data.name }}</span>
        <span class="pull-right">{{ childrenCount(node) }}</span>
        <button (click)="go($event)">Custom Action</button>
      </ng-template>
      <ng-template #loadingTemplate>Loading, please hold....</ng-template>
    </tree-root>
  </div>
  <br>
  <p>Keys:</p>
  down | up | left | right | space | enter
  <p>Mouse:</p>
  click to select | shift+click to select multi
  <p>API:</p>
  <button (click)="tree.treeModel.focusNextNode()">next node</button>
  <button (click)="tree.treeModel.focusPreviousNode()">previous node</button>
  <button (click)="tree.treeModel.focusDrillDown()">drill down</button>
  <button (click)="tree.treeModel.focusDrillUp()">drill up</button>
  <button (click)="customTemplateStringOptions.allowDrag = true">allowDrag</button>
  <p></p>
  <button
    [disabled]="!tree.treeModel.getFocusedNode()"
    (click)="tree.treeModel.getFocusedNode().toggleActivated()">
    {{ tree.treeModel.getFocusedNode()?.isActive ? 'deactivate' : 'activate' }}
  </button>
  <button
    [disabled]="!tree.treeModel.getFocusedNode()"
    (click)="tree.treeModel.getFocusedNode().toggleExpanded()">
    {{ tree.treeModel.getFocusedNode()?.isExpanded ? 'collapse' : 'expand' }}
  </button>
  <button
    [disabled]="!tree.treeModel.getFocusedNode()"
    (click)="tree.treeModel.getFocusedNode().blur()">
    blur
  </button>
  <button
    (click)="addNode(tree)">
    Add Node
  </button>
  <button
    (click)="activateSubSub(tree)">
    Activate inner node
  </button>
  <button
    (click)="tree.treeModel.expandAll()">
    Expand All
  </button>
  <button
    (click)="tree.treeModel.collapseAll()">
    Collapse All
  </button>
  <button
    (click)="activeNodes(tree.treeModel)">
    getActiveNodes()
  </button>
  `
})
export class FullTreeComponent {
  nodes: any[];
  nodes2 = [{name: 'root'}, {name: 'root2'}];
  constructor() {
  }
  ngOnInit() {
    setTimeout(() => {
      this.nodes = [
        {
          expanded: true,
          name: 'root expanded',
          subTitle: 'the root',
          children: [
            {
              name: 'child1',
              subTitle: 'a good child',
              hasChildren: false
            }, {
              name: 'child2',
              subTitle: 'a bad child',
              hasChildren: false
            }
          ]
        },
        {
          name: 'root2',
          subTitle: 'the second root',
          children: [
            {
              name: 'child2.1',
              subTitle: 'new and improved',
              uuid: '11',
              hasChildren: false
            }, {
              name: 'child2.2',
              subTitle: 'new and improved2',
              children: [
                {
                  uuid: 1001,
                  name: 'subsub',
                  subTitle: 'subsub',
                  hasChildren: false
                }
              ]
            }
          ]
        },
        {
          name: 'asyncroot',
          hasChildren: true
        }
      ];

      for(let i = 0; i < 4; i++) {
        this.nodes.push({
          name: `rootDynamic${i}`,
          subTitle: `root created dynamically ${i}`,
          children: new Array((i + 1) * 100).fill(null).map((item, n) => ({
            name: `childDynamic${i}.${n}`,
            subTitle: `child created dynamically ${i}`,
            hasChildren: false
          }))
        });
      }
    }, 1);
  }

  asyncChildren = [
    {
      name: 'child2.1',
      subTitle: 'new and improved'
    }, {
      name: 'child2.2',
      subTitle: 'new and improved2'
    }
  ];

  getChildren(node:any) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.asyncChildren.map((c) => {
        return Object.assign({}, c, {
          hasChildren: node.level < 5
        });
      })), 1000);
    });
  }

  addNode(tree) {
    this.nodes[0].children.push({

      name: 'a new child'
    });
    tree.treeModel.update();
  }

  childrenCount(node: TreeNode): string {
    return node && node.children ? `(${node.children.length})` : '';
  }

  filterNodes(text, tree) {
    tree.treeModel.filterNodes(text);
  }

  activateSubSub(tree) {
    // tree.treeModel.getNodeBy((node) => node.data.name === 'subsub')
    tree.treeModel.getNodeById(1001)
      .setActiveAndVisible();
  }

  customTemplateStringOptions: ITreeOptions = {
    // displayField: 'subTitle',
    isExpandedField: 'expanded',
    idField: 'uuid',
    getChildren: this.getChildren.bind(this),
    actionMapping,
    nodeHeight: 23,
    allowDrag: (node) => {
      // console.log('allowDrag?');
      return true;
    },
    allowDrop: (node) => {
      // console.log('allowDrop?');
      return true;
    },
    useVirtualScroll: true,
    animateExpand: true,
    animateSpeed: 30,
    animateAcceleration: 1.2
  }
  onEvent(event) {
    console.log(event);
  }

  onInitialized(tree) {
    // tree.treeModel.getNodeById('11').setActiveAndVisible();
  }

  go($event) {
    $event.stopPropagation();
    alert('this method is on the app component');
  }

  activeNodes(treeModel) {
    console.log(treeModel.activeNodes);
  }
}