Angular Tree Grid 일괄 편집 및 거래
IgxTreeGrid의 일괄 편집 기능은 HierarchicalTransactionService
. 따라가다 Transaction Service class hierarchy
주제에 대한 개요를 볼 수 있습니다. igxHierarchicalTransactionService
구현 방법을 자세히 설명합니다.
다음은 트리 그리드 구성 요소에 대해 일괄 편집이 활성화되는 방법에 대한 자세한 예입니다.
Angular Tree Grid 일괄 편집 및 거래 예
다음 샘플은 treeGrid에 batchEditing
활성화되어 있고 행 편집이 활성화되어 있는 시나리오를 보여줍니다. 후자는 전체 행 편집이 확인된 후 트랜잭션이 추가되도록 보장합니다.
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxDialogComponent, IgxGridComponent, IgxTreeGridComponent, Transaction, IgxColumnComponent, IgxCellTemplateDirective, IgxButtonDirective } from 'igniteui-angular' ;
import { generateRandomInteger } from '../../data/utils' ;
import { generateEmployeeFlatData, IEmployee } from '../data/employees-flat' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-batch-editing-sample' ,
styleUrls : ['tree-grid-batch-editing-sample.component.scss' ],
templateUrl : 'tree-grid-batch-editing-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxButtonDirective, IgxDialogComponent, IgxGridComponent]
})
export class TreeGridBatchEditingSampleComponent implements OnInit {
@ViewChild ('treeGrid' , { static : true }) public treeGrid: IgxTreeGridComponent;
@ViewChild (IgxDialogComponent, { static : true }) public dialog: IgxDialogComponent;
@ViewChild ('dialogGrid' , { read : IgxGridComponent, static : true }) public dialogGrid!: IgxGridComponent;
public data: IEmployee[];
public transactionsData: Transaction[] = [];
private nextRow = 1 ;
public ngOnInit(): void {
this .data = generateEmployeeFlatData();
}
public addRow ( ) {
const addedData: IEmployee = {
Age : 32 ,
HireDate : new Date (generateRandomInteger(2008 , 2015 ),
generateRandomInteger(0 , 12 ), generateRandomInteger(5 , 25 )),
ID : this .data.length + this .nextRow++,
Name: 'John Doe' ,
Phone : '(91) 745 6200' ,
OnPTO : false ,
ParentID : -1 ,
Title : 'Junior Sales Representative'
};
this .treeGrid.addRow(addedData);
}
public addChildRow (id ) {
const addedData: IEmployee = {
Age : generateRandomInteger(18 , 55 ),
HireDate : new Date (generateRandomInteger(2008 , 2015 ),
generateRandomInteger(0 , 12 ), generateRandomInteger(5 , 25 )),
ID : this .data.length + this .nextRow++,
Name: 'Added Addedington' ,
Phone : '(91) 745 6200' ,
OnPTO : false ,
ParentID : -1 ,
Title : 'Intern'
};
this .treeGrid.addRow(
addedData,
id);
}
public deleteRow (id ) {
this .treeGrid.deleteRow(id);
}
public undo ( ) {
this .treeGrid.endEdit(true );
this .treeGrid.transactions.undo();
}
public redo ( ) {
this .treeGrid.endEdit(true );
this .treeGrid.transactions.redo();
}
public commit ( ) {
this .treeGrid.transactions.commit(this .data);
this .dialog.close();
}
public cancel ( ) {
this .dialog.close();
}
public discard ( ) {
this .treeGrid.transactions.clear();
this .dialog.close();
}
public openCommitDialog ( ) {
this .dialog.open();
this .transactionsData = this .treeGrid.transactions.getAggregatedChanges(true );
this .dialogGrid.reflow();
}
public stateFormatter (value: string ) {
return value ? JSON .stringify(value) : '' ;
}
public typeFormatter (value: string ) {
return value ? value.toUpperCase() : '' ;
}
public classFromType(type : string ): string {
return type ? `transaction--${type .toLowerCase()} ` : '' ;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [batchEditing ]="true" [data ]="data" primaryKey ="ID" foreignKey ="ParentID"
[width ]="'100%'" [height ]="'500px'" [rowEditable ]="true" >
<igx-column [filterable ]="false" width ="150" [editable ]="false" >
<ng-template igxCell let-cell ="cell" let-val >
<button igxButton (click )="deleteRow(cell.id.rowID)"
[disabled ]="cell.row.deleted" > Delete</button >
</ng-template >
</igx-column >
<igx-column [filterable ]="false" width ="180" [editable ]="false" >
<ng-template igxCell let-cell ="cell" let-val >
<button igxButton (click )="addChildRow(cell.id.rowID)" [disabled ]="cell.row.deleted" > Add Child
Row</button >
</ng-template >
</igx-column >
<igx-column field ="ID" header ="ID" dataType ="number" width ="200" > </igx-column >
<igx-column field ="Age" header ="Age" dataType ="number" width ="120" > </igx-column >
<igx-column field ="Name" header ="Full Name" dataType ="string" width ="240" > </igx-column >
<igx-column field ="Title" header ="Title" dataType ="string" width ="180" > </igx-column >
<igx-column field ="HireDate" header ="Hire Date" dataType ="date" width ="150" > </igx-column >
<igx-column field ="OnPTO" header ="On PTO" dataType ="boolean" width ="80" > </igx-column >
</igx-tree-grid >
<div class ="buttons-row" >
<button igxButton (click )="addRow()" > Add Root Level Row</button >
<div class ="buttons-wrapper" >
<button igxButton [disabled ]="!treeGrid.transactions.canUndo" (click )="undo()" > Undo</button >
<button igxButton [disabled ]="!treeGrid.transactions.canRedo" (click )="redo()" > Redo</button >
<button igxButton [disabled ]="treeGrid.transactions.getAggregatedChanges(false).length < 1"
(click )="openCommitDialog()" > Commit</button >
</div >
</div >
<igx-dialog title ="Submit the following transactions?" >
<igx-grid [igxPreventDocumentScroll ]="true" #dialogGrid [data ]="transactionsData" [rowHeight ]="64" [primaryKey ]="'id'"
width ="600px" height ="300px" [emptyGridMessage ]="'No available transactions'" >
<igx-column field ="id" header ="ID" [dataType ]="'string'" width ="100px" > </igx-column >
<igx-column field ="type" header ="Type" width ="150px" [sortable ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
<span [class ]="classFromType(val)" > {{ typeFormatter(val) }}</span >
</ng-template >
</igx-column >
<igx-column field ="newValue" header ="Value" width ="900px" >
<ng-template igxCell let-cell ="cell" let-val >
<span class ="transaction-log" > {{ stateFormatter(val) }}</span >
</ng-template >
</igx-column >
</igx-grid >
<div class ="buttons-wrapper" >
<button igxButton (click )="commit()" > Commit</button >
<button igxButton (click )="discard()" > Discard</button >
<button igxButton (click )="cancel()" > Cancel</button >
</div >
</igx-dialog >
</div >
html コピー .grid__wrapper {
margin : 15px ;
}
h4 {
text-align : center;
padding-top : 2% ;
padding-bottom : 2% ;
}
.buttons-row {
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 5px ;
}
.buttons-wrapper {
display : flex;
flex-direction : row;
justify-content : center;
padding : 10px 0 ;
}
.list-container {
width : 600px ;
height : 300px ;
overflow-y : visible;
}
.transaction--update , .transaction--delete , .transaction--add {
font-weight : 600 ;
}
.transaction--add {
color : #6b3 ;
}
.transaction--update {
color : #4a71b9 ;
}
.transaction--delete {
color : #ee4920 ;
}
.transaction-log {
word-wrap : none;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
트랜잭션 상태는 업데이트, 추가, 삭제된 모든 행과 마지막 상태로 구성됩니다.
용법
시작하려면 IgxTreeGridModule
에서 app.module.ts 파일:
...
import { IgxTreeGridModule } from 'igniteui-angular' ;
@NgModule ({
...
imports : [..., IgxTreeGridModule],
...
})
export class AppModule {}
typescript
그런 다음 트리 그리드에서 batchEditing
활성화하기만 하면 됩니다.
<igx-tree-grid [data ]="data" [batchEditing ]="true" >
...
</igx-tree-grid >
html
이렇게 하면 igx-tree-grid에 대해 적절한 Transaction
서비스 인스턴스가 제공됩니다. 적절한 TransactionService
TransactionFactory
통해 제공됩니다. 거래 주제 에서 이 내부 구현에 대해 자세히 알아볼 수 있습니다.
일괄 편집이 활성화된 후 IgxTreeGrid
바인딩된 데이터 소스와 rowEditable
true로 설정하고 바인딩합니다.
<igx-tree-grid #treeGrid [batchEditing ]="true" [data ]="data" primaryKey ="employeeID" foreignKey ="PID"
width ="100%" height ="500px" rowEditable =true >
...
</igx-tree-grid >
...
<button igxButton (click )="addRow()" > Add Root Level Row</button >
<button igxButton [disabled ]="!treeGrid.transactions.canUndo" (click )="undo()" > Undo</button >
<button igxButton [disabled ]="!treeGrid.transactions.canRedo" (click )="redo()" > Redo</button >
<button igxButton [disabled ]="treeGrid.transactions.getAggregatedChanges(false).length < 1"
(click )="openCommitDialog()" > Commit</button >
...
html
다음 코드는 HierarchicalTransactionService
API(실행 취소, 다시 실행, 커밋)의 사용법을 보여줍니다.
export class TreeGridBatchEditingSampleComponent {
@ViewChild ('treeGrid' , { read : IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;
public undo ( ) {
this .treeGrid.endEdit(true );
this .treeGrid.transactions.undo();
}
public redo ( ) {
this .treeGrid.endEdit(true );
this .treeGrid.transactions.redo();
}
public commit ( ) {
this .treeGrid.transactions.commit(this .data);
this .dialog.close();
}
}
typescript
트랜잭션 API는 편집 종료를 처리하지 않으며 사용자가 직접 처리해야 합니다. 그렇지 않으면 Tree Grid
편집 모드로 유지됩니다. 이를 수행하는 한 가지 방법은 해당 메소드에서 endEdit
호출하는 것입니다.
상위 노드 삭제 Tree Grid
몇 가지 특징이 있습니다. 계층적 데이터를 사용하는 경우 상위 항목을 삭제하면 하위 항목도 삭제됩니다. 플랫 데이터를 사용하는 경우 다음을 사용하여 원하는 동작을 설정할 수 있습니다. cascadeOnDelete
의 자산 Tree Grid
. 이 속성은 상위 레코드가 삭제될 때 하위 레코드도 삭제해야 하는지 여부를 나타냅니다(기본적으로 다음으로 설정됨). true
).
rowEditable
속성을 비활성화하면 Tree Grid
수정되어 셀 변경 시 트랜잭션이 생성되고 UI에 행 편집 오버레이가 표시되지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.