基于@swimlane/ngx-dnd,可拖拽,可配置actions的Angular树组件
保留原有的api和feature,修改了默认样式,添加了折叠、action配置
@notadd/ngx-tree-dnd
npm install @notadd/ngx-tree-dnd
npm install @swimlane/dragula material-design-icons
如果你的项目是Angular6,需要在polyfills.ts中添加如下代码:
(window as any).global = window;
ngx-tree-dnd-container
组件<ngx-tree-dnd-container
[model]="nestedLists"
[actions]="actions">
</ngx-tree-dnd-container>
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: []
}
]
}
];
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) => {}
}
];
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.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )