NgxGridLayout

ngx-grid-layout是一个类似于Gridster适用于angular9.X之上。demo地址

开始使用

• 安装
• 使用

内部类型定义

export interface ILayout {
  x: number;
  y: number;
  w: number;
  h: number;
  i: any;
  minW?: number,
  minH?: number,
  maxW?: number,
  maxH?: number,
  moved?: boolean,
  isDraggable?: boolean,
  isResizable?: boolean
  static?: boolean;
}
  
export interface ILayoutCols {
  lg?: number;
  md?: number;
  sm?: number;
  xs?: number;
  xxs?: number;
}

安装

npm i c-ngx-grid-layout

使用

NgxGridLayoutModule应用在SharedModule中；

app.module.ts

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgZorroAntdModule } from 'ng-zorro-antd';
import { NgxGridLayoutModule } from 'ngx-grid-layout';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgZorroAntdModule,
    NgxGridLayoutModule,
  ],
  exports: [
    NgZorroAntdModule,
    NgxGridLayoutModule,
  ]
})
export class SharedModule { }

开始使用

grid-layout.component.ts

// grid-layout.component.ts
import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
// 测试数据
const testLayout = [
  { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0", minW: 3, resizable: false, draggable: false, static: false },
  { "x": 2, "y": 0, "w": 2, "h": 4, "i": "1", resizable: false, draggable: false, static: false },
  { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2", resizable: false, draggable: false, static: false },
  { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3", resizable: false, draggable: false, static: false },
  { "x": 8, "y": 0, "w": 2, "h": 3, "i": "4", resizable: false, draggable: false, static: false },
  { "x": 10, "y": 0, "w": 2, "h": 3, "i": "5", resizable: false, draggable: false, static: false },
  { "x": 0, "y": 5, "w": 2, "h": 5, "i": "6", resizable: false, draggable: false, static: false },
  { "x": 2, "y": 5, "w": 2, "h": 5, "i": "7", resizable: false, draggable: false, static: false },
  { "x": 4, "y": 5, "w": 2, "h": 5, "i": "8", resizable: false, draggable: false, static: false },
  { "x": 6, "y": 3, "w": 2, "h": 4, "i": "9", resizable: false, draggable: false, static: true },
  { "x": 8, "y": 4, "w": 2, "h": 4, "i": "10", resizable: false, draggable: false, static: false },
  { "x": 10, "y": 4, "w": 2, "h": 4, "i": "11", resizable: false, draggable: false, static: false },
  { "x": 0, "y": 10, "w": 2, "h": 5, "i": "12", resizable: false, draggable: false, static: false },
  { "x": 2, "y": 10, "w": 2, "h": 5, "i": "13", resizable: false, draggable: false, static: false },
  { "x": 4, "y": 8, "w": 2, "h": 4, "i": "14", resizable: false, draggable: false, static: false },
  { "x": 6, "y": 8, "w": 2, "h": 4, "i": "15", resizable: false, draggable: false, static: false },
  { "x": 8, "y": 10, "w": 2, "h": 5, "i": "16", resizable: false, draggable: false, static: false },
  { "x": 10, "y": 4, "w": 2, "h": 2, "i": "17", resizable: false, draggable: false, static: false },
  { "x": 0, "y": 9, "w": 2, "h": 3, "i": "18", resizable: false, draggable: false, static: false },
  { "x": 2, "y": 6, "w": 2, "h": 2, "i": "19", resizable: false, draggable: false, static: false }
];

@Component({
  selector: 'app-grid-layout',
  templateUrl: './grid-layout.component.html',
  style: `
    ngx-grid-item {
    background: #ccc;
    border    : 1px solid black;
    text-align: center;
    }
    ngx-grid-layout {
    background-color: #fff;
    }

    .layoutJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
    }

    .columns {
    -moz-columns: 120px;
    -webkit-columns: 120px;
    columns: 120px;
    }

    :host ::ng-deep .ngx-grid-static {
    background-color: #cce;
    }
	`
})
export class GridLayoutComponent implements OnInit {
  @ViewChild('content') public contentEl: ElementRef;
  public layout = JSON.parse(JSON.stringify(testLayout));
  public index: number = 0;
  public draggable = true;
  public resizable = true;
  public mirrored = false;
  public responsive = true;
  public preventCollision = false;
  public rowHeight = 30;
  public colNum = 12;

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    this.index = this.layout.length;
    console.log(this.layout, 'this is demo init layout');
  }

  layoutChanged(layout: any): void {
    console.log('LAYOUT CHANGED:', layout);
  }

  layoutReady(layout: any): void {
    console.log('LAYOUT READY: ', layout);
  }

  containerResized(layoutItem: any): void {
    console.log('CONTAINER RESIZED:', layoutItem);
  }

  public decreaseWidth(): void {
    const conentHtml: HTMLElement = this.contentEl.nativeElement;
    let width = conentHtml.offsetWidth;
    width -= 20;
    this.renderer.setStyle(this.contentEl.nativeElement, 'width', `${width}px`);
  }

  public increaseWidth(): void {
    const conentHtml: HTMLElement = this.contentEl.nativeElement;
    let width = conentHtml.offsetWidth;
    width += 20;
    this.renderer.setStyle(this.contentEl.nativeElement, 'width', `${width}px`);
  }

  public addItem(): void {
    const item = { "x": 0, "y": 0, "w": 2, "h": 2, "i": this.index + "", whatever: "bbb" };
    this.index++;
    this.layout = [...this.layout, item];
  }
  
  trackByFn(index) { return index }
}

grid-layout.compnent.html

<!-- grid-layout.compnent.html 模板 -->
<div #content>
  <ngx-grid-layout
    [(layout)]="layout"
    [colNum]="colNum"
    [rowHeight]="rowHeight"
    [isDraggable]="draggable"
    [isResizable]="resizable"
    [isMirrored]="mirrored"
    [preventCollision]="preventCollision"
    [verticalCompact]="true"
    [useCssTransforms]="true"
    [responsive]="responsive"
    (layoutChanged)="layoutChanged($event)"
    (layoutReady)="layoutReady($event)"
  >
    <ngx-grid-item 
      *ngFor="let item of layout; trackBy: trackByFn"
      [static]="item.static"
      [x]="item.x"
      [y]="item.y"
      [h]="item.h"
      [w]="item.w"
      [i]="item.i"
      [minW]="item.minW"
    >
      <div class="ngx-grid-item-draggable--box">
        {{item.i}}
      </div>
    </ngx-grid-item>
  </ngx-grid-layout>
</div>

ngx-grid-layout API

| name | DESCRIPTION | TYPE | DEFAULT | REQUIRED | | -------------------- | ------------------------------------------------------------ | ------------------------- | ---------- | -------- | | [(layout)] | 数据源； | ILayout[] | - | true | | [colNum] | 定义栅格系统的列数，其值需为自然如 | number | 12 | false | | [rowHeight] | 每行的高度，单位像素 | number | 150 | false | | [margin] | 定义栅格中的元素边距；数组中的一个元素表示水平边距，第二个表示垂直边距，单位为像素 | number[] | [10, 10] | false | | [isDraggable] | 标识栅格中的元素是否可以拖拽。 | boolean | true | false | | [isResizable] | 标识栅格中的元素是否可以调整大小。 | boolean | true | false | | [isMirrored] | 标识栅格中的元素是否可镜像反转。 | boolean | false | false | | [autoSize] | 标识容器是否自动调整大小。 | boolean | true | false | | [verticalCompact] | 标识布局是否垂直压缩。 | boolean | true | false | | [useCssTransforms] | 标识是否使用css属性transition-property: transform | boolean | true | false | | [responsive] | 标识布局是否为响应式。 | boolean | false | false | | (layoutReady) | layout最近加载完成 | EventEmitter<ILayout[]> | - | false | | (layoutChanged) | layout数据有所改变的回调函数。 | EventEmitter<ILayout[]> | - | false |

ngx-grid-item API

| NAME | DESCRIPTION | TYPE | DEFAULT | REQUIRED | | -------------------- | ------------------------------------------------------------ | --------------------------------------------- | ---------- | -------- | | [i] | 栅格中元素的ID | string | - | true | | [x] | 标识栅格元素位于第几列，需为自然数。 | number | - | true | | [y] | 标识栅格元素位于第几行，需为自然数 | number | - | true | | [w] | 标识栅格元素的初始宽度，值为colWidth的倍数。 | number | - | true | | [h] | 标识栅格元素的初始高度，值为rowHeight的倍数。 | number | - | true | | [minW] | 栅格元素的最小宽度，值为colWidth的倍数。如果w小于minW,则minW的值会被w覆盖。 | number | 1 | false | | [minH] | 格栅元素的最小高度，值为rowHeight的倍数。如果h小于minH,则minH的值会被h覆盖。 | number | 1 | false | | [maxW] | 栅格元素的最大宽度，值为colWidth的倍数。如果w大于maxW，则maxW的值会被w覆盖 | number | Infinity | false | | [maxH] | 栅格元素的最大高度，值为rowHeight的倍数。如果h大于maxH，则maxH的值会被h覆盖。 | number | Infinity | false | | [isDraggable] | 标识栅格元素是否可拖拽。如果值为null则取决于父容器。 | boolean | null | false | | [isResizable] | 标识栅格元素是否可调整大小。如果值为null则取决于父容器。 | boolean | null | false | | [static] | 标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。 | boolean | false | false | | [dragIgnoreFrom] | 标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。请参考 interact.js docs中的ignoreFrom。 | string | a,button | false | | [dragAllowFrom] | 标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。如果值为null则表示所有子元素（dragIgnoreFrom的除外）。请参考 interact.js docs中的allowFrom。 | string | null | false | | [resizeIgnoreFrom] | 标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。请参考 interact.js docs中的ignoreFrom。 | string | a,button | false | | (move) | 移动过程中的回调函数 | EventEmitter<{i: string;x:number;y:number}> | - | false | | (moved) | 移动完成的回调 | EventEmitter<{i: string;x:number;y:number}> | - | false | | (resize) | 放大的过程的回调函数 | EventEmitter<{i: string;x:number;y:number}> | - | false | | (resized) | 放大完成的回调函数 | EventEmitter<{i: string;x:number;y:number}> | - | false |