Web Components 트리 그리드 셀 선택

트리 그리드의 Ignite UI for Web Components 셀 선택 Web Components 사용하면 풍부한 데이터 선택 기능을 사용할 수 있으며 구성 요소에서 강력한 API를 IgcTreeGridComponent 제공합니다. Web Components 트리 그리드는 세 가지 선택 모드를 지원합니다.

• 트리 그리드 다중 셀 선택
• Tree Grid Single Selection
• 트리 그리드 없음 선택

각 옵션에 대해 자세히 알아보겠습니다.

Web Components 트리 그리드 셀 선택 예

아래 샘플은 IgcTreeGridComponent의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDataItem {
    public constructor(init: Partial<EmployeesFlatDataItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDataItem(
                {
                    Age: 55,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    Phone: `0251-031259`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Development Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 42,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    Phone: `(21) 555-0091`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `CEO`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 49,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    Phone: `(071) 23 67 22 20`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `Accounting Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 61,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    Phone: `(21) 555-0091`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Localization Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 43,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    Phone: `0452-076545`,
                    OnPTO: true,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 29,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    Phone: `(14) 555-8122`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 31,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    Phone: `7675-3425`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Software Development Team Lead`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 35,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    Phone: `0695-34 67 21`,
                    OnPTO: true,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    Phone: `981-443655`,
                    OnPTO: false,
                    ParentID: 4,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    Phone: `(2) 283-2951`,
                    OnPTO: true,
                    ParentID: 4,
                    Title: `Vice President`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    Phone: `981-443655`,
                    OnPTO: true,
                    ParentID: 5,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 18,
                    Title: `Senior Accountant`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 50,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    Phone: `035-640230`,
                    OnPTO: false,
                    ParentID: 10,
                    Title: `Senior Localization Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 27,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    Phone: `0342-023176`,
                    OnPTO: true,
                    ParentID: 10,
                    Title: `Senior Localization`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    Phone: `069-0245984`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    Phone: `(91) 745 6200`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    Phone: `069-0245984`,
                    OnPTO: true,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private cellSelectionEditor: IgcPropertyEditorPropertyDescriptionComponent
    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditor = this.cellSelectionEditor = document.getElementById('CellSelectionEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.treeGrid;
            treeGrid.data = this.employeesFlatData;
        }
        this._bind();
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="WebTreeGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="CellSelection"
            name="CellSelectionEditor"
            id="CellSelectionEditor"
            label="Cell Selection"
            value-type="EnumValue"
            drop-down-names="None, Single, Multiple"
            drop-down-values="None, Single, Multiple">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID">
            </igc-column>
            <igc-column
            field="Name">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number">
            </igc-column>
            <igc-column
            field="Title">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="OnPTO"
            header="On PTO"
            data-type="boolean">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

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

선택 유형

트리 그리드 다중 셀 선택

셀을 선택하는 방법:

• ​마우스 드래그- 셀의 직사각형 데이터 선택이 수행됩니다.
• ​Ctrl 키 누르기 + 마우스 끌기- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
• ​Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다. Shift 키를 누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다.
• ​Shift 키를 누른 상태에서 화살표 키를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• ​Shift 키를 누른 상태에서 Ctrl + ↑ ​ ​↓ ​ ​←​ ​→ 키와 Ctrl + Home / End를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• 로 클릭하면 마우스 왼쪽 키를 누른 상태에서 Ctrl 키 키는 선택한 셀 컬렉션에 단일 셀 범위를 추가합니다.
• 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

데모

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDataItem {
    public constructor(init: Partial<EmployeesFlatDataItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;
    public hasEmployees: boolean;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor() {
        super();
        this.push(new EmployeesFlatDataItem(
        {
            Age: 55,
            HireDate: `2008, 3, 20`,
            ID: 1,
            Name: `Johnathan Winchester`,
            Phone: `0251-031259`,
            OnPTO: false,
            ParentID: -1,
            Title: `Development Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 42,
            HireDate: `2014, 1, 22`,
            ID: 4,
            Name: `Ana Sanders`,
            Phone: `(21) 555-0091`,
            OnPTO: true,
            ParentID: -1,
            Title: `CEO`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 49,
            HireDate: `2014, 1, 22`,
            ID: 18,
            Name: `Victoria Lincoln`,
            Phone: `(071) 23 67 22 20`,
            OnPTO: true,
            ParentID: -1,
            Title: `Accounting Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 61,
            HireDate: `2010, 1, 1`,
            ID: 10,
            Name: `Yang Wang`,
            Phone: `(21) 555-0091`,
            OnPTO: false,
            ParentID: -1,
            Title: `Localization Manager`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 43,
            HireDate: `2011, 6, 3`,
            ID: 3,
            Name: `Michael Burke`,
            Phone: `0452-076545`,
            OnPTO: true,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 29,
            HireDate: `2009, 6, 19`,
            ID: 2,
            Name: `Thomas Anderson`,
            Phone: `(14) 555-8122`,
            OnPTO: false,
            ParentID: 1,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 31,
            HireDate: `2014, 8, 18`,
            ID: 11,
            Name: `Monica Reyes`,
            Phone: `7675-3425`,
            OnPTO: false,
            ParentID: 1,
            Title: `Software Development Team Lead`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 35,
            HireDate: `2015, 9, 17`,
            ID: 6,
            Name: `Roland Mendel`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 11,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2009, 10, 11`,
            ID: 12,
            Name: `Sven Cooper`,
            Phone: `0695-34 67 21`,
            OnPTO: true,
            ParentID: 11,
            Title: `Senior Software Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 14,
            Name: `Laurence Johnson`,
            Phone: `981-443655`,
            OnPTO: false,
            ParentID: 4,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 5,
            Name: `Elizabeth Richards`,
            Phone: `(2) 283-2951`,
            OnPTO: true,
            ParentID: 4,
            Title: `Vice President`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 13,
            Name: `Trevor Ashworth`,
            Phone: `981-443655`,
            OnPTO: true,
            ParentID: 5,
            Title: `Director`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 44,
            HireDate: `2014, 4, 4`,
            ID: 17,
            Name: `Antonio Moreno`,
            Phone: `(505) 555-5939`,
            OnPTO: false,
            ParentID: 18,
            Title: `Senior Accountant`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 50,
            HireDate: `2007, 11, 18`,
            ID: 7,
            Name: `Pedro Rodriguez`,
            Phone: `035-640230`,
            OnPTO: false,
            ParentID: 10,
            Title: `Senior Localization Developer`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 27,
            HireDate: `2016, 2, 19`,
            ID: 8,
            Name: `Casey Harper`,
            Phone: `0342-023176`,
            OnPTO: true,
            ParentID: 10,
            Title: `Senior Localization`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2017, 11, 9`,
            ID: 15,
            Name: `Patricia Simpson`,
            Phone: `069-0245984`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 39,
            HireDate: `2010, 3, 22`,
            ID: 9,
            Name: `Francisco Chang`,
            Phone: `(91) 745 6200`,
            OnPTO: false,
            ParentID: 7,
            Title: `Localization Intern`
        }));
        this.push(new EmployeesFlatDataItem(
        {
            Age: 25,
            HireDate: `2018, 3, 18`,
            ID: 16,
            Name: `Peter Lewis`,
            Phone: `069-0245984`,
            OnPTO: true,
            ParentID: 7,
            Title: `Localization Intern`
        }));
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent, IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";

export class Sample {
    private leftTreeGrid: IgcTreeGridComponent;
    private rightGrid: IgcGridComponent;

    private leftTreeGridData: EmployeesFlatData;

    private _bind: () => void;

    constructor() {
        var leftTreeGrid = this.leftTreeGrid = document.getElementById("leftTreeGrid") as IgcTreeGridComponent;
        var rightGrid = this.rightGrid = document.getElementById("rightGrid") as IgcGridComponent;

        this.onTreeGridRangeSelected = this.onTreeGridRangeSelected.bind(this);

        this.leftTreeGridData = new EmployeesFlatData();

        this._bind = () => {
            leftTreeGrid.data = this.leftTreeGridData;
            leftTreeGrid.addEventListener("rangeSelected", this.onTreeGridRangeSelected);
        };
        this._bind();
    }

    public onTreeGridRangeSelected(): void {
        this.rightGrid.data = this.leftTreeGrid.getSelectedData();
    }
}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
    <head>
        <title>Sample | Ignite UI | Web Components | infragistics</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
        <link rel="stylesheet" href="/src/index.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample ig-typography">
                <div class="container horizontal">
                    <igc-tree-grid auto-generate="false" id="leftTreeGrid" name="leftTreeGrid" primary-key="ID" foreign-key="ParentID" cellSelection="multiple">
                        <igc-column field="ID" data-type="number"></igc-column>
                        <igc-column field="Name" data-type="string"></igc-column>
                        <igc-column field="Age" data-type="number"></igc-column>
                        <igc-column field="Title" data-type="string"></igc-column>
                        <igc-column field="HireDate" data-type="date"></igc-column>
                    </igc-tree-grid>
                    <igc-grid auto-generate="false" id="rightGrid" name="rightGrid">
                        <igc-column field="ID" data-type="number"></igc-column>
                        <igc-column field="Name" data-type="string"></igc-column>
                        <igc-column field="Age" data-type="number"></igc-column>
                        <igc-column field="Title" data-type="string"></igc-column>
                        <igc-column field="HireDate" data-type="date"></igc-column>
                    </igc-grid>
                </div>
            </div>
        </div>

        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

트리 그리드 단일 선택

​cellSelection​ ​Single로 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 마우스 끌기는 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

단일 셀을 선택한 경우 selected 이벤트가 발생합니다. 선택 모드 ~이다 하나의 또는 다수의. 다중 셀 선택 모드에서 셀 범위를 선택할 때 RangeSelected 이벤트가 방출됩니다.

트리 그리드 없음 선택

셀 선택을 비활성화하려면 cellSelection​ ​none으로 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고​ ​활성화 스타일만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

키보드 탐색 상호 작용

Shift 키를 누르고 있는 동안

• 현재 선택 항목에 위 셀을 추가하려면 Shift + ↑를 누르세요.
• 현재 선택 항목에 아래 셀을 추가하려면 Shift + ↓를 누르세요.
• 현재 선택 항목에 왼쪽 셀을 추가하려면 Shift + ←를 누르세요.
• Shift + → 현재 선택 항목에 오른쪽 셀을 추가합니다.

Ctrl + Shift 키를 누르고 있는 동안

• Ctrl + Shift + ↑를 사용하면 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택할 수 있습니다.
• Ctrl + Shift + ↓를 눌러 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
• Ctrl + Shift + ←를 누르면 행 시작 부분까지 모든 셀을 선택합니다.
• Ctrl + Shift + → 행 끝까지의 모든 셀을 선택합니다.
• Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
• Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.

연속스크롤은 Grid의 Body 내에서만 가능합니다.

API 사용법

다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.

범위 선택

selectRange- API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd는 행 인덱스를 사용해야 하고, columnStart 및 columnEnd는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid.selectRange(range);
ts

셀 선택 지우기

clearCellSelection 현재 셀 선택을 지웁니다.

this.grid.clearCellSelection();
ts

선택한 데이터 가져오기

getSelectedData 선택 항목에 따라 선택한 데이터의 배열을 형식으로 반환합니다. 아래 예:

• 세 개의 서로 다른 단일 셀을 선택한 경우:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
typescript

• 한 열에서 세 개의 셀을 선택한 경우:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
typescript

• 행 1개, 열 3개에서 마우스 드래그로 셀 3개를 선택한 경우:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
typescript

• 2개의 행과 3개의 열에서 마우스 드래그로 3개의 셀을 선택한 경우:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
typescript

• 서로 다른 두 범위를 선택한 경우:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
typescript

• 두 개의 겹치는 범위를 선택한 경우 형식은 다음과 같습니다.

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
typescript

기능 통합

다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).

• Sorting- 정렬이 수행되면 선택이 지워지지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 동일하게 유지됩니다.
• Paging- 페이징 시 선택한 셀이 지워집니다. 선택 항목은 여러 페이지에 걸쳐 유지되지 않습니다.
• Filtering- 필터링이 수행되면 선택이 지워지지 않습니다. 필터링이 지워지면 처음에 선택한 셀이 반환됩니다.
• Resizing- 열 크기 조정 시 선택한 셀이 지워지지 않습니다.
• Hiding- 선택한 셀을 지우지 않습니다. 열이 숨겨져 있으면 표시되는 다음 열의 셀이 선택됩니다.
• pinning- 선택한 셀이 지워지지 않습니다. 숨기는 것도 마찬가지
• GroupBy- 열 그룹화 시 선택한 셀이 지워지지 않습니다.

스타일링

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

<igc-tree-grid class="treeGrid"></igc-tree-grid>
ts

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.treeGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}
css

데모

EXAMPLE

DATA

TS

HTML

CSS

export class OrdersTreeDataItem {
    public constructor(init: Partial<OrdersTreeDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem(
                {
                    ID: 1,
                    ParentID: -1,
                    Name: `Order 1`,
                    Category: ``,
                    OrderDate: `2010-02-17`,
                    Units: 1844,
                    UnitPrice: 3.73,
                    Price: 6884.38,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 101,
                    ParentID: 1,
                    Name: `Chocolate Chip Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2010-02-17`,
                    Units: 834,
                    UnitPrice: 3.59,
                    Price: 2994.06,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 102,
                    ParentID: 1,
                    Name: `Red Apples`,
                    Category: `Fruit`,
                    OrderDate: `2010-02-17`,
                    Units: 371,
                    UnitPrice: 3.66,
                    Price: 1357.86,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 103,
                    ParentID: 1,
                    Name: `Butter`,
                    Category: `Diary`,
                    OrderDate: `2010-02-17`,
                    Units: 260,
                    UnitPrice: 3.45,
                    Price: 897,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 104,
                    ParentID: 1,
                    Name: `Potato Chips`,
                    Category: `Snack`,
                    OrderDate: `2010-02-17`,
                    Units: 118,
                    UnitPrice: 1.96,
                    Price: 231.28,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 105,
                    ParentID: 1,
                    Name: `Orange Juice`,
                    Category: `Beverages`,
                    OrderDate: `2010-02-17`,
                    Units: 261,
                    UnitPrice: 5.38,
                    Price: 1404.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 2,
                    ParentID: -1,
                    Name: `Order 2`,
                    Category: ``,
                    OrderDate: `2022-05-27`,
                    Units: 1831,
                    UnitPrice: 8.23,
                    Price: 15062.77,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 201,
                    ParentID: 2,
                    Name: `Frozen Shrimps`,
                    Category: `Seafood`,
                    OrderDate: `2022-05-27`,
                    Units: 120,
                    UnitPrice: 20.45,
                    Price: 2454,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 202,
                    ParentID: 2,
                    Name: `Ice Tea`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 840,
                    UnitPrice: 7,
                    Price: 5880,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 203,
                    ParentID: 2,
                    Name: `Fresh Cheese`,
                    Category: `Diary`,
                    OrderDate: `2022-05-27`,
                    Units: 267,
                    UnitPrice: 16.55,
                    Price: 4418.85,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 204,
                    ParentID: 2,
                    Name: `Carrots`,
                    Category: `Vegetables`,
                    OrderDate: `2022-05-27`,
                    Units: 360,
                    UnitPrice: 2.77,
                    Price: 997.2,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 205,
                    ParentID: 2,
                    Name: `Apple Juice`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 244,
                    UnitPrice: 5.38,
                    Price: 1312.72,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 3,
                    ParentID: -1,
                    Name: `Order 3`,
                    Category: ``,
                    OrderDate: `2022-08-04`,
                    Units: 1972,
                    UnitPrice: 3.47,
                    Price: 6849.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 301,
                    ParentID: 3,
                    Name: `Skimmed Milk 1L`,
                    Category: `Diary`,
                    OrderDate: `2022-08-04`,
                    Units: 1028,
                    UnitPrice: 3.56,
                    Price: 3659.68,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 302,
                    ParentID: 3,
                    Name: `Bananas 5 Pack`,
                    Category: `Fruit`,
                    OrderDate: `2022-08-04`,
                    Units: 370,
                    UnitPrice: 6.36,
                    Price: 2353.2,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 303,
                    ParentID: 3,
                    Name: `Cauliflower`,
                    Category: `Vegetables`,
                    OrderDate: `2022-08-04`,
                    Units: 283,
                    UnitPrice: 0.95,
                    Price: 268.85,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 304,
                    ParentID: 3,
                    Name: `White Chocolate Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2022-08-04`,
                    Units: 291,
                    UnitPrice: 1.95,
                    Price: 567.45,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 4,
                    ParentID: -1,
                    Name: `Order 4`,
                    Category: ``,
                    OrderDate: `2023-01-04`,
                    Units: 1065,
                    UnitPrice: 5.56,
                    Price: 5923.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 401,
                    ParentID: 4,
                    Name: `Mini Milk Chocolate Cookie Bites`,
                    Category: `Cookies`,
                    OrderDate: `2023-01-04`,
                    Units: 68,
                    UnitPrice: 2.25,
                    Price: 153,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 402,
                    ParentID: 4,
                    Name: `Wild Salmon Fillets`,
                    Category: `Seafood`,
                    OrderDate: `2023-01-04`,
                    Units: 320,
                    UnitPrice: 16.15,
                    Price: 5168,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 403,
                    ParentID: 4,
                    Name: `Diet Lemonade`,
                    Category: `Beverages`,
                    OrderDate: `2023-01-04`,
                    Units: 437,
                    UnitPrice: 0.5,
                    Price: 218.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 404,
                    ParentID: 4,
                    Name: `Potatoes`,
                    Category: `Vegetables`,
                    OrderDate: `2023-01-04`,
                    Units: 240,
                    UnitPrice: 1.6,
                    Price: 384,
                    Delivered: true
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;

        this._bind = () => {
            grid.data = this.ordersTreeData;
        }
        this._bind();
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="ID"
            header="Order ID"
            data-type="number">
            </igc-column>
            <igc-column
            field="Name"
            data-type="string"
            header="Order Product">
            </igc-column>
            <igc-column
            field="Units"
            data-type="number">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="currency">
            </igc-column>
            <igc-column
            field="Price"
            header="Price"
            data-type="currency">
            </igc-column>
            <igc-column
            field="OrderDate"
            header="Order Date"
            data-type="date">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#grid {
    --cell-selected-text-color: #FFFFFF;
    --cell-active-border-color: #f2c43c;
    --cell-selected-background: #0062a3;
}

cssコピー

Edit in: Codesandbox

API 참조

• IgcTreeGridComponent

추가 리소스

• 선택
• 행 선택
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 가상화 및 성능

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components