1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/notadd-ngx-tree-dnd

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

NgxTreeDnd

基于@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组件
<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) => {}
    }
  ];

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.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/notadd-ngx-tree-dnd.git
git@api.gitlife.ru:oschina-mirror/notadd-ngx-tree-dnd.git
oschina-mirror
notadd-ngx-tree-dnd
notadd-ngx-tree-dnd
master