Skip to content

Latest commit

 

History

History
173 lines (141 loc) · 4.58 KB

README.md

File metadata and controls

173 lines (141 loc) · 4.58 KB

Angular2 first tree 组件

安装

该库可用作npm软件包,因此您只需运行以下命令即可:(如果不是新手,建议先装淘宝镜像端,因为cnpm更快)

npm install --save ng2-first-tree

该命令将在您的package.json文件中创建一个记录,并将该包安装到npm modules文件夹中。

最简单的设置示例

首先需要将ng2-first-tree指令导入到组件中。


import { Ng2FirstTreeModule } from 'ng2-first-tree';

然后通过添加到您的模块的指令列表来注册它:

// ...

@NgModule({
  imports: [
    // ...
    
    Ng2FirstTreeModule,
    
    // ...
  ],
  declarations: [ ... ]
})
// ...

现在,我们需要配置数据并将其添加到模板中。 组件开始工作的唯一必需设置是数据配置,我们在组件中注册设置数据属性。

data = [
    {
        id: 1,
        text: "学校",
        nodeDeep: 1,
        IsShow: true,
        co: true,
        children: [
            {
                id: 2,
                text: "计算机系",
                nodeDeep: 2,
                IsShow: true,
                co:true,
                children: [
                    {
                        id: 6,
                        text: "一班",
                        nodeDeep: 3,
                        IsShow: true,
                    }
                ]
            },{
                id: 4,
                text: "经济系",
                nodeDeep: 2,
                co:true,
                IsShow: true,
            }
        ]
    },{
        id: 3,
        text: "医院",
        nodeDeep: 1,
        IsShow: true,
        co: false,
        children: [
            {
                id: 5,
                text: "计算机系",
                nodeDeep: 2,
                IsShow: true,
            }
        ]
    }
];

我们还需要配置一些其他的属性,如右键菜单展示的结构,单击时触发的事件,展示隐藏时候的图标class名

settings = {
	display: {
      displayLength: 10,                        //  节点文本显示长度
      displayName: "text",                      //  节点显示字段
      displayNode: 5,                           //  显示多少个节点
      nodeHeight: 30,                           //  每个节点高度
      nodeWidth: 100,                           //  每个节点宽度
      yScroll: "auto",                          //  垂直滚动条显示样式
      xScroll: "auto",                          //  横向滚动条显示样式
      treeClass: "tree-container",              //  树样式
    },
    menu: [{
        text:"添加兄弟节点",
        title:"add",
        nodeDeeps:[1]							// 菜单显示层级,全显示无需设置
    },{
        text:"添加子节点",
        title:"add"
    },{
        text:"删除",
        title:"delete"
    },{
        text:"修改",
        title:"delete",
        nodeDeeps:[1]
    },],
    enableclick:[1,3],                          //  可点击层级
    treeHeight:0,                            //  树高
    filter: {                                //  搜索配置  暂时没有
      type: '',                              //  客户端过滤|服务端过滤   serverfilter|clientfilter
      class: '',                             //  搜索框的 类名
      isShow: false,                         //  搜索框是否
    },
    foldedExpansionIsShow: false,           // 折叠展开是否显示
    drag: {
      isDrag: false,                         // 是否可拖动
      dragTreeHeight: []                  // 可拖动的节点层级
    }
     showicon: `icon ion-filing`,             //  子节点展开时的图标, 
    hideicon: `icon ion-folder`,             //  子节点隐藏时的图标, 
    noChildicon: `icon ion-document-text`,   //  没有子节点时的图标, 
    selectBgc: {            // 选中行背景色   此项不填写,默认为open: false
      open: true,           // 是否开启
      bgc:'#00abff',        // 配置背景色
      lv1: false,            // 第一级是否开启选中背景色 
    },
}

最后,我们将ng2-first-tree组件放在模板中:

// ...

@Component({
  template: `
    <ng2-first-tree [data]="data" [settings]="settings"></ng2-first-tree>
  `
})
// ...

现在你有一些数据在树中。

How can I support developers?

  • 可以关注我们的:Github
  • 创建拉请求,提交错误,建议新功能

功能特征(详情请看本项目文档)

  • 本地数据源(Server / API DataSource正在进行中)

ok