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ụngSortableModule và DraggableItemService.
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.