[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

데이터 바인딩

SpreadJS는 워크시트 데이터를 JavaScript 배열 개체 및 데이터 매니저 테이블에 바인딩할 수 있습니다. SpreadJS는 개별 셀을 개체의 속성이나 데이터 매니저 테이블의 레코드에 바인딩할 수 있는 셀 수준 바인딩도 지원합니다.

SpreadJS는 양방향 데이터 바인딩을 지원합니다.

셀 바인딩

셀 바인딩은 개체 속성을 워크시트의 특정 셀에 바인딩합니다. 셀 바인딩을 사용하려면 원본 데이터를 GC.Spread.Sheets.Bindings.CellBindingSource로 래핑하고, 대상 셀에 바인딩 경로를 설정한 다음, setDataSource를 사용하여 래핑된 원본을 시트에 바인딩합니다.

셀을 개체에 바인딩

다음 예제에서는 셀을 개체의 속성에 바인딩합니다.

var person = {
    name: "Wang feng",
    age: 25,
    address: {
        postcode: "710075"
    }
};
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
activeSheet.setBindingPath(0, 0, "name");
activeSheet.setBindingPath(1, 1, "age");
activeSheet.setBindingPath(3, 3, "address.postcode");
activeSheet.setDataSource(source);

image-20260717.dcc1da.png

바인딩 경로에서는 점 표기법을 사용하여 중첩된 필드를 참조할 수 있습니다. 예를 들어 address.postcode는 중첩된 address 개체의 postcode 필드를 참조합니다.

셀을 데이터 매니저 테이블에 바인딩

셀 바인딩에서는 데이터 매니저 테이블을 바인딩 원본으로 사용할 수도 있습니다. 이 경우 시트는 테이블의 한 레코드에 바인딩되며, 각 셀의 바인딩 경로는 해당 레코드를 기준으로 확인됩니다.

다음 예제에서는 셀을 데이터 매니저 테이블의 첫 번째 레코드에 있는 필드에 바인딩합니다.

var dataManager = spread.dataManager();
var activeSheet = spread.getActiveSheet();
var ordersTable = dataManager.addTable("Orders", {
    data: [
        {
            orderId: 10248,
            customerId: "VINET",
            freight: 32.38
        },
        {
            orderId: 10249,
            customerId: "TOMSP",
            freight: 11.61
        }
    ]
});

var source = new GC.Spread.Sheets.Bindings.CellBindingSource(ordersTable, 0);

activeSheet.setBindingPath(0, 0, "orderId");
activeSheet.setBindingPath(1, 0, "customerId");
activeSheet.setBindingPath(2, 0, "freight");

activeSheet.setDataSource(source);

CellBindingSource의 두 번째 인수는 활성 레코드 인덱스를 지정합니다. 예를 들어 인덱스 0은 첫 번째 레코드를 사용하고 인덱스 1은 두 번째 레코드를 사용합니다.

image-20260722.93e937.png

활성 레코드 인덱스를 변경하여 동일한 셀을 데이터 매니저 테이블의 다른 레코드에 바인딩할 수 있습니다.

var source = activeSheet.getDataSource();
source.activeRecordIndex(1);

image-20260722.a1615f.png

시트 바인딩

시트 바인딩은 데이터 원본을 워크시트에 바인딩합니다. 데이터 원본이 개체 배열인 경우 각 개체는 행으로 표시되고 개체의 필드는 열로 표시됩니다.

시트를 배열 개체에 바인딩

다음 예제에서는 워크시트를 개체 배열에 바인딩합니다.

var datasource = [
    { name: "Alice", age: 27, birthday: "1985/08/31", position: "PM" },
    { name: "Aimee", age: 28, birthday: "1984/07/31", position: "TL" },
    { name: "Charles", age: 29, birthday: "1983/03/31", position: "QC" },
    { name: "Fred", age: 30, birthday: "1982/02/20", position: "DL" },
    { name: "Angelia", age: 31, birthday: "1981/05/30", position: "QC" },
    { name: "Peter", age: 32, birthday: "1980/11/08", position: "QC" }
];

activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(datasource);

image-20260717.92e6d4.png

시트를 데이터 매니저 테이블에 바인딩

데이터 매니저 테이블을 워크시트에 직접 바인딩할 수 있습니다. 이 바인딩 모드는 동시 작업을 지원합니다.

다음 예제에서는 데이터 매니저 테이블을 생성하고 활성 시트에 바인딩합니다.

var dataManager = spread.dataManager();
var activeSheet = spread.getActiveSheet();
var personsTable = dataManager.addTable("Persons", {
    data: [
        { name: "Alice", age: 27, birthday: "1985/08/31", position: "PM" },
        { name: "Aimee", age: 28, birthday: "1984/07/31", position: "TL" },
        { name: "Charles", age: 29, birthday: "1983/03/31", position: "QC" },
        { name: "Fred", age: 30, birthday: "1982/02/20", position: "DL" },
        { name: "Angelia", age: 31, birthday: "1981/05/30", position: "QC" },
        { name: "Peter", age: 32, birthday: "1980/11/08", position: "QC" }
    ]
});

activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(personsTable);

바인딩된 시트에 레코드를 추가하면 변경 사항이 데이터 매니저 테이블에 동기화됩니다.

시트에 열을 추가해도 데이터 매니저 테이블은 변경되지 않습니다. 추가된 열과 해당 셀의 내용은 시트에 저장됩니다.

열 바인딩

열 바인딩을 사용하면 데이터 원본의 특정 필드가 워크시트 열에 표시되는 방식을 구성할 수 있습니다.

bindColumn을 사용하여 열을 필드에 바인딩하고 머리글 텍스트, 너비, 서식, 크기 조정 가능 여부 및 표시 여부와 같은 열 설정을 정의할 수 있습니다.

다음 예제에서는 bindColumn 메서드를 사용하여 특정 열을 바인딩합니다.

var datasource = [
    { name: "Alice", age: 27, birthday: "1985/08/31", position: "PM" },
    { name: "Aimee", age: 28, birthday: "1984/07/31", position: "TL" },
    { name: "Charles", age: 29, birthday: "1983/03/31", position: "QC" },
    { name: "Fred", age: 30, birthday: "1982/02/20", position: "DL" },
    { name: "Angelia", age: 31, birthday: "1981/05/30", position: "QC" },
    { name: "Peter", age: 32, birthday: "1980/11/08", position: "QC" }
];

var nameColInfo = { name: "name", displayName: "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 };

activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(datasource);

activeSheet.bindColumn(0, nameColInfo);
activeSheet.bindColumn(1, ageColInfo);
activeSheet.bindColumn(2, birthdayColInfo);
activeSheet.bindColumn(3, positionColInfo);

image-20260722.f9d4d1.png

다음 예제에서는 워크시트를 JSON 배열 개체에 바인딩합니다.

var jsonArray = '{"phoneNumbers": [{"type": "home","number": "212 555-1234"},{"type": "fax","number": "646 555-4567"}]}';
var arr = JSON.parse(jsonArray);

activeSheet.setDataSource(arr.phoneNumbers);

image-20260717.7bc688.png

테이블 바인딩

테이블을 생성하여 데이터 원본에 바인딩할 수 있습니다.

테이블을 데이터 원본에 바인딩

다음 예제에서는 데이터 원본을 직접 생성하여 활성 시트에 바인딩합니다.

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
    var activeSheet = spread.getActiveSheet();

    var sampleTable = [
        { "ID": 10, "Text": "Text-10", "Check": true },
        { "ID": 20, "Text": "Text-20", "Check": false },
        { "ID": 30, "Text": "Text-30", "Check": false },
        { "ID": 40, "Text": "Text-40", "Check": true },
        { "ID": 50, "Text": "Text-50", "Check": true }
    ];

    activeSheet.setDataSource(sampleTable);
};

image-20260717.293dcc.png

바인딩 경로를 사용하여 테이블을 데이터 매니저 필드에 바인딩

테이블은 bindingPath를 사용하여 데이터 매니저 테이블의 활성 레코드에 있는 필드에 바인딩할 수 있습니다. 활성 레코드의 필드에 테이블을 채우는 데 사용할 데이터가 포함된 경우 유용합니다.

다음 예제에서는 시트를 데이터 매니저 테이블 레코드에 바인딩한 다음 테이블을 해당 레코드의 project 필드에 바인딩합니다.

var persons = [
    {
        name: "Wang feng",
        age: 25,
        address: {
            postcode: "710075"
        },
        project: [
            { name: "project1", budget: 10000 },
            { name: "project2", budget: 20000 }
        ]
    },
    {
        name: "Li lei",
        age: 26,
        address: {
            postcode: "710076"
        },
        project: [
            { name: "project3", budget: 30000 },
            { name: "project4", budget: 40000 }
        ]
    }
];

var dataManager = spread.dataManager();

var personsTable = dataManager.addTable("Persons", {
    data: persons
});

var source = new GC.Spread.Sheets.Bindings.CellBindingSource(personsTable, 0);

activeSheet.setDataSource(source);

var table = activeSheet.tables.add("table1", 1, 1, 4, 4);
table.bindingPath("project");

image-20260722.8c8b7a.png

이 예제에서 CellBindingSource는 활성 레코드를 Persons 테이블의 첫 번째 레코드로 설정합니다. 그런 다음 테이블은 bindingPath("project")를 사용하여 해당 레코드의 project 필드에 바인딩합니다.

바인딩된 데이터 업데이트

워크시트를 데이터 원본에 바인딩한 후에도 워크시트에 행이나 열을 추가할 수 있습니다.

새 행 추가 및 데이터 원본 업데이트

다음 예제에서는 바인딩된 시트의 마지막 행 뒤에 행을 추가합니다. 새 행은 데이터 원본에도 추가됩니다.

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
    var activeSheet = spread.getActiveSheet();

    var sampleTable = [
        { "ID": 10, "Text": "Text-10", "Check": true },
        { "ID": 20, "Text": "Text-20", "Check": false },
        { "ID": 30, "Text": "Text-30", "Check": false },
        { "ID": 40, "Text": "Text-40", "Check": true },
        { "ID": 50, "Text": "Text-50", "Check": true }
    ];

    activeSheet.setDataSource(sampleTable);

    document.getElementById("button1").addEventListener("click", function () {
        console.log("The number of all rows in the datasource before addition: " + sampleTable.length);

        var row = activeSheet.getRowCount();

        activeSheet.addRows(row, 1);

        activeSheet.setValue(row, 0, 100);
        activeSheet.setValue(row, 1, "Text-New");
        activeSheet.setValue(row, 2, true);
        activeSheet.getCell(row, -1).backColor("pink");

        console.log("The number of all rows in the datasource after addition: " + sampleTable.length);
        console.log("The value of the Text field in the last row of the datasource: " + sampleTable[sampleTable.length - 1].Text);
    });
};

image-20260717.9627ae.png

바인딩되지 않은 열 추가

바인딩된 시트에 바인딩되지 않은 열을 추가할 수 있습니다. 바인딩되지 않은 열은 시트에 저장되며 원본 데이터 원본에는 추가되지 않습니다.

다음 예제에서는 바인딩되지 않은 열을 추가하고 수식을 사용하여 소계 및 합계 값을 계산합니다.

window.addEventListener("DOMContentLoaded", function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
    var activeSheet = spread.getActiveSheet();
    var rowCount, colCount;

    var sampleTable = [
        { "Num1": 10, "Num2": 100, "Num3": 1000 },
        { "Num1": 20, "Num2": 200, "Num3": 2000 },
        { "Num1": 30, "Num2": 300, "Num3": 3000 },
        { "Num1": 40, "Num2": 400, "Num3": 4000 },
        { "Num1": 50, "Num2": 500, "Num3": 5000 }
    ];

    activeSheet.setDataSource(sampleTable);

    activeSheet.addColumns(2, 1);
    activeSheet.addColumns(activeSheet.getColumnCount(), 1);

    rowCount = activeSheet.getRowCount();
    spread.options.referenceStyle = GC.Spread.Sheets.ReferenceStyle.R1C1;

    activeSheet.setValue(0, 2, "Subtotal", GC.Spread.Sheets.SheetArea.colHeader);

    for (var i = 0; i < rowCount; i++) {
        activeSheet.setFormula(i, 2, "=SUBTOTAL(9, RC[-2]:RC[-1])");
    }

    activeSheet.getRange(-1, 2, -1, 1).backColor("LightCyan");
    activeSheet.getCell(0, 2, GC.Spread.Sheets.SheetArea.colHeader).backColor("LightCyan");
    activeSheet.setColumnWidth(2, 60);

    colCount = activeSheet.getColumnCount();

    activeSheet.setValue(0, colCount - 1, "Total", GC.Spread.Sheets.SheetArea.colHeader);

    for (var i = 0; i < rowCount; i++) {
        activeSheet.setFormula(i, colCount - 1, "SUBTOTAL(9, RC[-4]:RC[-1])");
    }

    activeSheet.getRange(-1, colCount - 1, -1, 1).backColor("LightPink");
    activeSheet.getCell(0, colCount - 1, GC.Spread.Sheets.SheetArea.colHeader).backColor("LightPink");
    activeSheet.setColumnWidth(colCount - 1, 60);
});

image-20260717.cfa599.png

관련 항목

SpreadJS 디자이너 컴포넌트에서 바인딩을 구성하는 방법에 대한 자세한 내용은 SpreadJS 디자이너의 시트 바인딩을 참조하세요.