시트
SpreadJS는 시트에 대한 데이터 원본 바인딩을 지원합니다. 바인딩은 시트 수준 바인딩일 수 있습니다.
설명
app.js
index.html
styles.css
setDataSource와 getDataSource 메서드를 사용하여 데이터 원본을 설정하고 가져올 수 있습니다. setDataSource를 사용하기 전에 autoGenerateColumns 메서드를 사용하여 데이터를 바인딩하는 동안 열을 자동으로 생성할지 여부를 제어합니다. 예:
var customers = [
{ ID:0, Name:'A', Info1:'Info0' },
{ ID:1, Name:'B', Info1:'Info1' },
{ ID:2, Name:'C', Info1:'Info2' },
];
sheet.autoGenerateColumns = true;
sheet.setDataSource(customers);
또한 getDataItem 메서드를 사용하여 지정된 행의 데이터 항목을 가져옵니다.
다음 예와 같이 지정된 데이터 필드를 사용하여 열을 바인딩할 수 있습니다:
var datasource = [
{ name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }
];
// bindColumn one by one
var nameColInfo = { name: 'name', displayName: 'Display Name', size: 70 };
var ageColInfo = { name: 'age', displayName: 'Age', size: 40, resizable: false };
var birthdayColInfo = { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 };
var positionColInfo = { name: 'position', displayName: 'Position', size: 50, visible: false };
sheet.autoGenerateColumns = false;
sheet.setDataSource(datasource);
sheet.bindColumn(0, nameColInfo);
sheet.bindColumn(1, birthdayColInfo);
sheet.bindColumn(2, ageColInfo);
sheet.bindColumn(3, positionColInfo);
// or use bindColumns to bind all custom columns
var colInfos = [
{ name: 'position', displayName: 'Position', size: 50, visible: false },
{ name: 'name', displayName: 'Display Name', size: 70 },
{ name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 },
{ name: 'age', displayName: 'Age', size: 40, resizable: false },
];
sheet.autoGenerateColumns = false;
sheet.setDataSource(datasource);
sheet.bindColumns(colInfos);