RealGrid는 LocalDataProvider.fillJsonData() 함수를 이용해 JSON 포멧의 데이터를 읽어 올 수 있습니다.
(Only JS Support)
RealGrid의 DataProvider에 입력할 수 있는 JSON 포멧의 데이터는 배열(Array)형 데이터와 동일한 구조를 갖습니다. 즉,
위 두 가지 유형의 데이터 포멧은 왼쪽 메뉴 Array 데이터 가져오기에서 LocalDataProvider.setRows()
함수를 이용해 GridView에 로드 할 수 있다는 사실을 확인 할 수 있습니다.
JSON 포멧의 데이터는 LocalDataProvider.fillJsonData()함수를 이용해 조금더 유연하게 데이터를 읽어 올 수 있습니다.
함수의 인자는 data
와 DataFillOptions객체인 options
가 있습니다.
options
에 대해서는 아래 DataFillOptions
영역의 데모를 확인하세요.
LocalDataProvider.fillJsonData()함수를 써서 값의 목록으로 이루어진 배열
을 그리드에 넣는 코드를 작성해 보겠습니다.
1
2
3
4
5
6
7
var data = [
["국산", "국산", "2", "기아", "15", "더 뉴 K9", "9", "미드나이트 블랙", "2016-01-01", "16", "8620", "대형", "휘발유", "images/215.png", "images/215.png"],
["국산", "국산", "5", "르노삼성", "2", "QM6", "3", "이온 실버", "2016-01-01", "71", "3470", "중형SUV", "휘발유", "images/502.png", "images/502.png"],
["국산", "국산", "5", "르노삼성", "5", "SM7", "9", "미드나이트 블랙", "2016-01-01", "26", "3820", "준대형", "휘발유", "images/505.png", "images/505.png"]
]
dataProvider.fillJsonData(data, {fillMode: "set"});
LocalDataProvider.fillJsonData()함수를 써서 값의 목록으로 이루어진 배열을 그리드에 넣는 코드를 작성해 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var data = [
{
"produce": "수입차",
"country": "유럽",
"brandNo": "14",
"brandName": "재규어",
"modelNo": "3",
"modelName": "All New XF 20t",
"colorNo": "3",
"color": "이온 실버",
"salesDay": "2016-01-01",
"salesQty": "3",
"price": "9090",
"vehicleType": "중형",
"fuel": "휘발유",
"사진파일명": "images/1403.png",
"판매월": "1"
},
{
"produce": "수입차",
"country": "유럽",
"brandNo": "14",
"brandName": "재규어",
"modelNo": "5",
"modelName": "XE 20d",
"colorNo": "5",
"color": "소닉 실버",
"salesDay": "2016-01-01",
"salesQty": "10",
"price": "4990",
"vehicleType": "준중형",
"fuel": "휘발유",
"사진파일명": "images/1405.png",
"판매월": "1"
}
]
dataProvider.fillJsonData(data, {fillMode: "set"});
그리드에 데이터를 로드하기 위한 세 함수가 있습니다.
이 함수들에는 공통적으로 DataFillOptions형의 options
라는 두번째 인자가 정의되어 있습니다.
DataFillOptions를 이용해 그리드를 데이터에 로드하기 위한 여러가지 옵션을 설정 할 수 있습니다.
fillMode
속성으로 데이터를 채우는 방법을 선택 할 수 있습니다.
그리드의 모든 데이터를 지우고 아래 data
를 채웁니다.
1
2
3
4
5
6
7
8
9
10
var data = [
["수입차", "유럽", "15", "랜드로버", "7", "Range Rover 3.0 TDV6", "4", "슬릭 실버", "2016-01-03", "5", "16780", "대형SUV", "경유", "images/1507.png", "images/1507.png"],
["수입차", "유럽", "17", "랜드로버", "6", "IS 200t", "5", "소닉 실버", "2016-01-03", "5", "5730", "중형", "휘발유", "images/1706.png", "images/1706.png"],
["수입차", "유럽", "18", "랜드로버", "2", "Accord 3.5", "9", "미드나이트 블랙", "2016-01-03", "1", "4260", "준대형", "휘발유", "images/1802.png", "images/1802.png"],
["수입차", "유럽", "19", "랜드로버", "8", "370Z", "4", "슬릭 실버", "2016-01-03", "9", "5190", "스포츠카", "휘발유", "images/1908.png", "images/1908.png"]
]
dataProvider.fillJsonData(jsonData,
{fillMode: "set"}
);
그리드의 마지막행 뒤에 jsonData
의 첫 번째 행에서 두개 행(BMW 데이터
)을 가져와 추가(Append)
합니다. 이 작업을 위해 DataFillOptions
의 start
, count
속성을 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
var jsonData = [
["수입차", "유럽", "7", "BMW", "1", "520D", "2", "화이트 크림", "2016-01-01", "7", "6370", "준대형", "경유", "images/701.png", "images/701.png"],
["수입차", "유럽", "7", "BMW", "5", "730Ld", "7", "커피 빈", "2016-01-03", "1", "13270", "대형", "경유", "images/705.png", "images/705.png"],
["수입차", "유럽", "8", "벤츠", "10", "SL400", "11", "폴리시드 메탈", "2016-11-14", "1", "13200", "스포츠카", "휘발유", "images/810.png", "images/810.png"]", "
["수입차", "유럽", "8", "벤츠", "4", "CLS 400", "1", "크리스탈 화이트", "2016-11-15", "3", "16990", "준대형", "휘발유", "images/804.png", "images/804.png"]", "
["수입차", "유럽", "9", "아우디", "3", "A7 40TDI", "10", "팬텀 블랙", "2016-05-12", "2", "7880", "준대형", "경유", "images/903.png", "images/903.png"]", "
["수입차", "유럽", "9", "아우디", "6", "A8 50TDI", "3", "이온 실버", "2016-05-13", "2", "12670", "대형", "경유", "images/906.png", "images/906.png"]
]
dataProvider.fillXmlData(jsonData,
{fillMode: "append", start: 0, count: 2}
);
jsonData
에서 벤츠
데이터를 가져와 2행 위치에 삽입(Insert)
합니다.
1
2
3
dataProvider.fillJsonData(jsonData,
{fillMode: "insert", start: 2, count: 2, fillPos: 2}
);
jsonData
에서 아우디
데이터를 가져와 5행 위치에 있는 데이터를 덮어쓰기(Update)
합니다.
1
2
3
dataProvider.fillJsonData(jsonData,
{fillMode: "update", start: 4, count: 2, fillPos: 4}
);