SpreadJS 테이블 시트를 사용하면 추가되는 테이블 시트의 구조 및 속성을 정의하는 데이터 소스 스키마를 제공할 수 있습니다. 또한 사용자는 데이터 소스 스키마를 사용하여 열에 대해 여러 dataType을 할당하고 테이블 시트에 데이터가 표시되는 방식에 대해 dataPattern/dataMap을 할당할 수 있습니다.
스키마에는 다음 속성이 포함됩니다.
속성 | 유형 | 설명 |
---|---|---|
type | string | 'json', 'csv', 'xml' 또는 'columnJson'. |
countPath | string | 데이터 판독기는 이것을 사용하여 데이터 소스 컬렉션 길이를 가져옵니다. |
dataPath | string | 데이터 판독기는 이것을 사용하여 구문 분석 후 데이터 소스 컬렉션을 가져옵니다. |
columns | GC.Data.IColumnCollection | 데이터 소스 표의 열 정의. 키는 열 이름이며, 값은 열 정보로서 dataType, dataPattern, dataMap, dataName을 포함합니다. |
dataType은 "string", "number", "boolean", "object", "array" 또는 "date"일 수 있습니다. 원래 값의 실제 데이터 유형이며, 날짜는 JSON 데이터의 문자열이고 변환이 필요하므로 날짜에 유용합니다.
dataPattern은 날짜 문자열의 경우 "dd/MM/yyyy", 부울 문자열의 경우 "Yes|No", 숫자 문자열의 경우 소수 구분 기호 "," 등과 같이 문자열을 값으로 구문 분석하기 위한 문자열입니다.
dataMap은 원래 값을 더 의미 있는 방법으로 표시하기 위한 간단한 맵입니다. 키는 숫자 또는 문자열일 수 있고, 값은 숫자, 문자열 또는 날짜일 수 있습니다.
dataName은 데이터 소스에서 나오는 원래 데이터 필드의 이름을 나타내며 이 속성을 사용하면 원래 필드 이름을 데이터 관리자의 새 필드 이름으로 매핑할 수 있습니다.
interface GC.Data.IColumnCollection {
[key: string]: GC.Data.IColumn;
}
interface GC.Data.IColumn {
dataType?: "string" | "number" | "boolean" | "object" | "array" | "date";
dataPattern?: string;
dataMap?: any;
}
이것은 type, dataPath 및 countPath의 샘플 코드입니다.
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: 'https://services.odata.org/OData/OData.svc/Products/',
adapter: 'odata'
}
},
schema: {
type: 'xml',
dataPath: 'feed.entry',
countPath: 'feed.entry.length'
}
});
이것은 dataType 및 dataMap의 샘플 코드입니다.
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: "https://demodata.mescius.io/northwind/api/v1/Orders"
}
},
schema: {
columns: {
orderDate: {dataType: "date"},
requiredDate: {dataType: "date"},
shippedDate: {dataType: "date"},
shipVia: {dataMap: {1: "Speedy Express", 2: "United Package", 3: "Federal Shipping"}}
}
}
});
이것은 dataPattern의 샘플 코드입니다.
var myTable = dataManager.addTable("myTable", {
data: [
{ description: "Mow grass", dueDate: "8/11/2021", priority: "High", assignedTo: "Dad", isFinished: "Yes", isEncouraged: "False", credit: "20,75" },
{ description: "Clean Room", dueDate: "8/9/2021", priority: "Medium", assignedTo: "Daughter", isFinished: "No", isEncouraged: "True", credit: "10,50" },
{ description: "Organize Pantry", dueDate: "8/8/2021", priority: "Low", assignedTo: "Son", isFinished: "Yes", isEncouraged: "True", credit: "10,75" },
{ description: "Prepare BBQ", dueDate: "8/12/2021", priority: "High", assignedTo: "Mom", isFinished: "No", isEncouraged: "False", credit: "30,25" }
],
schema: {
columns: {
dueDate: {dataType: "date", dataPattern: "dd/MM/yyyy"},
isFinished: {dataType: "boolean", dataPattern: "Yes|No"},
isEncouraged: {dataType: "boolean", dataPattern: "True|False"},
credit: {dataType: "number", dataPattern: ","}
}
}
});
이것은 dataName의 샘플 코드입니다. 속성 열의 키는 데이터 관리자에서 필드 이름을 나타내며 dataName은 원래 데이터 소스 필드 이름을 나타냅니다.
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: "https://demodata.mescius.io/northwind/api/v1/Orders"
}
},
schema: {
columns: {
OrderDate: {dataName: "orderDate"},
RequiredDate: {dataName: "requiredDate"},
ShippedDate: {dataName: "shippedDate"},
ShipVia: {dataName: "shipVia"}
}
}
});