FlexGrid에서의 DataMaps

여러 상황에서 열이 값을 매핑하여 셀에 실제 그리드에 저장된 값과 다른 값이 표시되도록 할 수 있습니다.

예를 들어, 값이 0에서 3 사이의 'rating' 열이 있을 수 있으며,이 대신 'Low', 'Medium' 또는 'High' 문자열을 표시하려고 합니다.

또는 고객 ID가 포함된 'customer' 열이 있고,이 대신 고객 이름을 표시하고 싶을 수 있습니다.

formatItem 이벤트를 사용하여 두 작업을 모두 수행할 수 있지만 FlexGrid가 더 나은 대안을 제공합니다: DataMaps.열의 dataMap 속성을 DataMap의 인스턴스로 설정하면 그리드에서 이를 사용하여 다음을 수행합니다:

• 각 데이터 아이템에 대한 표시 값을 조회하고,
• 셀을 편집할 때 유효한 아이템이 포함된 드롭다운 목록을 제공합니다.

예를 들어, 아래 그리드에는 고객 이름과 ID를 연결하는 DataMap과 'Customer' 열이 있습니다. 데이터 원본에는 고객 ID가 포함되어 있지만, 그리드에는 해당 이름이 대신 표시되며, 각 아이템에 대한 고객을 선택할 수 있는 드롭다운 목록이 제공됩니다.

그리드는 또한 'Country' 열에 dataMap을 할당합니다.이 경우 지도는 국가 이름을 가진 문자열 배열일 뿐입니다. 실제 매핑은 없지만 선택할 드롭다운 목록이 계속 표시됩니다. 사용자는 목록에 없는 국가를 입력할 수 없습니다.

예시:

import * as wjGrid from '@grapecity/wijmo.grid';

// create some random data
var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
var customers = [
    { id: 0, name: 'Paul Perkins', address: '123 Main St' }, 
    { id: 1, name: 'Susan Smith', address: '456 Grand Ave' }, 
    { id: 2, name: 'Joan Jett', address: '789 Broad St' }, 
    { id: 3, name: 'Don Davis', address: '321 Shattuck Ave' }, 
];
var data = [];
for (var i = 0; i < countries.length; i++) {
    data.push({
        id: i,
        country: countries[i],
        customer: customers[i % customers.length].id,
        active: i % 5 != 0,
        downloads: Math.round(Math.random() * 200000),
        sales: Math.random() * 100000,
        expenses: Math.random() * 50000
    });
}

// create customer data map
var customerMap = new wjGrid.DataMap(customers, 'id', 'name');
  
// show the data in a grid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
        { binding: 'customer', header: 'Customer', width: '1.5*', dataMap: customerMap },
        { binding: 'country', header: 'Country', width: '*', dataMap: countries },
        { binding: 'downloads', header: 'Downloads', width: '*', format: 'n0' },
        { binding: 'sales', header: 'Sales', width: '*', format: 'n0' },
        { binding: 'expenses', header: 'Expenses', width: '*', format: 'n0' }
    ],
    itemsSource: data,
});