Skip to content

Angular下优秀的选择控件

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt
Notifications You must be signed in to change notification settings

WHMCSK/ngx-first-select

Repository files navigation

Angular2 first tree 组件

安装

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

npm install --save ngx-first-select

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

最简单的设置示例

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


import { NgxFirstSelectModule } from 'ngx-first-select';

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

// ...

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

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

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

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

settings = {
    menu: [{
        text:"添加兄弟节点",
        clickFn:function(nodeobj){
        console.log(nodeobj);
            console.log("添加兄弟节点");          
        }
    },{
        text:"添加子节点",
        clickFn:function(nodeobj){
        console.log(nodeobj);
            console.log("添加子节点");  
        }
    },{
        text:"删除",
        clickFn:function(nodeobj){
        console.log(nodeobj);
            console.log("删除");
        }
    },{
        text:"修改",
        clickFn:function(nodeobj){
        console.log(nodeobj);
            console.log("修改");
        }
    },],
    nodeclick: () => {

    },
    showicon: `icon ion-filing`,
    hideicon: `icon ion-folder`,
    wenjicon: `icon ion-document-text`,
    filterstyle: `isshow`,//isshow|mark
    filtertype: `clientfilter`,//serverfilter|clientfilter
    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

About

Angular下优秀的选择控件

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.txt

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published