RealGrid는 LocalDataProvider.fillCsvData() 함수를 이용해 CSV 포멧의 데이터를 읽어 올 수 있습니다.
(Only JS Support)
콤마(comma)로 구분된 CSV 데이터를 RealGrid의 DataProvider에 입력하기 위해서는 LocalDataProvider.fillCsvData()함수는 이용할 수 있습니다. CSV 데이터의 행과 행을 구분하기 위헤 CR, LF, CRLF 중 하나가 포함되어 있어야 합니다.
CSV 데이터 로드
1 2 3 4 5 6 var data = '\ 국산,국산,2,기아,15,더 뉴 K9,9,미드나이트 블랙,2016/01/01,16,8620,대형,휘발유,images/215.png, images/215.png\n\ 국산,국산,5,르노삼성,2,QM6,3,이온 실버,2016/01/01,71,3470,중형SUV,휘발유,images/502.png, images/502.png\ '; dataProvider.fillCsvData(data);
1 2 3 4 5 6
var data = '\ 국산,국산,2,기아,15,더 뉴 K9,9,미드나이트 블랙,2016/01/01,16,8620,대형,휘발유,images/215.png, images/215.png\n\ 국산,국산,5,르노삼성,2,QM6,3,이온 실버,2016/01/01,71,3470,중형SUV,휘발유,images/502.png, images/502.png\ '; dataProvider.fillCsvData(data);
만일, 값이 쌍따옴표(double-quotation mark, ex: "xxx")에 둘러싸여 있다면 DataFillOptions옵션의 quoted속성의 값을 true로 설정 해야 합니다.
"xxx"
quoted
true
쌍따옴표로 둘러싸인 데이터 로드
1 2 3 4 5 6 7 var data = '\ "국산","국산","2","기아","15","더 뉴 K9","9","미드나이트 블랙","2016/01/01", 16, 8620,"대형","휘발유","images/215.png","images/215.png"\n\ "국산","국산","5","르노삼성","2","QM6","3","이온 실버","2016/01/01", 71, 3470,"중형SUV","휘발유","images/502.png","images/502.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true}); });
1 2 3 4 5 6 7
var data = '\ "국산","국산","2","기아","15","더 뉴 K9","9","미드나이트 블랙","2016/01/01", 16, 8620,"대형","휘발유","images/215.png","images/215.png"\n\ "국산","국산","5","르노삼성","2","QM6","3","이온 실버","2016/01/01", 71, 3470,"중형SUV","휘발유","images/502.png","images/502.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true}); });
데이터 구조상 헤더가 붙어 있는 CSV 데이터인 경우 헤더 영역을 데이터에서 제외 시켜야할 필요가 있습니다. 이런 경우 DataFillOptions옵션의 start 속성을 사용할 수 있습니다.
start
헤더가 있는 CSV 데이터 로드
1 2 3 4 5 6 var data = '\ "head1","head2","head3","head4","head5","head6","head7","head8"\ "국산","국산","2","기아","15","더 뉴 K9","9","미드나이트 블랙","2016/01/01","16","8620","대형","휘발유","images/215.png","images/215.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true, start: 1});
var data = '\ "head1","head2","head3","head4","head5","head6","head7","head8"\ "국산","국산","2","기아","15","더 뉴 K9","9","미드나이트 블랙","2016/01/01","16","8620","대형","휘발유","images/215.png","images/215.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true, start: 1});
구분자가 콤마가 아닌 경우 구분자를 지정할 수 있습니다. 이런 경우 DataFillOptions옵션의 delimiter 속성을 사용할 수 있습니다.
delimiter
탭으로 구분된 데이터 로드
1 2 3 4 5 var data = '\ "국산"\t"국산"\t"5"\t"르노삼성"\t"2"\t"QM6"\t"3"\t"이온 실버"\t"2016/01/01"\t"71"\t"3470"\t"중형SUV"\t"휘발유"\t"images/502.png"\t"images/502.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true, delimiter:"\t"});
1 2 3 4 5
var data = '\ "국산"\t"국산"\t"5"\t"르노삼성"\t"2"\t"QM6"\t"3"\t"이온 실버"\t"2016/01/01"\t"71"\t"3470"\t"중형SUV"\t"휘발유"\t"images/502.png"\t"images/502.png"\ '; dataProvider.fillCsvData(data, {fillMode:"append", quoted: true, delimiter:"\t"});
LocalDataProvider.fillJsonData()함수의 인자는 data와 DataFillOptions객체인 options가 있습니다.
data
options
options에 대해서는 아래 DataFillOptions 데모를 확인하세요.
DataFillOptions
그리드에 데이터를 로드하기 위한 세 함수가 있습니다.
이 함수들에는 공통적으로 DataFillOptions형의 options라는 두번째 인자가 정의되어 있습니다.
DataFillOptions를 이용해 그리드를 데이터에 로드하기 위한 여러가지 옵션을 설정 할 수 있습니다.
fillMode속성으로 데이터를 채우는 방법을 선택 할 수 있습니다.
fillMode
그리드의 모든 데이터를 지우고 아래 data를 채웁니다.
SET으로 채우기
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"} );
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"} );
APPEND로 추가하기
그리드의 마지막행 뒤에 jsonData의 첫 번째 행에서 두개 행(BMW 데이터)을 가져와 추가(Append) 합니다. 이 작업을 위해 DataFillOptions의 start, count속성을 사용합니다.
jsonData
BMW 데이터
추가(Append)
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} );
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) 합니다.
벤츠
삽입(Insert)
INSERT로 삽입하기
1 2 3 dataProvider.fillJsonData(jsonData, {fillMode: "insert", start: 2, count: 2, fillPos: 2} );
1 2 3
dataProvider.fillJsonData(jsonData, {fillMode: "insert", start: 2, count: 2, fillPos: 2} );
jsonData에서 아우디 데이터를 가져와 5행 위치에 있는 데이터를 덮어쓰기(Update) 합니다.
아우디
덮어쓰기(Update)
UPDATE로 덮어쓰기
1 2 3 dataProvider.fillJsonData(jsonData, {fillMode: "update", start: 4, count: 2, fillPos: 4} );
dataProvider.fillJsonData(jsonData, {fillMode: "update", start: 4, count: 2, fillPos: 4} );
