cipchk / ng-tree-antd Goto Github PK

View Code? Open in Web Editor NEW

67.0 5.0 11.0 1.46 MB

A antd style of based on angular-tree-component.

Home Page: https://cipchk.github.io/ng-tree-antd/

License: MIT License

JavaScript 6.23% TypeScript 16.95% CSS 76.30% HTML 0.52%

angular-tree ng-tree-antd ngx-tree ng2-tree angular ng-zorro-antd

ng-tree-antd's Introduction

项目不会再发布兼容 ng-zorro-antd `0.7.0` 版本，已经内置 `nz-tree` 组件；`0.6.x` 之前的依然可用。

ng-tree-antd

A antd style of based on angular-tree-component.

Demo

Live Demo & stackblitz

Dependencies

angular-tree-component ^7.0.1

Usage & Installation

Install ng-tree-antd from npm

npm install ng-tree-antd --save

Import the NzTreeModule in to your root AppModule.

import { NzTreeModule } from 'ng-tree-antd';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
    imports: [BrowserModule, NzTreeModule, NgZorroAntdModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Usage

import { Component } from '@angular/core';
import { generateData } from './generate-data';

@Component({
  selector: 'demo',
  template: `
  <nz-tree [nzNodes]="nodes"
           [nzOptions]="options"
           (nzEvent)="onEvent($event)"></nz-tree>
  `
})
export class DemoDraggableComponent {
  nodes = [
    {
      name: 'root1'
    },
    {
      name: 'root2'
    },
    {
      name: 'root3'
    },
    {
      name: 'async root4',
      hasChildren: true
    }
  ];

  options = {
    allowDrag: true
  };

  onEvent(ev: any) {
    console.log('onEvent', ev);
  }
}

`nzNodes` DATA

the nzNodes is array of the tree, and each node may contain the following fileds:

id unique id
name default displayed filed, you can setting displayField of options property
checked specifies whether the checkbox is selected
disableCheckbox disable checkbox
halfChecked achieve a 'check all' effect
children an array of the node's children.
hasChildren for async data load, so you need setting getChildren of options property

API

Name	Type	Default	Summary
nzNodes	`any[]`		see inputs
nzAutoExpandParent	`boolean, number`	`false`	是否自动展开父节点，当数字时展开最大节点
nzAllowChildLinkage	`boolean`	`true`	是否开启父节点的checkbox状态的会影响子节点状态
nzAllowParentLinkage	`boolean`	`true`	是否开启子节点的checkbox状态的会影响父节点状态
nzCheckable	`boolean`	`false`	Add a `checkbox` before the node
nzShowLine	`boolean`	`false`	Shows a connecting line
nzOptions	`TreeOptions`		see options
nzTitle	`TemplateRef`		Custom title
nzLoading	`TemplateRef`		Custom Loading
nzShiftSelectedMulti	`boolean`	`true`	selected multi when shift key
nzToggleExpanded	`EventEmitter`		see events
nzActivate	`EventEmitter`
nzDeactivate	`EventEmitter`
nzFocus	`EventEmitter`
nzBlur	`EventEmitter`
nzUpdateData	`EventEmitter`
nzInitialized	`EventEmitter`
nzMoveNode	`EventEmitter`
nzCopyNode	`EventEmitter`
nzLoadNodeChildren	`EventEmitter`
nzChangeFilter	`EventEmitter`
nzEvent	`EventEmitter`
nzStateChange	`EventEmitter`
nzCheck	`EventEmitter`		fired `checkbox` is changed

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Use GitHub Issues board to report bugs and feature requests (not our email address)
Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

ng-tree-antd's People

Contributors

Stargazers

Watchers

Forkers

ytlsdk vellengs ye125440 hsuanxyz pollionchang ng2tech ck110 flytank leowang199303 kingna shine873

ng-tree-antd's Issues

TypeError: Object(...) is not a function

I goes just as document say,nothing different,but the error below happen!
I don't knnown what wrong with my code.

ERROR TypeError: angularTreeComponent.TREE_ACTIONS.TOGGLE_ACTIVE is not a function

NzTreeComponent.html:42 ERROR TypeError: angularTreeComponent.TREE_ACTIONS.TOGGLE_ACTIVE is not a function
at click (ng-tree-antd.umd.js:108)
at TreeNode.mouseAction (tree-node.model.js:366)
at Object.eval [as handleEvent] (NzTreeComponent.html:46)
at handleEvent (core.js:13581)
at callWithDebugContext (core.js:15090)
at Object.debugHandleEvent [as handleEvent] (core.js:14677)
at dispatchEvent (core.js:9990)
at eval (core.js:10611)
at HTMLSpanElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)

您好，请问这个怎么解决？

TreeNodeComponent.html:2 ERROR Error: [mobx] Autorun expects a function as first argument

feature 增加获取tree控件全部checked node

在后台项目里树控件用的很多，现在也已提供了check的属性和事件，但是无法获取tree控件的全部checked状态的节点

angular5使用shareModule后加入ng-tree-antd会有警告提示

这是截图的代码，请问这个怎么解决呢？

nodes 是通过网络获取的为啥显示不出来

ShowLine, 下面多了条竖线

[bug]点击node时nzFocus事件被触发两次

初始化时，不能自动多级勾选

默认加载时，只能自动勾选上一级的checkbox状态，如果有多级，则不能勾选到更上一级，有解决方案吗？

可以提供checked三个状态值吗？现在只有true，false .

在IE11下会报错

ERROR Error: Uncaught (in promise): Error: [mobx] MobX 5+ requires Proxy objects. If your environment doesn't support Proxy objects, please downgrade to MobX 4.

关于异步加载数据

为什么异步加载的数据显示不出来呢？

How to get all selected nodes

How to get all selected nodes, such as the id of all selected nodes

请问 @ContentChild('nzLoading') nzLoading: TemplateRef<any>;

这个nzloading 应该写在html 中的哪里？

目前2.2.3遇到问题。报了“ngDevMode”错误

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/ng-tree-antd/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

我暂时锁到2.0.0版本，没有报错。

使用CheckBox的情况下，如何调用treeModel实现选中checkbox按钮

this.nzTreeComponent.treeModel.setState({selectedLeafNodeIds,activeNodeIds});
这样设置的话，treeModel里面的selectedLeafNodeIds属性值变了，但是复选框没有被选中

设置了isExpanded属性为true二级菜单一直再转

异步加载的数据设置 nzAutoExpandParent 无效

将ng-tree-antd 在 shared模块注入，会出现循环依赖的错误

angular-tree-component should be placed into dependencies of package.json?

ng-tree-antd在angularjs4.4.6出现错误

环境：
"angular-tree-component": "^5.1.2",
"ng-zorro-antd": "^0.6.0-rc.2",
"ng-tree-antd": "^1.0.0",

已在AppModule引入NzTreeModule

使用nz-tree组件：
<nz-tree [nzNodes]="nodes" [nzShowLine]="true" (nzEvent)="onEvent($event)">

编译可以通过，浏览器控制台出现：

Uncaught Error: Template parse errors:
Can't bind to 'nzNodes' since it isn't a known property of 'nz-tree'.
1. If 'nz-tree' is an Angular component and it has 'nzNodes' input, then verify that it is part of this module.
2. If 'nz-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<nz-tree [ERROR ->][nzNodes]="nodes" [nzShowLine]="true" (nzEvent)="onEvent($event)"></nz-tree>"): ng:///HomeRoutingModule/OrganComponent.html@0:9
Can't bind to 'nzShowLine' since it isn't a known property of 'nz-tree'.
1. If 'nz-tree' is an Angular component and it has 'nzShowLine' input, then verify that it is part of this module.
2. If 'nz-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<nz-tree [nzNodes]="nodes" [ERROR ->][nzShowLine]="true" (nzEvent)="onEvent($event)"></nz-tree>"): ng:///HomeRoutingModule/OrganComponent.html@0:27
'nz-tree' is not a known element:
1. If 'nz-tree' is an Angular component, then verify that it is part of this module.
2. If 'nz-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<nz-tree [nzNodes]="nodes" [nzShowLine]="true" (nzEvent)="onEvent($event)"></nz-tree>"): ng:///HomeRoutingModule/OrganComponent.html@0:0

能不能增加一个像idField那样的checkField的选项

业务要求，节点返回的不一定是checked，比如可能是allow、enabled等，所以能不能增加一个像idField那样的checkField的选项，谢谢

请教下如何打包成第三方lib的

如题，能否简要说明下步骤和工具谢谢。

您好，请教一个问题！父节点有一个孩子，将孩子删除后重新赋值给树，出现了一个转圈的样式，这样是不对的，请问怎么解决？

默认节点展开，这个有设置的属性吗？

不支持右键菜单

请问可否增加右键菜单

ng-tree-antd 无法自适应主题色

引入ng-tree-antd 并使用checkbox属性的时候发现颜色还是蓝色，而不是系统目前选择的其他主题色。
https://cipchk.github.io/ng-alain/#/elements/tree-antd 验证过也是一样，作者好像是在css里写死了

angular5 --prod

ERROR in Error at /Users/hanzhendong/workspace/web/angular-webapp/pclearner/node_modules/ng-tree-antd/components/nz-tree.component.d.ts.NzTreeComponent.html(59,13): ("
<ng-container
[ngTemplateOutlet]="nzTitle"
[ERROR ->][ngOutletContext]="{ $implicit: node, node: node, index: index }">

")

angular5 ng build --prod

demo页面在ie11打不开

请问你的ng-tree-antd有angular4版本的么？

how to custom title??

select all nodes by default

How to select all nodes by default？

expandAll()；树全部展开怎么去掉展开动画？测试后发现数据越多树的展开速度越慢，怎么样能加快树的展开速度？

expandAll()；树全部展开怎么去掉展开动画？测试后发现数据越多树的展开速度越慢，怎么样能加快树的展开速度？谢谢

ng build -prod fail

$ ng build -prod

ERROR in ..\ng-tree-antd\index.ts(10,2): Error during template compile of 'NzTreeModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.

不支持多选吗？

checkbox不存在的时候

IE11 not support?

初始化时不能勾选父节点状态

this.nodes = [
      {
        name: '账户',
        hasChildren: true,
        checked: false,
        children: [
            {
              id: 1,
              name: 'name1',
              checked: false
            },
            {
              id: 2,
              name: 'name2',
              checked: true
            }
        ]
      }
    ]

期望的是

现在页面展示是

请问有好的解决方案吗

Check the third level (the path is intermedian, the item is checked)
Check the top level (all items are checked)
Uncheck the top level

expect all items are unchecked but the top remains intermedian.

I found everything OK in angular-tree-component demo page.

A gif explains the operations:

不知道怎么实现单次选择

nzCheckable：false；
nzShiftSelectedMulti：false；
都不起作用。。。

关于自定义图标

你好，我查了angular2-tree关于自定义图标，有人说用custom template可以，https://angular2-tree.readme.io/discuss/58945fe1f4de7c1b003265bb

我在nztree上试了下不生效，看源代码发现nztree封装了ng-template，这是不是以为这我不能在nztree上使用ng-template了。

我的需求是在node上带一个属性，然后根据属性应用不同的font-icon来显示图标。

谢谢