Web Components 트리 그리드 행 선택

    Web Components Tree Grid의 Ignite UI for Web Components 행 선택 기능을 사용하면 사용자가 단일 또는 여러 행의 데이터를 대화형으로 선택, 강조 표시 또는 선택 해제할 수 있습니다. IgcTreeGridComponent 에는 여러 가지 선택 모드가 있습니다.

    • 없음 선택
    • 다중 선택
    • 단일 선택

    Web Components 행 선택 예

    아래 샘플은 네 가지 유형의 IgcTreeGridComponent​ ​행 선택 동작을 보여 줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화하십시오. 스낵바 메시지 상자를 통해 각 단추 상호 작용에 대한 간략한 설명이 제공됩니다. 전환 버튼을 사용하여 행 선택기 확인란을 숨기 거나 표시할 수 있습니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    설정

    에서 행 선택을 IgcTreeGridComponent 설정하려면 속성을 설정하기만 하면 됩니다 rowSelection. 이 속성은 열거형을 허용합니다 GridSelectionMode.

    GridSelectionMode 다음 모드를 노출합니다.

    • 없음
    • 하나의
    • 다수의
    • MultipleCascade

    아래에서는 각각에 대해 더 자세히 살펴보겠습니다.

    없음 선택

    안에 IgcTreeGridComponent 기본적으로 행 선택은 비활성화되어 있습니다(rowSelection는 없음). 그래서 당신은 할 수 있습니다 안 와의 상호 작용을 통해 행을 선택하거나 선택 취소합니다. IgcTreeGridComponent UI에서 이러한 작업을 완료하는 유일한 방법은 제공된 API 메서드를 사용하는 것입니다.

    단일 선택

    이제 단일 행 선택을 쉽게 설정할 수 있습니다. 사용자가 해야 할 유일한 작업은 rowSelection​ ​Single 속성으로 설정하는 것뿐입니다. 이렇게 하면 그리드 내에서 하나의 행만 선택할 수 있습니다. 행의 셀에 포커스를 두고 셀을 클릭하거나 스페이스 키를 눌러 행을 선택할 수 있으며, 물론 행 선택기 필드를 클릭하여 행을 선택할 수도 있습니다. 행이 선택되거나 선택 취소되면 RowSelectionChanging 이벤트가 발생합니다.

    <igc-tree-grid id="grid" row-selection="Single" auto-generate="true"
        allow-filtering="true">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelection);
}
ts
    public handleRowSelection(args: IgcRowSelectionEventArgs) {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}
ts

    다중 선택

    여러 행 선택을 IgcTreeGridComponent 활성화하려면 속성을 로 설정 rowSelection 하십시오 Multiple. 이렇게 하면 각 행과 머리글에서 행 선택기 필드를 사용할 수 있습니다 IgcTreeGridComponent. 행 선택기를 사용하면 사용자가 여러 행을 선택할 수 있으며, 스크롤, 페이징 및 데이터 작업(예: 정렬 및 필터링)을 통해 선택 항목이 유지됩니다. 셀을 클릭하거나 셀에 초점이 맞춰져 있을 때 스페이스 키를 눌러 행을 선택할 수도 있습니다. 한 행을 선택하고 Shift 키를 누른 상태에서 다른 행을 클릭하면 전체 행 범위가 선택됩니다. 이 선택 모드에서 단일 행을 클릭하면 이전에 선택한 행이 선택 취소됩니다. Ctrl 키를 누른 상태에서 클릭하면 행이 전환되고 이전 선택이 유지됩니다.

    <igc-tree-grid id="grid" primary-key="ProductID" row-selection="Multiple"
        allow-filtering="true" auto-generate="true">
</igc-tree-grid>
html

    캐스케이드 선택

    계단식 행 선택을 IgcTreeGridComponent 활성화하려면 속성을 로 설정 rowSelection 하십시오 MultipleCascade. 이렇게 하면 각 행과 머리글에서 행 선택기 필드를 사용할 수 있습니다 IgcTreeGridComponent. 행 선택기를 사용하면 아래 트리의 모든 자식을 선택하는 여러 행을 선택할 수 있습니다. 선택 영역은 스크롤, 페이징 및 정렬 및 필터링과 같은 데이터 작업을 통해 유지됩니다. 셀을 클릭하거나 셀에 초점이 맞춰져 있을 때 스페이스 키를 눌러 행을 선택할 수도 있습니다. 한 행을 선택하고 Shift 키를 누른 상태에서 다른 행을 클릭하면 상위 레코드를 선택하면 선택한 범위에 있지 않더라도 모든 자식이 선택됩니다. 이 선택 모드에서 단일 행을 클릭하면 이전에 선택한 행이 선택 취소됩니다. Ctrl 키를 누른 상태에서 클릭하면 행과 자식이 전환되고 이전 선택이 유지됩니다.

    <igc-tree-grid id="grid" primaryKey="ID" foreign-key="ParentID" auto-generate="true"
        row-selection="MultipleCascade" allow-filtering="true">
</igc-tree-grid>
html

    이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다. 부모에 선택된 자식과 선택 취소된 자식이 있는 경우 해당 확인란은 확정되지 않은 상태입니다.

    노트

    • 행 선택은 RowSelectionChanging 이벤트를 트리거합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 및 제거된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소 가능 하므로 선택을 방지할 수 있습니다.
    • 행 선택이 활성화되면 행 선택기가 표시되지만 표시하지 않으려면 hideRowSelectors​ ​true로 설정할 수 있습니다.
    • 런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.
    Ignite UI for Web Components | CTA 배너

    API 사용

    프로그래밍 방식으로 행 선택

    아래 코드 조각을 사용하면 (primaryKey 통해) 하나 또는 여러 행을 동시에 선택할 수 있습니다. 또한 이 메서드의 두 번째 매개 변수는 이전 행 선택을 지울지 여부를 선택할 수 있는 부울 속성입니다. 이전 선택 사항은 기본적으로 유지됩니다.

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='select'>Select 1,2 and 5</button>
html
    constructor() {
    document.getElementById("select").addEventListener("click", this.onClickSelect);
}
public onClickSelect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.selectRows([1,2,5], true);
}
ts

    이렇게 하면 ID가 1, 2 및 5인 데이터 항목에 해당하는 행이 IgcTreeGridComponent 선택 항목에 추가됩니다.

    행 선택 취소

    프로그래밍 방식으로 행 선택을 취소해야 하는 경우 deselectRows 메서드를 사용할 수 있습니다.

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='deselect'>DeSelect</button>
html
    constructor() {
    document.getElementById("deselect").addEventListener("click", this.onClickDeselect);
}
public onClickDeselect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.deselectRows([1,2,5]);
}
ts

    행 선택 이벤트

    행 선택에 일부 변경이 있으면 RowSelectionChanging 이벤트가 발생합니다. RowSelectionChanging 다음 인수를 노출합니다.

    • OldSelection- 행 선택의 이전 상태를 포함하는 행 ID 배열입니다.
    • NewSelection- 행 선택의 새 상태와 일치하는 행 ID 배열입니다.
    • Added- 현재 선택 항목에 추가된 행 ID의 배열입니다.
    • Removed- 이전 선택 상태에 따라 현재 제거된 행 ID 배열입니다.
    • Event- 행 선택 변경을 트리거한 원래 이벤트입니다.
    • Cancel- 행 선택 변경을 방지할 수 있습니다.
    <igc-tree-grid id="grid">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}

public handleRowSelectionChange(args) {
    args.detail.cancel = true; // this will cancel the row selection
}
ts

    모든 행 선택

    제공하는 또 다른 유용한 API 메서드 IgcTreeGridComponent는 다음과 같습니다 selectAllRows. 기본적으로 이 방법은 모든 데이터 행을 선택하지만 필터링이 적용되면 필터 기준과 일치하는 행만 선택합니다. false 매개 변수 SelectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 그리드의 모든 데이터가 선택됩니다.

    참고​ ​selectAllRows 삭제된 행을 선택하지 않는다는 점을 명심하십시오.

    모든 행 선택 취소

    IgcTreeGridComponent​ ​deselectAllRows 기본적으로 모든 데이터 행의 선택을 취소하지만 필터링이 적용된 경우 필터 조건과 일치하는 행만 선택 취소하는 메서드를 제공합니다. false 매개 변수 DeselectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 모든 행 선택 상태가 지워집니다.

    선택한 행을 얻는 방법

    현재 선택된 행을 확인해야 하는 경우 selectedRows getter를 사용하여 해당 행 ID를 얻을 수 있습니다.

    public getSelectedRows() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    const currentSelection = grid.selectedRows; // return array of row IDs
}
typescript

    또한 selectedRows에 행 ID를 할당하면 그리드의 선택 상태를 변경할 수 있습니다.

    public mySelectedRows = [1, 2, 3]; // an array of row IDs
constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.selectedRows = this.mySelectedRows;
}
ts

    행 선택기 템플릿

    에서 머리글 및 행 선택기를 IgcTreeGridComponent 템플릿화할 수 있으며 다양한 시나리오에 유용한 기능을 제공하는 컨텍스트에 액세스할 수도 있습니다.

    기본적으로 는 IgcTreeGridComponent 행 선택기의 상위 컨테이너 또는 행 자체에서 모든 행 선택 상호 작용을 처리 하고 템플릿에 대한 상태 시각화만 남깁니다. 기본 기능 재정의는 일반적으로 RowSelectionChanging 이벤트를 사용하여 수행해야 합니다. 기본 기능을 재정의하는 처리기를 Click 사용하여 사용자 지정 템플릿을 구현하는 경우 올바른 행 상태를 유지하기 위해 이벤트의 전파를 중지해야 합니다.

    행 템플릿

    사용자 지정 행 선택기 템플릿을 만들려면 속성 내에서 igc-tree-grid 사용할 수 있습니다 rowSelectorTemplate. 템플릿에서 암시적으로 제공된 context 변수에 액세스할 수 있으며, 행의 상태에 대한 정보를 제공하는 속성을 사용할 수 있습니다.

    ​selected 속성은 현재 행이 선택되었는지 여부를 나타내며, index 속성은 행 인덱스에 액세스하는 데 사용할 수 있습니다.

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox checked></igc-checkbox>
            </div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox></igc-checkbox>
            </div>`;
    }
}
ts

    이 rowID 속성은 행의 참조를 가져오는 데 사용할 수 있습니다 igc-tree-grid. 이는 행 선택기 요소에서 처리기를 click 구현할 때 유용합니다.

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    return html`
        <igc-checkbox
            @click="${(event: any) => {
            this.onSelectorClick(event, ctx.implicit.key);
            }}"
        ></igc-checkbox>
    `;
}
ts

    위의 예에서는 IgcCheckboxComponent를 사용하고 있으며 rowContext.selected​ ​checked 속성에 바인딩합니다. 행 번호 매기기 데모에서 이를 확인하세요.

    헤더 템플릿

    사용자 지정 헤더 선택기 템플릿을 만들려면 내에서 IgcTreeGridComponent 속성을 사용할 headSelectorTemplate 수 있습니다. 템플릿에서 헤더의 상태에 대한 정보를 제공하는 속성을 사용하여 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있습니다.

    이 SelectedCount 속성은 현재 선택된 totalCount 행 수를 보여 주고 총 행 IgcTreeGridComponent 수는 보여 줍니다.

    public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
};
ts

    ​SelectedCount 및 TotalCount 속성을 사용하여 헤드 선택기를 선택해야 하는지 또는 불확정(부분 선택)해야 하는지 결정할 수 있습니다.

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>
html
    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.headSelectorTemplate = this.headSelectorTemplate;
}

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return html`<igc-checkbox checked></igc-checkbox>`;
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return html`<igc-checkbox indeterminate></igc-checkbox>`;
        }
        return html`<igc-checkbox></igc-checkbox>`;
}
ts

    행 번호 매기기 데모

    이 데모에서는 사용자 정의 헤더 및 행 선택기의 사용법을 보여줍니다. 후자는 index 사용하여 행 번호를 표시하고 selected에 바인딩된 IgcCheckboxComponent 표시합니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Excel 스타일 행 선택기 데모

    이 데모에서는 Excel과 유사한 헤더 및 행 선택기와 유사한 사용자 지정 템플릿을 사용합니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    조건부 선택 데모

    이 데모에서는 RowSelectionChanging 이벤트와 선택 불가능한 행에 대한 확인란이 비활성화된 사용자 지정 템플릿을 사용하여 일부 행이 선택되는 것을 방지합니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스

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