Ngx-Bootstrap - Có thể sắp xếp

Thành phần có thể sắp xếp ngx-bootstrap cung cấp một thành phần có thể sắp xếp có thể định cấu hình, với hỗ trợ kéo thả.

SortableComponent

bộ chọn

  • bs-sortable

Đầu vào

  • fieldName - chuỗi, tên trường nếu mảng đầu vào bao gồm các đối tượng.

  • itemActiveClass - chuỗi, tên lớp cho mục hoạt động.

  • itemActiveStyle- {[key: string]: string; }, đối tượng kiểu cho mục đang hoạt động.

  • itemClass - chuỗi, tên lớp cho mục

  • itemStyle - chuỗi, tên lớp cho mục

  • itemTemplate- TemplateRef <any>, được sử dụng để chỉ định một mẫu mục tùy chỉnh. Các biến mẫu: mục và chỉ mục;

  • placeholderClass - chuỗi, tên lớp cho trình giữ chỗ

  • placeholderItem - chuỗi, mục giữ chỗ sẽ được hiển thị nếu bộ sưu tập trống

  • placeholderStyle - chuỗi, đối tượng kiểu cho trình giữ chỗ

  • wrapperClass - chuỗi, tên lớp cho trình bao bọc các mục

  • wrapperStyle- {[key: string]: string; }, đối tượng kiểu cho trình bao bọc mục

Kết quả đầu ra

  • onChange- được kích hoạt khi thay đổi mảng (sắp xếp lại thứ tự, chèn, loại bỏ), giống như ngModelChange. Trả về bộ sưu tập các mặt hàng mới dưới dạng tải trọng.

Thí dụ

Vì chúng tôi sẽ sử dụng một loại có thể sắp xếp, chúng tôi phải cập nhật app.module.ts được sử dụng trong chương Xếp hạng ngx-bootstrap để sử dụngSortableModuleDraggableItemService.

Cập nhật app.module.ts để sử dụng SortableModule và DraggableItemService.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật styles.css để sử dụng các kiểu cho thành phần có thể sắp xếp.

Styles.css

.sortableItem {
   padding: 6px 12px;
   margin-bottom: 4px;
   font-size: 14px;
   line-height: 1.4em;
   text-align: center;
   cursor: grab;
   border: 1px solid transparent;
   border-radius: 4px;
   border-color: #adadad;
}

.sortableItemActive {
   background-color: #e6e6e6;
   box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.sortableWrapper {
   min-height: 150px;
}

Cập nhật test.component.html để sử dụng thành phần có thể sắp xếp.

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   items = [
      {
         id: 1,
         name: 'Apple'
      },
      {
         id: 2,
         name: 'Orange'
      },
      {
         id: 3,
         name: 'Mango'
      }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200.