DataGrid 내부에 데이터를 표시할 때, 사용자가 그리드 어디에 있든지 행이나 열을 언제나 볼 수 있도록 고정하려는 경우가 있습니다. Wijmo의 FlexGrid 컨트롤을 사용하여 이 작업을 쉽고 간단하게 수행할 수 있습니다.

이 블로그에서는 FlexGrid 컨트롤 내의 행과 열을 모두 고정하는 방법과 행과 열 고정/고정 해제를 토글하는 방법에 대해 개략적으로 설명합니다.

Wijmo는 가장 빠르고 가장 유연한 JavaScript DataGrid와 함께 정렬, 그룹화, 검색, Excel과 유사한 필터링, DataMaps, 사용자 정의 CellTemplates, 스파크라인, 풍부한 편집, Excel/PDF 내보내기, 유효성 검사, DetailsRows 등의 기능을 제공합니다.

전체 Wijmo 컴포넌트 라이브러리를 다운로드하실 수 있습니다.

필수 모듈을 가져오는 방법

FlexGrid 컨트롤을 생성하려면 먼저 JavaScript 파일에 필요한 Wijmo 모듈을 가져와야 합니다.

import ‘@grapecity/wijmo.styles/wijmo.css’;  
import { FlexGrid } from ‘@grapecity/wijmo.grid’;

여기서는 FlexGrid 컴포넌트를 Wijmo의 그리드 모듈과 Wijmo의 CSS 파일에서 가져와 생성 시 그리드 스타일을 올바르게 지정할 수 있습니다

데이터 및 FlexGrid 생성

이제 FlexGrid에서 사용할 데이터 집합을 생성하고 FlexGrid 컨트롤을 초기화해야 합니다. 이 샘플에서는 그리드 내부에 배치될 임의의 데이터 목록을 생성합니다.

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];  
for (var i = 0; i < 200; i++) {  
  data.push({  
    id: i,  
    country: countries[i % countries.length],  
    downloads: Math.round(Math.random() * 20000),  
    sales: Math.random() * 10000,  
    expenses: Math.random() * 5000,  
    num1: Math.random() * 5000,  
    num2: Math.random() * 5000,  
    num3: Math.random() * 5000,  
    num4: Math.random() * 5000,  
    num5: Math.random() * 5000,  
  });  
}

여기서 데이터 변수를 생성하고 그리드의 데이터 소스로 사용하기 위해 개체 집합을 푸시합니다. 그런 다음 JavaScript를 사용하여 FlexGrid 컨트롤을 생성하겠습니다.

var theGrid = new FlexGrid('#theGrid', {  
  itemsSource: data,  
  frozenRows: 2,  
  frozenColumns: 1  
});

이것이 FlexGrid 컨트롤입니다. 여기서는 itemsSource, frozenRows 및 frozenColumns의 세 가지 속성만 설정합니다. frozenRows 및 frozenColumns 속성은 그리드에서 고정되는 행/열의 수를 결정하는 정숫값을 사용합니다.

고정된 행과 열 토글하기

마지막으로 사용자에게 고정된 행과 열을 전환할 수 있는 기능을 제공합니다. 먼저 두 개의 버튼을 만듭니다.

  Toggle Frozen Rows  
​
  Toggle Frozen Columns  

이제 이 두 버튼을 클릭하면 frozenRows 및 frozenColumns 속성을 수정하는 이벤트에 연결합니다.

document.getElementById('btnFreezeRows').addEventListener('click', function () {  
  theGrid.frozenRows = theGrid.frozenRows > 0 ? 0 : 2;  
});  
document.getElementById('btnFreezeCols').addEventListener('click', function () {  
  theGrid.frozenColumns = theGrid.frozenColumns > 0 ? 0 : 1;  
});

이 버튼 중 하나를 누르면 누른 버튼에 따라 고정된 행/열이 있는지 확인합니다. 행/열이 이미 고정된 경우 JavaScript는 해당 행/열의 고정을 취소하고, 그렇지 않은 경우에는 그리드에서 고정됩니다.

여기에서 샘플을 실시간으로 확인하실 수 있습니다.