RealGrid는 LocalDataProvider.fillXmlData() 함수를 이용해 XML 포멧의 데이터를 읽어 올 수 있습니다.
(Only JS Support)
RealGrid의 DataProvider에 XML 포멧의 데이터를 입력 할 수 있습니다. XML데이터의 유형은 아래와 같이 attribute
를 활용하거나 childNode
를 활용하는 방법, 모두 가능하며 두 방법을 조합하여 사용할 수도 있습니다.
아래, 각 유형에 대한 데이터 샘플을 참고하세요.
XML 포멧의 데이터는 LocalDataProvider.fillXmlData()라는 함수를 이용해 데이터를 읽어 올 수 있습니다.
attribute를 필드와 매핑하는 XML 데이터
1
2
3
4
<rows>
<row produce="수입차" country= "유럽" brandNo= "14" brandName= "재규어" modelNo= "5" modelName= "XE 20d" colorNo= "5" color= "소닉 실버" salesDay= "2016-01-01" salesQty= "10" price= "4990" vehicleType= "준중형" fuel= "휘발유"/>
<row 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= "휘발유"/>
</rows>
1
2
3
4
5
6
var data = '<rows> \
<row produce="수입차" country= "유럽" brandNo= "14" brandName= "재규어" modelNo= "5" modelName= "XE 20d" colorNo= "5" color= "소닉 실버" salesDay= "2016-01-01" salesQty= "10" price= "4990" vehicleType= "준중형" fuel= "휘발유"/> \
<row 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= "휘발유"/> \
</rows>';
dataProvider.fillXmlData(data);
child node를 필드와 매핑하는 XML 데이터
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
<rows>
<row>
<produce>수입차</produce>
<country>유럽</country>
<brandNo>14</brandNo>
<brandName>재규어</brandName>
<modelNo>5</modelNo>
<modelName>XE 20d</modelName>
<colorNo>5</colorNo>
<color>소닉 실버</color>
<salesDay>2016-01-01</salesDay>
<salesQty>10</salesQty>
<price>4990</price>
<vehicleType>준중형</vehicleType>
<fuel>휘발유</fuel>
</row>
<row>
<produce>수입차</produce>
<country>유럽</country>
<brandNo>14</brandNo>
<brandName>재규어</brandName>
<modelNo>3</modelNo>
<modelName>All New XF 20t</modelName>
<colorNo>3</colorNo>
<color>소닉 실버</color>
<salesDay>2016-01-01</salesDay>
<salesQty>3</salesQty>
<price>9090</price>
<vehicleType>중형</vehicleType>
<fuel>휘발유</fuel>
</row>
</rows>
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
var data = ' \
<rows> \
<row> \
<produce>수입차</produce> \
<country>유럽</country> \
<brandNo>14</brandNo> \
<brandName>재규어</brandName> \
<modelNo>5</modelNo> \
<modelName>XE 20d</modelName> \
<colorNo>5</colorNo> \
<color>소닉 실버</color> \
<salesDay>2016-01-01</salesDay> \
<salesQty>10</salesQty> \
<price>4990</price> \
<vehicleType>준중형</vehicleType> \
<fuel>휘발유</fuel> \
</row> \
<row> \
<produce>수입차</produce> \
<country>유럽</country> \
<brandNo>14</brandNo> \
<brandName>재규어</brandName> \
<modelNo>3</modelNo> \
<modelName>All New XF 20t</modelName> \
<colorNo>3</colorNo> \
<color>소닉 실버</color> \
<salesDay>2016-01-01</salesDay> \
<salesQty>3</salesQty> \
<price>9090</price> \
<vehicleType>중형</vehicleType> \
<fuel>휘발유</fuel> \
</row> \
</rows> \
';
dataProvider.fillXmlData(data);
두 가지 방법을 조합한 XML 데이터
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
<rows>
<row brandNo= "14" modelNo= "5" colorNo= "5">
<produce>수입차</produce>
<country>유럽</country>
<brandName>재규어</brandName>
<modelName>XE 20d</modelName>
<color>소닉 실버</color>
<salesDay>2016-01-01</salesDay>
<salesQty>10</salesQty>
<price>4990</price>
<vehicleType>준중형</vehicleType>
<fuel>휘발유</fuel>
</row>
<row brandNo= "14" modelNo= "3" colorNo= "3">
<produce>수입차</produce>
<country>유럽</country>
<brandName>재규어</brandName>
<modelName>All New XF 20t</modelName>
<color>소닉 실버</color>
<salesDay>2016-01-01</salesDay>
<salesQty>3</salesQty>
<price>9090</price>
<vehicleType>중형</vehicleType>
<fuel>휘발유</fuel>
</row>
</rows>
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
var data = ' \
<rows> \
<row brandNo= "14" modelNo= "5" colorNo= "5"> \
<produce>수입차</produce> \
<country>유럽</country> \
<brandName>재규어</brandName> \
<modelName>XE 20d</modelName> \
<color>소닉 실버</color> \
<salesDay>2016-01-01</salesDay> \
<salesQty>10</salesQty> \
<price>4990</price> \
<vehicleType>준중형</vehicleType> \
<fuel>휘발유</fuel> \
</row> \
<row brandNo= "14" modelNo= "3" colorNo= "3"> \
<produce>수입차</produce> \
<country>유럽</country> \
<brandName>재규어</brandName> \
<modelName>All New XF 20t</modelName> \
<color>소닉 실버</color> \
<salesDay>2016-01-01</salesDay> \
<salesQty>3</salesQty> \
<price>9090</price> \
<vehicleType>중형</vehicleType> \
<fuel>휘발유</fuel> \
</row> \
</rows> \
';
dataProvider.fillXmlData(data, {fillMode: "set"});
LocalDataProvider.fillJsonData()함수의 인자는 data
와 DataFillOptions객체인 options
가 있습니다.
options
에 대해서는 아래 DataFillOptions
데모를 확인하세요.
그리드에 데이터를 로드하기 위한 세 함수가 있습니다.
이 함수들에는 공통적으로 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}
);