Web Components 계층적 그리드 열 고정

    Web Components Hierarchical Grid의 Ignite UI for Web Components Column Pinning 기능을 사용하면 개발자가 특정 열을 원하는 순서로 잠그고 사용자가 IgcGridComponent를 가로로 스크롤하더라도 항상 가시성을 확보할 수 있습니다. Web Components Hierarchical Grid 툴바를 통해 액세스할 수 있는 Column Pinning을 위한 통합 UI가 있습니다. 또한 개발자는 열의 고정 상태를 변경하는 사용자 지정 사용자 인터페이스를 빌드할 수 있는 유연성을 갖추고 있습니다.

    Web Components Hierarchical Grid 열 고정 예제

    이 예제에서는 열 하나 또는 여러 열을 의 왼쪽 또는 오른쪽 IgcHierarchicalGridComponent에 고정하는 방법을 보여 줍니다.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    열 고정 API

    열 고정은 의 속성을 통해 pinned 제어됩니다 IgcColumnComponent. 고정된 열은 기본적으로 의 왼쪽 IgcHierarchicalGridComponent에 렌더링되며 본문에서 IgcHierarchicalGridComponent 고정되지 않은 열의 가로 스크롤을 통해 고정된 상태로 유지됩니다.

    <igc-hierarchical-grid id="hierarchicalGrid" class="hgrid" auto-generate="false"
        height="600px" width="800px" >
    <igc-column field="Artist" width="200px" pinned="true"></igc-column>
    <igc-column field="Debut" width="200px"></igc-column>
</igc-hierarchical-grid>
html

    또한 의 또는 unpinColumn 메소드 IgcHierarchicalGridComponent를 사용하여 IgcHierarchicalGridComponent​ ​pinColumn 필드 이름으로 열을 고정하거나 고정 해제할 수 있습니다.

    this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');
typescript

    두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.

    열은 가장 오른쪽에 고정된 열의 오른쪽에 고정되어 있습니다. 고정된 열의 순서를 변경하려면 ColumnPin 이벤트를 구독하고 이벤트 인수의 InsertAtIndex 속성을 원하는 위치 인덱스로 변경하면 됩니다.

    <igc-hierarchical-grid id="dataGrid" auto-generate="true"></igc-hierarchical-grid>
html
    constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}
typescript
    public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}
typescript
    Ignite UI for Web Components | CTA 배너

    고정 위치

    ​pinning 구성 옵션을 통해 열 고정 위치를 변경할 수 있습니다. 열 위치를 시작 또는 끝으로 설정할 수 있습니다. 끝으로 설정하면 열이 고정 해제된 열 뒤의 그리드 끝에서 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있지만 고정된 열은 오른쪽에 고정된 상태로 유지됩니다.

    <igc-hierarchical-grid id="dataGrid" auto-generate="true"></igc-hierarchical-grid>
html
    var grid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };
typescript

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    사용자 정의 열 고정 UI

    관련 API를 통해 사용자 정의 UI를 정의하고 열의 핀 상태를 변경할 수 있습니다.

    도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다.

    이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.

    <igc-hierarchical-grid id="hGrid" class="hierarchicalGrid" auto-generate="false"
    height="500px" width="100%">
    <igc-column id="CompanyName" field="CompanyName" header="Company Name" width="200px" pinned="true"></igx-column>
    <igc-column id="ContactName" field="ContactName" header="Contact Name" width="150px"></igx-column>
    <igc-column id="ContactTitle" field="ContactTitle" header="Contact Title" width="200px"></igx-column>
    <igc-row-island key="Orders" auto-generate="false">
        <igc-column id="OrderDate" field="OrderDate" header="Order Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="RequiredDate" field="RequiredDate" header="Required Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShippedDate" field="ShippedDate" header="Shipped Date" data-type="Date" width="150px"></igx-column>
        <igc-column id="ShipVia" field="ShipVia" header="Ship Via" width="150px"></igx-column>
        <igc-row-island key="OrderDetails" auto-generate="false">
            <igc-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
            <igc-column field="Quantity" width="150px"></igx-column>
            <igc-column field="Discount" width="150px"></igx-column>
        </igc-row-island>
    </igc-row-island>
</igc-hierarchical-grid>
html
    constructor() {
    var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent;
    var CompanyName = this.CompanyName = document.getElementById('CompanyName') as IgcColumnComponent;
    var ContactName = this.ContactName = document.getElementById('ContactName') as IgcColumnComponent;
    var ContactTitle = this.ContactTitle = document.getElementById('ContactTitle') as IgcColumnComponent;

    var OrderDate = this.OrderDate = document.getElementById('OrderDate') as IgcColumnComponent;
    var RequiredDate = this.RequiredDate = document.getElementById('RequiredDate') as IgcColumnComponent;
    var ShippedDate = this.ShippedDate = document.getElementById('ShippedDate') as IgcColumnComponent;
    var ShipVia = this.ShipVia = document.getElementById('ShipVia') as IgcColumnComponent;

    hGrid.data = this.data;
    CompanyName.headerTemplate = this.pinHeaderTemplate;
    ContactName.headerTemplate = this.pinHeaderTemplate;
    ContactTitle.headerTemplate = this.pinHeaderTemplate;
    OrderDate.headerTemplate = this.pinHeaderTemplate;
    RequiredDate.headerTemplate = this.pinHeaderTemplate;
    ShippedDate.headerTemplate = this.pinHeaderTemplate;
    ShipVia.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}
ts

    사용자 정의 아이콘을 클릭하면 해당 열의 API 메소드를 사용하여 관련 열의 고정 상태를 변경할 수 있습니다.

    public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}
typescript

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    고정 제한

    • 열 너비를 백분율(%)로 명시적으로 설정하면 고정된 열이 있을 때 본문과 IgcHierarchicalGridComponent 헤더 내용이 잘못 정렬됩니다. 열 고정이 제대로 작동하려면 열 너비가 픽셀(px) 단위이거나 에 의해 IgcHierarchicalGridComponent 자동으로 할당되어야 합니다.

    스타일링

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드의 ID 설정해야 합니다.

    <igc-hierarchical-grid id="grid"></igc-hierarchical-grid>
html

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    #grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}
css

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스

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