https://github.com/notadd/ngx-tree-dnd
基于@swimlane/ngx-dnd，可拖拽，可配置actions的Angular树组件
https://github.com/notadd/ngx-tree-dnd
Last synced: 11 months ago
JSON representation
基于@swimlane/ngx-dnd，可拖拽，可配置actions的Angular树组件
- Host: GitHub
- URL: https://github.com/notadd/ngx-tree-dnd
- Owner: notadd
- Created: 2018-07-27T02:05:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-02-11T06:07:59.000Z (over 5 years ago)
- Last Synced: 2024-03-24T16:20:26.282Z (about 2 years ago)
- Language: TypeScript
- Homepage: https://notadd.github.io/ngx-tree-dnd/
- Size: 1.59 MB
- Stars: 9
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxTreeDnd
基于[@swimlane/ngx-dnd](https://github.com/swimlane/ngx-dnd)，可拖拽,可配置actions的Angular树组件
保留原有的api和feature，修改了默认样式，添加了折叠、action配置
## How to use
### step-1
#### 安装`@notadd/ngx-tree-dnd`
+ `npm install @notadd/ngx-tree-dnd`
#### 安装依赖
+ `npm install @swimlane/dragula material-design-icons`
#### step-2
+ 添加NgxTreeDnDModule到你的AppModule
+ 引入material-design-icons
> 如果你的项目是Angular6，需要在polyfills.ts中添加如下代码：
`(window as any).global = window;`
#### step-3
+ 在你的component中添加`ngx-tree-dnd-container`组件
```html
```
```js
nestedLists = [
{
label: 'Item 1',
children: []
},
{
label: 'Item 2',
children: [
{
label: 'Item 2a',
children: []
},
{
label: 'Item 2b',
children: []
},
{
label: 'Item 2c',
children: []
}
]
},
{
label: 'Item 3',
children: [
{
label: 'Item 3a',
children: []
},
{
label: 'Item 3b',
children: []
},
{
label: 'Item 3c',
children: []
}
]
}
];
```
```js
actions = [
{
// action按钮material icon
icon: 'remove_red_eye',
/* 点击action按钮的回调函数 */
callback: (model) => {
/* model为当前actions所在item的model */
/* do something */
}
},
{
icon: 'edit',
callback: (model) => {}
},
{
icon: 'delete',
callback: (model) => {}
}
];
```
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).