Angular 계층적 그리드 조건부 스타일링

    IgxHierarchicalGrid 구성 요소에 사용자 정의 스타일을 제공해야 하는 경우 행 또는 셀 수준에서 수행할 수 있습니다.

    계층적 그리드 조건부 행 스타일 지정

    Ignite UI for Angular의 IgxHierarchicalGrid 구성 요소는 사용자 지정 규칙에 따라 행의 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

    • IgxHierarchicalGrid 구성 요소에서 rowClasses 입력을 설정합니다.
    • IgxHierarchicalGrid 구성 요소에서 rowStyles 입력을 설정합니다.

    이 주제에서는 두 가지 모두에 대해 더 자세히 다룰 것입니다.

    rowClass 사용

    ​rowClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgxHierarchicalGrid 행의 스타일을 조건부로 지정할 수 있습니다.

    <igx-hierarchical-grid  #hierarchicalGrid class="hgrid" [data]="localData" [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
    ...
</igx-hierarchical-grid>
html

    ​rowClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    // sample.component.ts

public rowClasses = {
  activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;
typescript
    // sample.component.scss

::ng-deep {
 .activeRow {
  border: 2px solid #fc81b8;
  border-left: 3px solid #e41c77;
 }
}
scss

    또는 ViewEncapsulation.None를 사용하여::ng-deep 사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    rowStyle 사용

    이제 열은 데이터 행의 조건부 스타일 지정을 허용하는 rowStyles 속성을 노출합니다. rowClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 조건 없이 일반 스타일을 적용할 수도 있습니다.

    ​rowStyles 및 rowClasses에 대한 콜백 서명은 다음과 같습니다.

    (row: RowType) => boolean
ts

    스타일을 정의해 보겠습니다.

    // component.ts
public rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

public childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};
typescript
    <igx-hierarchical-grid  #hierarchicalGrid [data]="localdata" [autoGenerate]="false"
        [height]="'580px'" [width]="'100%'" [rowStyles]="rowStyles">
        <igx-row-island [key]="'Albums'" [autoGenerate]="false" [rowStyles]="childRowStyles">
             ...
        </igx-row-island>  
    ...
</igx-hierarchical-grid>
html

    데모

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    계층적 그리드 조건부 셀 스타일 지정

    개요

    Ignite UI for Angular의 IgxHierarchicalGrid 구성 요소는 사용자 지정 규칙에 따라 셀에 조건부 스타일을 지정하는 두 가지 방법을 제공합니다.

    • ​IgxColumnComponent 입력 cellClasses 키-값 쌍이 포함된 객체 리터럴로 설정합니다. 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다. 그 결과 셀의 편리한 소재 스타일링이 이루어졌습니다.
    // component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}
ts
    // component.scss file
.upFont {
  color: red;
}

.downFont {
  color: green;
}
scss

    cellClass 사용

    ​IgxColumnComponent ​ ​cellClasses 입력을 설정하고 사용자 정의 규칙을 정의하여 IgxHierarchicalGrid 셀의 스타일을 조건부로 지정할 수 있습니다.

    <!-- sample.component.html -->
<igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [cellClasses]="grammyClasses"></igx-column>
html

    ​cellClasses 입력은 키-값 쌍을 포함하는 객체 리터럴을 허용합니다. 여기서 키는 CSS 클래스의 이름이고 값은 부울 또는 부울 값을 반환하는 콜백 함수입니다.

    // sample.component.ts

private upGrammyCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 5;
}

private downGrammyCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 5;
}

public grammyClasses = {
    downGrammy: this.downPriceCondition,
    upGrammy: this.upPriceCondition
};
typescript
    // sample.component.scss

::ng-deep {
    .upGrammy {
        color: red;
    }

    .downGrammy {
        color: green;
    }
}
scss

    또는 ViewEncapsulation.None를 사용하여::ng-deep 사용자 정의 스타일을 현재 구성요소와 해당 자식을 통해 강제로 내려갑니다.

    데모

    • 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용하는 IgxColumnComponent 입력 cellStyles 사용합니다.
    public styles = {
    'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
    'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
    'animation': '0.25s ease-in-out forwards alternate popin'
};
ts

    이제 cellStyles 및 cellClasses에 대한 콜백 서명이 다음으로 변경되었습니다.

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts

    cellStyle 사용

    이제 열은 열 셀의 조건부 스타일 지정을 허용하는 cellStyles 속성을 노출합니다. cellClasses와 유사하게 키가 스타일 속성이고 값이 평가용 표현식인 객체 리터럴을 허용합니다. 또한 아무런 조건 없이 일반 스타일링을 쉽게 적용할 수 있습니다.

    ​위의 샘플 에서는 다음을 만들었습니다.

    • 열 인덱스를 기반으로 적용되는 두 가지 스타일입니다.
    • 또한 짝수/홀수 행을 기준으로 text color 변경합니다.

    두 cellStyles에 대한 콜백 서명은 다음과 같습니다.

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts

    스타일을 정의해 보겠습니다.

    // component.ts
public oddColStyles = {
    background: 'linear-gradient(to right, #b993d6, #8ca6db)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
    animation: '0.75s popin'
};

public evenColStyles = {
    background: 'linear-gradient(to right, #8ca6db, #b993d6)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
    animation: '0.75s popin'
};
typescript

    ​ngOnInit 에서는 IgxHierarchicalGrid 열을 동적으로 생성하는 데 사용되는 사전 정의된 columns 컬렉션의 각 열에 대한 cellStyles 구성을 추가합니다.

    // component.ts
public ngOnInit() {
    this.data = SINGERS;
    this.columns = [
        { field: 'Artist' },
        { field: 'HasGrammyAward' },
        { field: 'Debut' },
        { field: 'GrammyNominations' },
        { field: 'GrammyAwards' }
    ];

    this.applyCSS();
}
ts
    public applyCSS() {
    this.columns.forEach((column, index) => {
        column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
    });
}

public updateCSS(css: string) {
    this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
    this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
    this.applyCSS();
}
ts
    <igx-hierarchical-grid #hierarchicalGrid [data]="localdata"    
    [autoGenerate]="false"
    [height]="'580px'">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.header"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-hierarchical-grid>
html

    ​popin 애니메이션 정의

    // component.scss
@keyframes popin {
    0% {
        opacity: 0.1;
        transform: scale(.75, .75);
        filter: blur(3px) invert(1);
    }

    50% {
        opacity: .5;
        filter: blur(1px);
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: none;
    }
}
scss

    데모

    알려진 문제 및 제한 사항

    • 다른 열에서 동일한 조건에 바인딩되는 셀이 있고 한 셀이 업데이트되는 경우 조건이 충족되면 다른 셀은 새 값을 기반으로 업데이트되지 않습니다. 나머지 셀에 변경 사항을 적용하려면 파이프 검사를 수행해야 합니다. 아래 예는 이를 수행하는 방법을 보여줍니다. spread operator(...)에 onCellEdit 이벤트. 이렇게하면 원래 객체가 새 인스턴스로 복사되고 순수 파이프가 발사됩니다.
    public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};
...

editDone(evt) {
    this.backgroundClasses = {...this.backgroundClasses};
}

ts
    <igx-hierarchical-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
  <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
</igx-hierarchical-grid>
html

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.