nz-tree的右键菜单的实现，以及选中状态的实现

ant design of angular中的nz-tree在官方实例并没有给出和context menu的例子，不过官方的context menu独立的例子倒是有：

https://ng.ant.design/components/dropdown/zh#components-dropdown-demo-context-menu

我们需要把nz-tree和context menu 结合。

nz-tree的每一个tree item的自定义模板的写法如下：

nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >

<ng-template #nzTreeTemplate let-node>

</ng-template

</nz-tree>`

context menu 的自定义模板和创建如下：

//触发右键菜单的创建

//右键菜单的item项

<ng-template #template>

</ul>

</ng-template>

//声明导入

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';

import { NzTreeNode, NzTreeComponent, NzDropdownContextComponent, NzDropdownService, NzMenuItemDirective } from 'ng-zorro-antd';

//构造函数里注入右键菜单的服务

private dropdown: NzDropdownContextComponent;

constructor( private nzDropdownService: NzDropdownService) { }

//创建右键菜单和关闭右键菜单的代码

contextMenu($event: MouseEvent, template: TemplateRef<void>): void {

this.dropdown = this.nzDropdownService.create($event, template);

}

close(e: NzMenuItemDirective): void {

console.log(e);

this.dropdown.close();

}

//右键菜单的菜单项的单击事件处理

editUnit(node: NzTreeNode, e: NzFormatEmitEvent): void {

}

最终的nz-tree 模板和右键菜单结合后的html如下

<nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >

<ng-template #nzTreeTemplate let-node>

</ng-template>

<ng-template #template>

</ul>

</ng-template>

</nz-tree>`

上面完成了nz-tree树控件添加右键菜单的功能示例。

接下来，我们为树节点添加单击时的选中效果。简单来说，就是在nz-tree的节点模板中为dom元素添加选中时的class，然后在css中写上对应style即可。

不过需要注意的是，单击选中的状态的判断并不是用NzTreeNode自带的isSelected属性，发现这个属性判断有问题。最终解决是保存当前的单击树节点，然后在模板中判断是否是当前选中项。

<ng-template #nzTreeTemplate let-node>

<span [class.active]="selectedNode !== null && selectedNode === node" (contextmenu)=" contextMenu($event,template) :"

(click)="updateSelectedNode(node, $event)">

{{ node.title }}

<ng-template #template>

</ul>

</ng-template>

selectedNode: NzTreeNode;

updateSelectedNode(node: NzTreeNode, e: NzFormatEmitEvent): void {

this.selectedNode = node;

}

.active {

background-color: cornflowerblue

}

nz-tree的右键菜单的实现，以及选中状态的实现相关推荐

win11展开右键菜单（还原为win10状态）的方法
目录一.还原win10右键菜单的方法二.恢复win11原右键菜单的方法一.还原win10右键菜单的方法 WIN+R 输入cmd打开命令提示行输入 reg add HKCU\Software\C ...
windows添加右键菜单
为windows系统鼠标右键添加软件和图标一.打开注册表首先打开windows的注册表,当然了,我个人倾向于 (1)使用windows键+R,打开运行框 (2)输入regedit 然后敲击回车,进 ...
antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
JQuery之ContextMenu(右键菜单)
JQuery之ContextMenu(右键菜单) 插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextme ...
TreeList右键菜单功能
1:常用属性 1): Appearance->FocusedRow-->BackColor 设置选中的节点颜色 2):LookAndFell--> 将树的样式设置为加减号的样式, ...
java 树右键菜单_jsp代码树上加右键菜单
网上看到很多人不知道怎么在js代码的树上加右键菜单.我有实现的代码如下但我就是不知道怎么灰掉不该出现的时候,如在非子节点时,不能用"增加到收藏夹"功能 Ext.ux.AddToF ...
EasyUI 的Tab 标签添加右键菜单
样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <basehref=&q ...
自定义treeview控件，实现右键菜单编辑功能
试过用复合控件包含treeview控件,但是失败,这次在右键菜单调用tree的回发js成功可以在页面后台绑定被编辑的节点,后台3个函数都可以编辑用c#传的参数e.mynode就是右键菜单的选中的节点 ...
vue2+elTree 实现右键菜单
背景:通过树形控件筛选出子节点数据渲染列表,再操作列表.操作在繁琐,现在需要直接通过树进行操作:删除,编辑,详情等等. 首先创建一个树 <el-treeref="tree": ...

nz-tree的右键菜单的实现，以及选中状态的实现

nz-tree的右键菜单的实现，以及选中状态的实现相关推荐

最新文章

热门文章

nz-tree的右键菜单的实现， 以及选中状态的实现

nz-tree的右键菜单的实现， 以及选中状态的实现相关推荐

最新文章

热门文章

nz-tree的右键菜单的实现，以及选中状态的实现

nz-tree的右键菜单的实现，以及选中状态的实现相关推荐