[]
        
(Showing Draft Content)

셀 바인딩

SpreadJS에서는 셀 수준 바인딩을 사용할 수 있습니다.

셀 수준 바인딩은 개체의 속성을 시트의 셀에 바인딩합니다. 셀을 바인딩하기 전에 데이터 개체를 GC.Spread.Sheets.Bindings.CellBindingSource로 래핑합니다. 그런 다음 래핑된 원본을 시트에 바인딩합니다(sheet.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.1f95de.png

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

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

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

var dataManager = spread.dataManager();
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);

image-20260717.5b445e.png

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

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

activeSheet.setBindingPath(3, 0, "address.postcode");