ng.tree
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.1 • Public • Published

    rename from angular4-tree to ng.tree!

    document

    live demo

    screenshot

    screenshot screenshot screenshot screenshot

    NPM

    npm install ng.tree
    

    Release notes

    • 2017/4/23——rename from angular4-tree to ng.tree!
    • 2017/4/23——publish to npm

    TODO

    • search
    • drag and drop

    Classes & Api

    NgTree

    ngTree component. useage : <ngTree [treeData]="TreeData[]" [treeConfig]="TreeConfig">

    • public searchNodes(nodes:any[], condition:string|{[key:string]:any}, ignoreCase?:boolean):any[],only work for tree root instance
    • public findNodeSiblings(node:any):any[],only work for tree root instance
    • public findNodeParent(node:any):any,only work for tree root instance, if node belongs to root, return an empty object, otherwise return null

    TreeData

    data for creating tree

    • name?:string,tree node name
    • isOpen?:boolean,collapse or not(node has subtree)
    • iconClass?:string|boolean,a class selector add to icon element, false to disable node icon
    • nameClass?:string,a class selector add to name element
    • children?:TreeData[],sub tree data
    • isChecked?:boolean,is checked
    • tools?: {name:string, iconClass:string, title?:string}[],customized edit button

    TreeConfig

    • onFold? : (node?:any) => boolean;,execute before treenode collapse or uncollapse, returns false to disable the default action
    • onClick? : (node?:any) => void;,trigger on icon or name click
    • onDragstart? : (event:MouseEvent , node?:any, parent?:any, siblings?:any, index?:number) => boolean;
    • onDrop? : (event:MouseEvent , node?:any, parent?:any, sibliings?:any, index?:number, position?:string) => void;
    • onDragend? : (event:MouseEvent , node?:any, parent?:any, sibliings?:any, index?:number, position?:string) => void;
    • onDragover? : (event:Event, node?:any, parent?:any, sibliing?:any, index?:number) => boolean;,return true to enable drop
    • onToolClick? : (event:MouseEvent, node?:any, toolname?:string) => void;trigger on tool button click
    • dataFilter?: (nodeData?:any) => any,format customized data to TreeData. effect on tree init
    • tools?: {name:string, iconClass:string, title?:string}[],customized edit button
    • enableTools?:boolean,enable toolbar or not
    • dataMap?any,format customized data to TreeData
      • dataMap.name?:string,default to "name"
      • dataMap.isOpen?:string,deafult to 'isOpen'
      • dataMap.iconClass?:string,default to "iconClass"
      • dataMap.nameClass?:string,default to "nameClass"
      • dataMap.children?:string,default to "children"
      • dataMap.isChecked?:string,default to "isChecked"
      • dataMap.tools?:string,default to "tools"
      • dataMap.enableTools? : string,default to "enableTools"

    Usage & demo

    talk is cheape, show you my code

    step 1

    import css

    <link rel="stylesheet" href="../node_modules/ng-tree/style/tree.css">

    step 2

    use it

    import {Component, NgModule} from '@angular/core';
    import {BrowserModule} from "@angular/platform-browser";
    import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
    import {NgTree} from "ng.tree";
     
    @Component({
        selector: 'app',
        template: `<ngTree [treeData]="treeData" [treeConfig]="treeConfig"></ngTree>`
    })
    export class App {
        public treeData: any[] = [{
            name: "folder",
            isOpen:true,
            iconSelector:"computer",
            nameSelector:"warning",
            nodes: [{
                name: 'file'
            }]
        },{
            name: 'another folder',
            nodes:[{
                name: 'another file'
            }]
        }];
        
        public treeConfig : any = {
            dataMap:{
                children:"nodes"
            }
        }
    }
     
    @NgModule({
        imports: [BrowserModule],
        entryComponents:[NgTree],
        declarations: [NgTree, App],
        bootstrap: [App]
    })
    export class AppModule {}
    platformBrowserDynamic().bootstrapModule(AppModule);

    Install

    npm i ng.tree

    DownloadsWeekly Downloads

    6

    Version

    3.2.1

    License

    Apache

    Last publish

    Collaborators

    • maker