[]
        
(Showing Draft Content)

FlexSheet 데이터 바인딩(Data-binding)

FlexSheet는 FlexGrid와 마찬가지로 데이터 소스에 바인딩할 수 있습니다. 바인딩 모드에서는 바인딩된 시트를 추가하고 바인딩 된 열을 정의할 수 있습니다.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjFlexSheet from '@mescius/wijmo.grid.sheet';

//init FlexSheet
let boundSheet = new wjFlexSheet.FlexSheet('#boundSheet');
boundSheet.addBoundSheet('Country', getData(50));
boundSheet.deferUpdate(() => {
    let column = boundSheet.columns.getColumn('countryId');
    if (column && !column.dataMap) {
        column.dataMap = buildDataMap(getCountries());
    }
    column = boundSheet.columns.getColumn('productId');
    if (column && !column.dataMap) {
        column.dataMap = buildDataMap(getProducts());
    }
    column = boundSheet.columns.getColumn('amount');
    if (column) {
        column.format = 'c2';
    }
});
// build a data map from a string array using the indices as keys
function buildDataMap(items) {
    let map = [];
    for (let i = 0; i < items.length; i++) {
        map.push({ key: i, value: items[i] });
    }
    return new wjGrid.DataMap(map, 'key', 'value');
}