Angular Tree Grid Summaries
Ignite UI for Angular의 Angular UI 그리드에는 그룹 푸터로 열 수준에서 작동하는 요약 기능이 있습니다. Angular 그리드 요약은 사용자가 열 내 데이터 유형에 따라 또는 트리 그리드에서 사용자 정의 각도 템플릿을 구현하여 사전 정의된 기본 요약 항목 세트가 있는 별도의 컨테이너에서 열 정보를 볼 수 있게 해주는 강력한 기능입니다.
Angular 트리 그리드 요약 개요 예
import { Component, ViewChild } from '@angular/core' ;
import { ColumnType, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf, DatePipe } from '@angular/common' ;
@Component ({
selector : 'app-tree-grid-summary-sample' ,
styleUrls : ['./tree-grid-summary-sample.component.scss' ],
templateUrl : './tree-grid-summary-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe]
})
export class TreeGridSummarySampleComponent {
@ViewChild ('treegrid1' , { read : IgxTreeGridComponent, static : true })
public grid1: IgxTreeGridComponent;
public data;
constructor ( ) {
this .data = ORDERS_DATA;
}
public toggleSummary (column: ColumnType ) {
column.hasSummary = !column.hasSummary;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" [autoGenerate ]="false" height ="700px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-column #col field ="ID" header ="Order ID" >
</igx-column >
<igx-column #col field ="Name" header ="Order Product" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Units" header ="Units" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Units</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="UnitPrice" header ="Unit Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Unit Price</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Price" header ="Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Price</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Delivered" header ="Delivered" [hasSummary ]="true" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{ col.field }}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="OrderDate" header ="Order Date" [dataType ]="'date'" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{ val | date: 'MMM d, yyyy' }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Order Date</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー :host {
::ng-deep {
.grid-controls {
display: flex;
flex-flow : column nowrap;
justify-content : space-between;
margin : 0 16px 24px ;
igx-switch {
margin-top : 24px ;
}
}
.header {
height : 100% ;
}
.igx-grid__th .title {
width : 100% ;
cursor : auto;
}
}
}
.grid__wrapper {
margin : 0 16px ;
padding-top : 16px ;
}
@media screen and (max-width : 677px ){
[class*=header-icon] {
padding-bottom : 17px ;
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
}
[class*=text] {
float :left ;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
width : 50% ;
}
}
@media screen and (min-width : 677px ){
[class*=header-icon] {
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
}
[class*=text] {
float :left ;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
width : 50% ;
}
}
@media screen and (min-width : 992px ){
[class*=header-icon] {
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
margin-right : 10px ;
cursor : pointer;
}
[class*=text] {
float :left ;
white-space : nowrap;
width : 50% ;
cursor : auto;
}
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
열 요약은 모든 열 값의 함수 입니다. 필터링이 적용되지 않는 한 열 요약은 필터링된 결과 값의 함수 입니다.
Tree Grid 요약은 Ignite UI for Angular에서 열 단위로 활성화할 수도 있습니다. 즉, 필요한 열에 대해서만 활성화할 수 있습니다. Tree Grid 요약은 열의 데이터 유형에 따라 미리 정의된 기본 요약 세트를 제공하므로 시간을 절약할 수 있습니다.
string
및 boolean
data types
의 경우 다음 함수를 사용할 수 있습니다.
number
, currency
및 percent
데이터 유형의 경우 다음 함수를 사용할 수 있습니다.
date
데이터 유형의 경우 다음 기능을 사용할 수 있습니다.
사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목 에서 찾을 수 있습니다.
트리 그리드 요약 설정을 통해 열별로 활성화됩니다. hasSummary
재산 true
. 각 열의 요약은 열 데이터 유형에 따라 확인된다는 점을 명심하는 것도 중요합니다. 에서 igx-tree-grid
기본 열 데이터 유형은 다음과 같습니다. string
, 그러니 원한다면 number
또는 date
특정 요약을 지정해야 합니다. dataType
재산 number
또는 date
. 요약 값은 그리드에 따라 현지화되어 표시됩니다. locale
및 열 pipeArgs
.
<igx-tree-grid #grid1 [data ]="data" [autoGenerate ]="false" height ="800px" width ="800px" (columnInit )="initColumn($event)" >
<igx-column field ="ID" header ="Order ID" width ="200px" [sortable ]="true" > </igx-column >
<igx-column field ="Name" header ="Order Product" width ="200px" [sortable ]="true" [hasSummary ]="true" > </igx-column >
<igx-column field ="Units" width ="200px" [editable ]="true" [dataType ]="'number'" [hasSummary ]="true" > </igx-column >
</igx-tree-grid >
html
특정 열이나 열 목록에 대한 요약을 활성화/비활성화하는 다른 방법은 public 메서드를 사용하는 것입니다. enableSummaries
/ disableSummaries
~의 igx-트리 그리드 .
<igx-tree-grid #grid1 [data ]="data" [autoGenerate ]="false" height ="800px" width ="800px" (columnInit )="initColumn($event)" >
<igx-column field ="ID" header ="Order ID" width ="200px" [sortable ]="true" > </igx-column >
<igx-column field ="Name" header ="Order Product" width ="200px" [sortable ]="true" [hasSummary ]="true" > </igx-column >
<igx-column field ="Units" width ="200px" [editable ]="true" [dataType ]="'number'" [hasSummary ]="false" > </igx-column >
</igx-tree-grid >
<button (click )="enableSummary()" > Enable Summary</button >
<button (click )="disableSummary()" > Disable Summary </button >
html
public enableSummary ( ) {
this .grid1.enableSummaries([
{fieldName : 'Units' , customSummary : this .mySummary},
{fieldName : 'ID' }
]);
}
public disableSummary ( ) {
this .grid1.disableSummaries('Name' );
}
typescript
사용자 정의 트리 그리드 요약
이러한 기능이 요구 사항을 충족하지 못하는 경우 특정 열에 대한 사용자 정의 요약을 제공할 수 있습니다. 이를 달성하려면 열 데이터 유형 및 필요에 따라 기본 클래스 IgxSummaryOperand
, IgxNumberSummaryOperand
또는 IgxDateSummaryOperand
중 하나를 재정의해야 합니다. 이 방법으로 기존 기능을 재정의하거나 새 기능을 추가할 수 있습니다. IgxSummaryOperand
클래스는 count
메소드에 대해서만 기본 구현을 제공합니다. IgxNumberSummaryOperand
IgxSummaryOperand
확장하고 min
, max
, sum
및 average
에 대한 구현을 제공합니다. IgxDateSummaryOperand
IgxSummaryOperand
확장하고 추가적으로 earliest
및 latest
.
import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular' ;
class MySummary extends IgxNumberSummaryOperand {
constructor ( ) {
super ();
}
operate(data?: any []): IgxSummaryResult[] {
const result = super .operate(data);
result.push({
key : 'test' ,
label : 'Test' ,
summaryResult : data.filter(rec => rec > 10 && rec < 30 ).length
});
return result;
}
}
typescript
예제에서 볼 수 있듯이 기본 클래스는 operate
메서드를 노출하므로 모든 기본 요약을 가져오고 결과를 수정하거나 완전히 새로운 요약 결과를 계산하도록 선택할 수 있습니다. 이 메소드는 IgxSummaryResult
목록을 반환합니다.
interface IgxSummaryResult {
key : string ;
label: string ;
summaryResult: any ;
}
typescript
요약을 계산하기 위해 선택적 매개변수를 사용합니다. 아래의 모든 데이터 섹션에 액세스하는 사용자 정의 요약을 참조하세요.
이제 UnitPrice
열에 사용자 정의 요약을 추가해 보겠습니다. 아래에서 생성한 클래스에 summaries
속성을 설정하여 이를 달성하겠습니다.
<igx-tree-grid #grid1 [data ]="data" [autoGenerate ]="false" height ="800px" width ="800px" (columnInit )="initColumn($event)" >
<igx-column field ="ID" header ="Order ID" width ="200px" [sortable ]="true" > </igx-column >
<igx-column field ="Name" header ="Order Product" width ="200px" [sortable ]="true" [hasSummary ]="true" > </igx-column >
<igx-column field ="Units" [dataType ]="'number'" width ="200px" [editable ]="true" [hasSummary ]="true" [summaries ]="mySummary" > </igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" width ="200px" [dataType ]="'number'" [dataType ]="'currency'" [hasSummary ]="true" > </igx-column >
</igx-tree-grid >
html
...
export class GridComponent implements OnInit {
mySummary = MySummary;
....
}
typescript
모든 데이터에 액세스하는 사용자 정의 요약
이제 사용자 정의 열 요약 내의 모든 트리 그리드 데이터에 액세스할 수 있습니다. IgxSummaryOperand operate
메소드에는 두 개의 추가 선택적 매개변수가 도입되었습니다. 아래 코드 조각에서 볼 수 있듯이 Operate 메소드에는 다음 세 가지 매개변수가 있습니다.
columnData - 현재 열의 값만 포함하는 배열을 제공합니다.
allGridData - 전체 그리드 데이터 소스를 제공합니다.
fieldName - 현재 열 필드
class MySummary extends IgxNumberSummaryOperand {
constructor ( ) {
super ();
}
operate(columnData: any [], allGridData = [], fieldName?): IgxSummaryResult[] {
const result = super .operate(allData.map(r => r[fieldName]));
result.push({ key : 'test' , label : 'Total Undelivered' , summaryResult : allData.filter((rec ) => rec.Discontinued).length });
return result;
}
}
typescript
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxSummaryOperand, IgxSummaryResult, IgxTreeGridComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { generateEmployeeFlatData } from '../data/employees-flat' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
class PTOSummary {
public operate(data?: any [], allData = [], fieldName = '' ): IgxSummaryResult[] {
const result = [];
result.push({
key : 'totalOnPTO' , label : 'Employees On PTO' ,
summaryResult : IgxSummaryOperand.count(allData.filter((rec ) => rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'devs' , label : 'Developers' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) => rec[fieldName].includes('Developer' ) && rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'tl' , label : 'Team Leads' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) => rec[fieldName].includes('Team Lead' ) && rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'managers' , label : 'Managers/Directors' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) =>
(rec[fieldName].includes('Manager' ) || rec[fieldName].includes('Director' )) && rec['OnPTO' ])
.map(r => r[fieldName]))
});
result.push({
key : 'ceo' , label : 'CEO/President' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) =>
(rec[fieldName].includes('CEO' ) || rec[fieldName].includes('President' )) && rec['OnPTO' ])
.map(r => r[fieldName]))
});
return result;
}
}
@Component ({
selector : 'app-treegrid-all-data-summary-sample' ,
styleUrls : ['./treegrid-allData-summary.component.scss' ],
templateUrl : './treegrid-allData-summary.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridAllDataSummaryComponent implements OnInit {
@ViewChild ('treegrid1' , { read : IgxTreeGridComponent, static : true })
public grid1: IgxTreeGridComponent;
public data;
public d;
public ptoSummary = PTOSummary;
constructor ( ) { }
public ngOnInit ( ) {
this .data = generateEmployeeFlatData();
this .data.forEach(rec => rec.Title = rec.Title.includes('Localiza' ) ? 'Software Developer' : rec.Title);
}
}
ts コピー <div class ="grid__wrapper" >
<div class ="sample-wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" cellSelection ="single" primaryKey ="ID"
foreignKey ="ParentID" height ="620px" width ="100%" >
<igx-column field ="Name" > </igx-column >
<igx-column field ="Age" width ="15%" > </igx-column >
<igx-column field ="Title" [hasSummary ]="true" [summaries ]="ptoSummary" > </igx-column >
<igx-column field ="HireDate" [dataType ]="'date'" [hasSummary ]="true" > </igx-column >
<igx-column field ="OnPTO" width ="15%" [dataType ]="'boolean'" [editable ]="true" [hasSummary ]="true" > </igx-column >
</igx-tree-grid >
</div >
</div >
html コピー .grid__wrapper {
--ig-size: var(--ig-size-small);
padding : 16px ;
}
scss コピー
요약 템플릿
igxSummary
열 요약 결과를 컨텍스트로 제공하는 열 요약을 대상으로 합니다.
<igx-column ... [hasSummary ]="true" >
<ng-template igxSummary let-summaryResults >
<span > My custom summary template</span >
<span > {{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }}</span >
</ng-template >
</igx-column >
html
기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과 그리드의 크기에 따라 설계에 따라 계산됩니다. summaryRowHeight 입력 속성을 사용하여 디폴트 값을 재정의합니다. 인수로 숫자 값이 필요하며 false 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.
import { Component, HostBinding, OnInit } from '@angular/core' ;
import { IgxSummaryOperand, IgxSummaryResult, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxTreeGridComponent, IgxColumnComponent, IgxSummaryTemplateDirective } from 'igniteui-angular' ;
import { generateEmployeeFlatData } from '../data/employees-flat' ;
import { FormsModule } from '@angular/forms' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
class PTOSummary {
public operate(data?: any [], allData = [], fieldName = '' ): IgxSummaryResult[] {
const result = [];
result.push({
key : 'totalOnPTO' , label : 'Employees On PTO' ,
summaryResult : IgxSummaryOperand.count(allData.filter((rec ) => rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'devs' , label : 'Developers' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) => rec[fieldName].includes('Developer' ) && rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'tl' , label : 'Team Leads' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) => rec[fieldName].includes('Team Lead' ) && rec['OnPTO' ]).map(r => r[fieldName]))
});
result.push({
key : 'managers' , label : 'Managers/Directors' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) =>
(rec[fieldName].includes('Manager' ) || rec[fieldName].includes('Director' )) && rec['OnPTO' ])
.map(r => r[fieldName]))
});
result.push({
key : 'ceo' , label : 'CEO/President' ,
summaryResult : IgxSummaryOperand.count(
allData.filter((rec ) =>
(rec[fieldName].includes('CEO' ) || rec[fieldName].includes('President' )) && rec['OnPTO' ])
.map(r => r[fieldName]))
});
return result;
}
}
@Component ({
selector : 'app-treegrid-summary-template' ,
styleUrls : ['./treegrid-summary-template.component.scss' ],
templateUrl : './treegrid-summary-template.component.html' ,
imports : [IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSwitchComponent, IgxButtonGroupComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxSummaryTemplateDirective]
})
export class TreeGridSummaryTemplateComponent implements OnInit {
public data;
public d;
public ptoSummary = PTOSummary;
public summaryHeight = 150 ;
public size = 'medium' ;
public sizes;
public hasSummary = true ;
constructor ( ) { }
public ngOnInit(): void {
this .data = generateEmployeeFlatData();
this .data.forEach(rec => rec.Title = rec.Title.includes('Localiza' ) ? 'Software Developer' : rec.Title);
this .sizes = [
{ label : 'small' , selected : this .size === 'small' , togglable : true },
{ label : 'medium' , selected : this .size === 'medium' , togglable : true },
{ label : 'large' , selected : this .size === 'large' , togglable : true }
];
}
@HostBinding ('style.--ig-size' )
protected get sizeStyle () {
return `var(--ig-size-${this .size} )` ;
}
public selectSize(event): void {
this .size = this .sizes[event.index].label;
}
}
ts コピー <div class ="sample__wrapper" >
<div class ="controls-wrapper" >
<igx-input-group >
<label igxLabel for ="height" > Summary Row Height</label >
<input igxInput id ="height" name ="height" type ="number" [(ngModel )]="summaryHeight" >
</igx-input-group >
<igx-switch [(ngModel )]="hasSummary" > Toggle Summaries</igx-switch >
<igx-buttongroup [values ]="sizes" (selected )="selectSize($event)" > </igx-buttongroup >
</div >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" cellSelection ="single" primaryKey ="ID"
foreignKey ="ParentID" height ="520px" width ="100%" [summaryRowHeight ]="summaryHeight" >
<igx-column field ="Name" > </igx-column >
<igx-column field ="Age" dataType ="number" width ="15%" [hasSummary ]="hasSummary" >
<ng-template igxSummary let-summaryResults >
<div class ="summary-temp" >
<span > <strong > {{ summaryResults[0].label }}</strong > <span > {{ summaryResults[0].summaryResult }}</span > </span >
<span > <strong > {{ summaryResults[1].label }}</strong > <span > {{ summaryResults[1].summaryResult }}</span > </span >
<span > <strong > {{ summaryResults[2].label }}</strong > <span > {{ summaryResults[2].summaryResult }}</span > </span >
<span > <strong > {{ summaryResults[3].label }}</strong > <span > {{ summaryResults[3].summaryResult }}</span > </span >
</div >
</ng-template >
</igx-column >
<igx-column field ="Title" [hasSummary ]="hasSummary" [summaries ]="ptoSummary" > </igx-column >
<igx-column field ="HireDate" [dataType ]="'date'" > </igx-column >
<igx-column field ="OnPTO" width ="15%" [dataType ]="'boolean'" [editable ]="true" [hasSummary ]="hasSummary" >
</igx-column >
</igx-tree-grid >
</div >
html コピー .sample__wrapper {
display : flex;
flex-direction : column;
gap: 16px ;
padding : 16px ;
height : 100% ;
overflow-y : auto;
}
igx-buttongroup {
max-width : 450px ;
flex : 1 ;
}
.summary-temp {
display : flex;
flex-direction : column;
margin : 0 1px ;
font-size : 14px ;
line-height : 24px ;
height : 100% ;
overflow-y : auto;
overflow-x : hidden;
span {
display : flex;
flex-wrap : wrap;
align-items : center;
gap: 4px ;
justify-content : space-between;
color : hsla(var(--igx-gray-900 ));
span {
user-select: all;
max-width : 300px ;
padding-right : 8px ;
}
strong {
font-size : 12px ;
text-transform : uppercase;
min-width : 70px ;
justify-self: flex-start;
text-align : left;
color : var(--ig-secondary-600 );
user-select: none;
}
}
> * {
padding : 8px 0 ;
line-height : 18px ;
border-bottom : 1px dashed hsla(var(--igx-gray-400 ));
&:last-child {
border-bottom : none;
}
}
}
::-webkit-scrollbar {
width: 5px !important ;
height : 5px !important ;
}
.controls-wrapper {
display : flex;
align-items : center;
flex-direction : row;
gap: 16px ;
}
scss コピー
요약 비활성화
이 disabledSummaries
속성은 Ignite UI for Angular 그리드 요약 기능에 대한 정확한 열 별 제어를 제공합니다. 이 속성을 사용하면 사용자가 그리드의 각 열에 대해 표시되는 요약을 사용자 지정하여 가장 관련성이 높고 의미 있는 데이터만 표시되도록 할 수 있습니다. 예를 들어, 배열에서 요약 키를 지정하는 등의 ['count', 'min', 'max']
특정 요약 유형을 제외할 수 있습니다.
또한 이 속성은 코드를 통해 런타임에 동적으로 수정할 수 있으므로 변화하는 응용 프로그램 상태 또는 사용자 작업에 맞게 그리드의 요약을 조정할 수 있는 유연성을 제공합니다.
다음 예제에서는 속성을 사용하여 disabledSummaries
여러 열에 대한 요약을 관리하고 Ignite UI for Angular 그리드에서 특정 기본 및 사용자 지정 요약 유형을 제외하는 방법을 보여 줍니다.
<igx-column
field ="Units"
header ="Units"
dataType ="number"
[hasSummary ]="true"
[summaries ]="unitsSummary"
[disabledSummaries ]="['uniqueCount', 'maxDifference']"
>
</igx-column >
<igx-column
field ="UnitPrice"
header ="Unit Price"
dataType ="number"
[hasSummary ]="true"
[disabledSummaries ]="['count', 'sum', 'average']"
>
</igx-column >
html
의 경우 Units
, 및 totalNotDelivered
와 같은 totalDelivered
사용자 지정 요약은 disabledSummaries
속성을 사용하여 제외됩니다.
의 UnitPrice
경우, 기본 요약은 , sum
와 average
같고 count
비활성화되어 있으며 다른 요약은 같고 min
max
활성 상태로 유지됩니다.
런타임에 요약은 속성을 사용하여 동적으로 비활성화할 수도 있습니다 disabledSummaries
. 예를 들어, 프로그래밍 방식으로 특정 열의 속성을 설정하거나 업데이트하여 사용자 작업 또는 응용 프로그램 상태 변경에 따라 표시되는 요약을 조정할 수 있습니다.
기본적으로 기본 제공 요약 피연산자에 의해 생성된 요약 결과는 그리드 locale
및 pipeArgs
열에 따라 지역화되고 형식이 지정됩니다. 사용자 정의 피연산자를 사용하는 경우 locale
및 pipeArgs
적용되지 않습니다. 요약 결과의 기본 모양을 변경하려면 summaryFormatter
속성을 사용하여 형식을 지정할 수 있습니다.
public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand : IgxSummaryOperand): string {
const result = summary.summaryResult;
if (summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
&& result !== null && result !== undefined ) {
const pipe = new DatePipe('en-US' );
return pipe.transform(result,'MMM YYYY' );
}
return result;
}
typescript
<igx-column ... [summaryFormatter ]="dateSummaryFormat" > </igx-column >
html
import { DatePipe, NgIf } from '@angular/common' ;
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxDateSummaryOperand, IgxSummaryResult, IgxSummaryOperand, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-tree-grid-summary-formatter' ,
styleUrls : ['./tree-grid-summary-formatter.component.scss' ],
templateUrl : 'tree-grid-summary-formatter.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf]
})
export class TreeGridSummaryFormatterComponent implements OnInit {
@ViewChild ('treegrid1' , { read : IgxTreeGridComponent, static : true })
public treegrid1: IgxTreeGridComponent;
public data: any [];
public ngOnInit(): void {
this .data = ORDERS_DATA;
}
public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand : IgxSummaryOperand): string {
const result = summary.summaryResult;
if (summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
&& result !== null && result !== undefined ) {
const pipe = new DatePipe('en-US' );
return pipe.transform(result, 'MMM YYYY' );
}
return result;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" [autoGenerate ]="false" height ="600px" width ="100%"
[allowFiltering ]="true" filterMode ="excelStyleFilter"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-column field ="ID" header ="Order ID" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="Name" header ="Order Products" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="Category" header ="Product Category" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="Units" header ="Units" dataType ="string" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="string" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="Price" header ="Total" dataType ="string" [sortable ]="true" [disableHiding ]="true" >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" [sortable ]="true" [disableHiding ]="true"
[hasSummary ]="true" [summaryFormatter ]="dateSummaryFormat" >
</igx-column >
<igx-column field ="Delivered" header ="Delivered" [dataType ]="'boolean'" [sortable ]="true" [disableHiding ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー .grid__wrapper {
margin : 16px ;
}
scss コピー
하위 요약
트리 그리드는 루트 노드와 중첩된 각 하위 노드 수준에 대해 별도의 요약을 지원합니다. 표시되는 요약은 summaryCalculationMode
속성을 사용하여 구성할 수 있습니다. 자식 수준 요약은 summaryPosition
속성을 사용하여 자식 노드 앞이나 뒤에 표시될 수 있습니다. 이 두 속성과 함께 IgxTreeGrid는 참조하는 상위 노드가 축소될 때 요약 행이 계속 표시되는지 여부를 결정할 수 있는 showSummaryOnCollapse
속성을 노출합니다.
summaryCalculationMode
속성의 사용 가능한 값은 다음과 같습니다.
rootLevelOnly - 요약은 루트 수준 노드에 대해서만 계산됩니다.
childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
rootAndChildLevels - 루트 및 하위 수준 모두에 대한 요약이 계산됩니다. 이것이 기본값입니다.
summaryPosition
속성의 사용 가능한 값은 다음과 같습니다.
top - 하위 행 목록 앞에 요약 행이 나타납니다.
하단 - 하위 행 목록 뒤에 요약 행이 나타납니다. 이것이 기본값입니다.
showSummaryOnCollapse
속성은 부울입니다. 기본값은 false 로 설정됩니다. 즉, 상위 행이 축소되면 요약 행이 숨겨집니다. 속성이 true 로 설정되면 상위 행이 축소될 때 요약 행이 계속 표시됩니다.
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { DefaultSortingStrategy, GridSummaryCalculationMode, GridSummaryPosition, IgxNumberSummaryOperand, IgxSummaryOperand, IgxSummaryResult, IgxTreeGridComponent, ISortingExpression, SortingDirection, IgxButtonGroupComponent, IgxSwitchComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
class AvgSummary {
public operate(data?: any []): IgxSummaryResult[] {
const result = [];
const avg = IgxNumberSummaryOperand.average(data);
result.push({
key : 'avg' ,
label : 'Average' ,
summaryResult : data.length ? '$' + avg.toFixed(2 ) : ''
});
return result;
}
}
@Component ({
selector : 'app-tree-grid-summary2-sample' ,
styleUrls : ['./tree-grid-summary2-sample.component.scss' ],
templateUrl : './tree-grid-summary2-sample.component.html' ,
imports : [IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, NgIf]
})
export class TreeGridSummary2SampleComponent implements OnInit {
@ViewChild ('treegrid1' , { read : IgxTreeGridComponent, static : true })
public grid1: IgxTreeGridComponent;
public data;
public expr: ISortingExpression[];
public avgSummary = AvgSummary;
public summaryPositions;
public summaryPosition: GridSummaryPosition = GridSummaryPosition.bottom;
public summaryCalcModes;
public summaryCalculationMode: GridSummaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
constructor ( ) {
this .data = ORDERS_DATA;
this .expr = [
{
dir : SortingDirection.Asc,
fieldName : 'ShipCountry' ,
ignoreCase : false ,
strategy : DefaultSortingStrategy.instance()
}
];
this .summaryPositions = [
{
label : GridSummaryPosition.top,
selected : this .summaryPosition === GridSummaryPosition.top,
togglable : true
},
{
label : GridSummaryPosition.bottom,
selected : this .summaryPosition === GridSummaryPosition.bottom,
togglable : true
}
];
this .summaryCalcModes = [
{
label : 'Root Level Only' ,
selected : this .summaryCalculationMode === GridSummaryCalculationMode.rootLevelOnly,
togglable : true ,
value : GridSummaryCalculationMode.rootLevelOnly
},
{
label : 'Child Levels Only' ,
selected : this .summaryCalculationMode === GridSummaryCalculationMode.childLevelsOnly,
togglable : true ,
value : GridSummaryCalculationMode.childLevelsOnly
},
{
label : 'Root And Child Levels' ,
selected : this .summaryCalculationMode === GridSummaryCalculationMode.rootAndChildLevels,
togglable : true ,
value : GridSummaryCalculationMode.rootAndChildLevels
}
];
}
public ngOnInit ( ) {
this .grid1.sortingExpressions = [
{ dir : SortingDirection.Desc, fieldName : 'ID' ,
ignoreCase : true , strategy : DefaultSortingStrategy.instance() }
];
}
public selectSummaryPosition (event ) {
this .summaryPosition = this .summaryPositions[event.index].label;
this .grid1.summaryPosition = this .summaryPosition;
}
public selectSummaryCalcMode (event ) {
this .summaryCalculationMode = this .summaryCalcModes[event.index].value;
this .grid1.summaryCalculationMode = this .summaryCalculationMode;
}
public toggle (event ) {
this .grid1.showSummaryOnCollapse = !this .grid1.showSummaryOnCollapse;
}
public formatCurrency (value: number ) {
return '$' + value.toFixed(2 );
}
}
ts コピー <div class ="summary-chooser" >
<igx-buttongroup [values ]="summaryCalcModes" (selected )="selectSummaryCalcMode($event)" > </igx-buttongroup >
</div >
<div class ="summary-chooser" >
<igx-buttongroup [values ]="summaryPositions" (selected )="selectSummaryPosition($event)" > </igx-buttongroup >
</div >
<div class ="summary-chooser" >
<igx-switch labelPosition ="before" [checked ]='treegrid1.showSummaryOnCollapse' (change )='toggle($event)' > Show summary row when group row is collapsed:</igx-switch >
</div >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" [autoGenerate ]="false" height ="500px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-column #col field ="ID" header ="Order ID" [sortable ]="true" >
</igx-column >
<igx-column #col field ="Name" header ="Order Product" [hasSummary ]="true" >
</igx-column >
<igx-column #col field ="UnitPrice" header ="Price" [formatter ]="formatCurrency" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" [summaries ]="avgSummary" >
</igx-column >
<igx-column #col field ="Delivered" header ="Delivered" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
<igx-column #col field ="OrderDate" header ="Order Date" [dataType ]="'date'" >
</igx-column >
</igx-tree-grid >
html コピー :host {
display : block;
padding : 8px ;
}
.summary-chooser {
margin-bottom : 16px ;
}
igx-buttongroup{
display : block;
width : 600px ;
}
scss コピー
요약 내보내기
이 있습니다 exportSummaries
옵션 IgxExcelExporterOptions
내보낸 데이터에 그리드 요약이 포함되어야 하는지 여부를 지정합니다. 기본 exportSummaries
가치는 거짓 .
IgxExcelExporterService
는 모든 열 유형에 대한 기본 요약을 동등한 Excel 기능으로 내보내므로 시트가 수정될 때 계속해서 제대로 작동합니다. 아래 예에서 직접 시도해 보세요.
import { Component, ViewChild } from '@angular/core' ;
import { ColumnType, IgxExcelExporterOptions, IgxExcelExporterService, IgxTreeGridComponent, IgxButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf, DatePipe } from '@angular/common' ;
@Component ({
selector : 'app-tree-grid-summary-export' ,
styleUrls : ['./tree-grid-summary-export.component.scss' ],
templateUrl : './tree-grid-summary-export.component.html' ,
imports : [IgxButtonDirective, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe]
})
export class TreeGridSummaryExportComponent {
@ViewChild ('tGrid' , { read : IgxTreeGridComponent, static : true })
public tGrid: IgxTreeGridComponent;
public data;
constructor (private excelExportService: IgxExcelExporterService ) {
this .data = ORDERS_DATA;
}
public toggleSummary (column: ColumnType ) {
column.hasSummary = !column.hasSummary;
}
public exportButtonHandler ( ) {
this .excelExportService.export(this .tGrid, new IgxExcelExporterOptions('ExportedFile' ));
}
}
ts コピー <div class ="grid__wrapper" >
<div class ="button-container" >
<button igxButton ="contained" (click )="exportButtonHandler()" > Export To Excel</button >
Press the button to export the Grid as a .xlsx file.
</div >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #tGrid [data ]="data" [autoGenerate ]="false" height ="650px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-column #col field ="ID" header ="Order ID" >
</igx-column >
<igx-column #col field ="Name" header ="Order Product" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Category" header ="Category" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Units" header ="Units" [dataType ]="'number'" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="UnitPrice" header ="Unit Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Unit Price</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Price" header ="Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Delivered" header ="Delivered" [hasSummary ]="true" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{ col.field }}</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="OrderDate" header ="Order Date" [dataType ]="'date'" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{ val | date: 'MMM d, yyyy' }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Order Date</div >
<igx-icon class ="header-icon" style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー :host {
::ng-deep {
.grid-controls {
display: flex;
flex-flow : column nowrap;
justify-content : space-between;
margin : 0 16px 24px ;
igx-switch {
margin-top : 24px ;
}
}
.header {
height : 100% ;
}
.igx-grid__th .title {
width : 100% ;
cursor : auto;
}
}
}
.grid__wrapper {
margin : 0 16px ;
padding-top : 16px ;
}
@media screen and (max-width : 677px ){
[class*=header-icon] {
padding-bottom : 17px ;
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
}
[class*=text] {
float :left ;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
width : 50% ;
}
}
@media screen and (min-width : 677px ){
[class*=header-icon] {
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
}
[class*=text] {
float :left ;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
width : 50% ;
}
}
@media screen and (min-width : 992px ){
[class*=header-icon] {
padding-top : 17px ;
font-size : 1.4em ;
width : 1.1em ;
height : 1.1em ;
float : right;
margin-right : 10px ;
cursor : pointer;
}
[class*=text] {
float :left ;
white-space : nowrap;
width : 50% ;
cursor : auto;
}
}
.button-container {
margin : 25px auto;
}
scss コピー
내보낸 파일에는 시트의 각 DataRecord
수준을 보유하는 숨겨진 열이 포함되어 있습니다. 이 수준은 요약 함수에 포함되어야 하는 셀을 필터링하기 위해 요약에서 사용됩니다.
아래 표에서 각 기본 요약에 해당하는 Excel 수식을 찾을 수 있습니다.
데이터 형식
기능
엑셀 기능
string
, boolean
세다
="카운트: "&COUNTIF(시작:끝, 레코드레벨)
number
, currency
, percent
세다
="카운트: "&COUNTIF(시작:끝, 레코드레벨)
분
="최소: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd))
최대
="최대: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd))
평균
="평균: "&AVERAGEIF(시작:끝, 기록 수준, rangeStart:rangeEnd)
합집합
="합계: "&SUMIF(start:end, RecordLevel, rangeStart:rangeEnd)
date
세다
="카운트: "&COUNTIF(시작:끝, 레코드레벨)
가장 빠른
="가장 빠른: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format)
최신
="최신: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), 형식)
알려진 제한 사항
한정
설명
사용자 정의 요약 내보내기
사용자 정의 요약은 Excel 함수 대신 문자열로 내보내집니다.
템플릿 요약 내보내기
템플릿 요약은 지원되지 않으며 기본 요약으로 내보내집니다.
키보드 탐색
요약 행은 다음 키보드 상호 작용을 통해 탐색할 수 있습니다.
UP - 한 셀 위로 이동합니다.
DOWN - 한 셀 아래로 이동합니다.
LEFT - 한 셀 왼쪽으로 이동합니다.
RIGHT - 한 셀 오른쪽으로 이동합니다.
CTRL + LEFT 또는 HOME - 가장 왼쪽 셀로 이동합니다.
CTRL + RIGHT 또는 END - 가장 오른쪽 셀로 이동합니다.
스타일링
정렬 동작 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
가장 간단한 접근 방식에 따라, 우리는 grid-summary-theme
확장하고 $background-color
, $focus-background-color
, $label-color
, $result-color
, $pinned-border-width
허용하는 새로운 테마를 만듭니다. $pinned-border-style
및 $pinned-border-color
매개변수.
$custom-theme : grid-summary-theme(
$background-color : #e0f3ff ,
$focus-background-color : rgba(#94d1f7 , .3 ),
$label-color : #e41c77 ,
$result-color : black,
$pinned-border-width : 2px ,
$pinned-border-style : dotted,
$pinned-border-color : #e41c77
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
마지막 단계는 구성 요소 사용자 지정 테마를 포함하는 것입니다.
@include css-vars($custom-theme );
scss
구성 요소가 Emulated
ViewEncapsulation을 사용하는 경우::ng-deep
사용하여 이 캡슐화를 penetrate
해야 합니다.
:host {
::ng-deep {
@include css-vars($custom-theme );
}
}
scss
데모
import { Component, ViewChild } from '@angular/core' ;
import { ColumnType, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
import { NgIf, DatePipe } from '@angular/common' ;
@Component ({
selector : 'app-tree-grid-summary-styling' ,
styleUrls : ['./tree-grid-summary-styling.component.scss' ],
templateUrl : './tree-grid-summary-styling.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective, IgxIconComponent, NgIf, DatePipe]
})
export class TreeGridSummaryStylingComponent {
@ViewChild ('treegrid1' , { read : IgxTreeGridComponent, static : true })
public grid1: IgxTreeGridComponent;
public data;
constructor ( ) {
this .data = ORDERS_DATA;
}
public toggleSummary (column: ColumnType ) {
column.hasSummary = !column.hasSummary;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treegrid1 [data ]="data" [autoGenerate ]="false" height ="600px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-column #col field ="ID" header ="Order ID" >
</igx-column >
<igx-column #col field ="Name" header ="Order Product" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Category" header ="Category" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{col.field}}</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Units" header ="Units" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Units</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="UnitPrice" header ="Unit Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Unit Price</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Price" header ="Price" [filterable ]="false" [editable ]="true" dataType ="number"
[hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
${{ val }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Price</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="Delivered" header ="Delivered" [hasSummary ]="true" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > {{ col.field }}</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
<igx-column #col field ="OrderDate" header ="Order Date" [dataType ]="'date'" [hasSummary ]="true" >
<ng-template igxCell let-cell ="cell" let-val let-row >
{{ val | date: 'MMM d, yyyy' }}
</ng-template >
<ng-template igxHeader let-col >
<div class ="text" > Order Date</div >
<igx-icon style.color ="{{ col.hasSummary ? '#e41c77' : '' }}" class ="header-icon" (click )="toggleSummary(col)" > functions</igx-icon >
</ng-template >
</igx-column >
</igx-tree-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$custom-theme : grid-summary-theme(
$background-color : #e0f3ff ,
$focus-background-color : rgba(#94d1f7 , .3 ),
$label-color : #e41c77 ,
$result-color : black,
$pinned-border-width : 2px ,
$pinned-border-style : dotted,
$pinned-border-color : #e41c77
);
:host {
::ng-deep {
@include css-vars($custom-theme );
}
}
scss コピー
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.