편집

대부분의 경우 셀이 그리드에 실제로 저장된 값과 다른 값을 표시하도록 열을 map value로 지정할 수 있습니다.

예를 들어 값이 0에서 3 사이의 '등급' 열이 있을 수 있으나 대신 '낮음', '중간' 또는 '높음' 문자열을 표시하고 싶은 경우 또는 고객 ID가 포함된 '고객' 열이 있고 이를 대신 고객 이름을 표시하고자 할 때 사용 할 수 있습니다.

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

각 데이터 항목의 표시 값을 찾아보고 셀을 편집할 때 유효한 항목이 있는 드롭다운 목록을 제공합니다.

예를 들어, 그리드에는 고객 이름과 ID를 연결하는 DataMap이 있는 '고객' 열이 있을 때, 데이터 원본에는 고객 ID가 있지만 그리드는 고객의 이름을 대신 표시하고 각 항목에 대한 고객을 선택하기 위한 드롭다운 목록을 제공합니다.

그리드는 또한 dataMap 을 '국가' 열에 할당합니다. 이 경우 map은 국가 이름을 가진 문자열 배열에 불과합니다. 실제 매핑은 없지만 선택할 드롭다운 목록이 표시됩니다. 사용자는 리스트에 없는 국가에 들어갈 수 없습니다.

예제:

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,
});