Web Components 그리드 선택 개요

Web Components Grid의 Ignite UI for Web Components Select 기능을 사용하면 간단한 마우스 상호 작용을 사용하여 데이터와 쉽게 상호 작용하고 조작할 수 있습니다. 사용 가능한 선택 모드는 세 가지입니다.

• 행 선택
• 셀 선택
• Column selection

이 부동산을rowSelection 통해 다음과 같이 지정할 수 있습니다:

• 없음
• 하나의
• 다중 선택

Web Components Grid Selection Example

아래 샘플은 세 가지 유형의 세포 선택 행동을 보여줍니다.IgcGridComponent 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요.

Web Components Grid Selection Options

Ignite UI for Web ComponentsIgcGridComponent 구성 요소는 세 가지 선택 모드를 제공합니다 -행 선택, 셀 선택, 그리고 열 선택. 기본적으로 멀티셀 선택 모드만 활성화IgcGridComponent 되어 있습니다. 선택 모드를 변경하거나 활성화하려면 속성 또는 속성을 사용할rowSelection​cellSelection​selectable 수 있습니다.

Web Components Grid Row Selection

속성은rowSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

• None- 행 선택은 해당 조건에서IgcGridComponent 비활성화됩니다.
• Single- 한 행만 선택할 수 있습니다.IgcGridComponent​
• Multiple- 다중 행 선택은 행 선택기를 사용해 +와 같은 CTRL​ ​click 키 조합을 사용하거나, 셀이 집중되면 누 space key를 수 있습니다.

자세한 내용은 행 선택 항목을 참조하세요.

Web Components Grid Cell Selection

속성은cellSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

• None- 셀 선택은 비활성화됩니다.IgcGridComponent​
• Single- 선택 가능한IgcGridComponent 셀은 단 하나의 셀만 가능합니다.
• Multiple- 현재 이 상태는 선택의 기본 상태입니다.IgcGridComponent 다중 셀 선택은 왼쪽 버튼 마우스를 연속으로 클릭한 후 셀 위를 마우스로 드래그하여 사용할 수 있습니다.

자세한 내용은 셀 선택 항목을 참조하세요.

Web Components Grid Column Selection

이 속성은selectable 각 항목IgcColumnComponent 별로 다음과 같은 옵션을 지정할 수 있게 해줍니다. 해당 열 선택은 이 속성이 참 또는 거짓으로 설정되면 각각 활성화되거나 비활성화됩니다.

이로 인해 다음 세 가지 변형이 발생합니다.

• 단일 선택 - 열 셀을 마우스로 클릭합니다.
• 다중 열 선택 - 열 셀을 누르고 CTRL + mouse click 누릅니다.
• 범위 열 선택 - 홀딩 SHIFT + mouse click 그 사이의 모든 것을 선택합니다.

자세한 내용은 열 선택 항목으로 이동하세요.

Web Components Grid Context Menu

이벤트를ContextMenu 사용하면 작업을IgcGridComponent 쉽게 할 수 있는 맞춤형 컨텍스트 메뉴를 추가할 수 있습니다. 격자의 몸체를 우클릭 하면, 이벤트가 트리거된 셀을 방출합니다. 컨텍스트 메뉴는 방출된 셀과 함께 작동합니다.

​다중 셀 선택이 있는 경우 선택된 셀이 다중 셀 선택 영역에 있는지 확인하는 로직을 넣습니다. 그렇다면 선택한 셀의 값도 내보냅니다.

기본적으로 주요 기능은 다음과 같습니다.

    public rightClick(event: any) {
        const eventArgs = event.detail;
        eventArgs.event.preventDefault();
        this.multiCellArgs = {};
        if (this.multiCellSelection) {
          const node = eventArgs.cell.selectionNode;
          const isCellWithinRange = this.grid.getSelectedRanges().some((range) => {
            if (
              node.column >= range.columnStart &&
              node.column <= range.columnEnd &&
              node.row >= range.rowStart &&
              node.row <= range.rowEnd
            ) {
              return true;
            }
            return false;
          });
          if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
          }
        }
        this.contextmenuX = eventArgs.event.clientX;
        this.contextmenuY = eventArgs.event.clientY;
        this.clickedCell = eventArgs.cell;
        this.toggleContextMenu();
      }

상황에 맞는 메뉴에는 다음과 같은 기능이 있습니다.

• 선택한 셀의 값을 복사합니다.
• 선택한 셀의 dataRow를 복사합니다.
• 선택한 셀이 다중 셀 선택 범위 내에 있는 경우 선택한 데이터를 모두 복사합니다.

    public copySelectedRowData() {
        const selectedData = this.grid.getRowData(this.clickedCell.id.rowID);
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }

    public copySelectedCellData() {
        const selectedData = this.clickedCell.value;
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }


    public copySelectedData() {
        const selectedData = this.grid.getSelectedData();
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);

        this.toggleContextMenu();
    }

    private copyData(data: any[]) {
        const tempElement = document.createElement('input');
        document.body.appendChild(tempElement);
        tempElement.setAttribute('id', 'temp_id');
        (document.getElementById('temp_id') as HTMLInputElement).value = JSON.stringify(data);
        tempElement.select();
        document.execCommand('copy');
        document.body.removeChild(tempElement);
    }

​IgcGridComponent복사된 데이터를 가져와서 컨테이너 요소에 붙여넣습니다.

그리드와 컨텍스트 메뉴를 결합하는 데 사용할 템플릿은 다음과 같습니다.

    <div class="container sample">
      <div class="wrapper">
        <igc-grid auto-generate="false" width="50%" height="100%" name="grid" id="grid">
          <igc-column field="ProductID" header="Product ID">
          </igc-column>
          <igc-column field="ProductName" header="Product Name">
          </igc-column>
          <igc-column field="UnitsInStock" header="Units In Stock" data-type="number">
          </igc-column>
          <igc-column field="UnitPrice" header="Units Price" data-type="number">
          </igc-column>
          <igc-column field="Discontinued" data-type="boolean">
          </igc-column>
          <igc-column field="OrderDate" header="Order Date" data-type="date">
          </igc-column>
        </igc-grid>
        <div id="selectedArea" class="selected-data-area">
        </div>
      </div>
    </div>
    <div id="menu" style="display: none;" class="contextmenu">
      <span id="copySingleCell" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Cell Data
      </span>
      <span id="copyRow" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Row Data
      </span>
      <span id="copyMultiCells" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Cells Data
      </span>
    </div>
  </div>

여러 셀을 선택하고 마우스 오른쪽 버튼을 누릅니다. 상황에 맞는 메뉴가 나타나고 셀 데이터 복사를 선택하면 선택한 데이터가 오른쪽 빈 상자에 나타납니다.

결과는 다음과 같습니다.

Known Issues and Limitations

그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

• 행 선택
• 행 확장/축소
• 행 편집
• 행 고정

API References

• IgcGridComponent

Additional Resources

• 행 선택
• 셀 선택
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 가상화 및 성능

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

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