Hierarchical Grid 열 숨기기
The Material UI Grid has a built-in column hiding UI, which can be used through the Hierarchical Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.
데모
Hierarchical Grid 설정
Hierarchical Grid를 작성하고 데이터를 바인딩하는 것으로 시작합니다. 또한, 열에서 필터링 및 정렬을 사용할 수 있습니다.
<igx-hierarchical-grid class="hgrid" [data]="localdata"
[height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>
<igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
<igx-column field="Photo">
<ng-template igxCell let-cell="cell">
<div class="cell__inner_2">
<img [src]="cell.value" class="photo" />
</div>
</ng-template>
</igx-column>
<igx-column field="Debut" [sortable]="true"></igx-column>
<igx-column field="Grammy Nominations" [sortable]="true"></igx-column>
<igx-column field="Grammy Awards" [sortable]="true"></igx-column>
<igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
<igx-column field="Album" [sortable]="true"></igx-column>
<igx-column field="Launch Date" [sortable]="true"></igx-column>
<igx-column field="Billboard Review" [sortable]="true"></igx-column>
<igx-column field="US Billboard 200" [sortable]="true"></igx-column>
<igx-row-island [key]="'Songs'" [autoGenerate]="false">
<igx-column field="No."></igx-column>
<igx-column field="Title"></igx-column>
<igx-column field="Released"></igx-column>
<igx-column field="Genre"></igx-column>
</igx-row-island>
</igx-row-island>
<igx-row-island [key]="'Tours'" [autoGenerate]="false">
<igx-column field="Tour"></igx-column>
<igx-column field="Started on"></igx-column>
<igx-column field="Location"></igx-column>
<igx-column field="Headliner"></igx-column>
</igx-row-island>
</igx-hierarchical-grid>
도구 모음의 열 숨기기 UI
The built-in Column Hiding UI is placed inside an IgxDropDownComponent in the Hierarchical Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.
For this purpose all we have to do is set both the IgxGridToolbarActionsComponent and the IgxGridToolbarHidingComponent inside of the Hierarchical Grid. We will also add a title to our toolbar by using the IgxGridToolbarTitleComponent and a custom style for our Hierarchical Grid's wrapper.
<!--columnHiding.component.html-->
<div class="hgrid-sample">
<igx-hierarchical-grid class="hgrid" [data]="localdata">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
...
</igx-hierarchical-grid>
</div>
/* columnHiding.component.css */
.photo {
vertical-align: middle;
max-height: 62px;
}
.cell__inner_2 {
margin: 1px
}
By using the columnsAreaMaxHeight property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.
// columnHiding.component.ts
public ngAfterViewInit() {
this.hidingActionRef.columnsAreaMaxHeight = "200px";
}
열 숨기기 UI에 확장된 기능 세트를 사용하려면 열 숨기 UI 컴포넌트 자체에 대한 참조를 반환하는 도구 모음의 columnHidingUI 속성을 사용합니다. 이렇게 하면 각 API에 접속하여 애플리케이션의 요구에 따라 사용할 수 있습니다.
이 조항 시작 부분에 있는 코드의 결과는 열 숨기기 데모 부분에서 확인할 수 있습니다.
API 참조
이 항목에서는 Hierarchical Grid 도구 모음에 정의된 열 숨기기 UI를 사용하는 방법을 설명했습니다.
열 숨기기 UI에는 아래에 나열된 몇 가지 API가 추가로 포함되어 있습니다.
사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문:
IgxHierarchicalGridComponent 이벤트:
스타일:
추가 리소스
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
GitHub