Spring boot-dhtmlx Grid
5/24 개발일기
grid 컴포넌트를 구매하기로 했다. 이것저것 서칭해보다가 dhtmlx Grid 가 가성비에서 제일 뛰어난 듯 하여, dhtmlx Grid 로 결정했으나 구매 전에 잘 돌아가는 지 일단 샘플로 만들어보기로 했다.
일단 전체적인 개발 프로세스는 이렇다.
1) ajax로 데이터를 json 형태로 갖고 온다
2) dhtmlx grid 에서 요구하는 형태로 json 을 다시 파싱한다
3) data를 dhtmlx grid funtion 으로 넘겨주어 grid를 생성한다
ajax로 데이터를 json 형태로 갖고오기-먼저 구현
상세 내용은 이전 포스팅을 참조
Ajax
$(document).ready(function(){
$.ajax({
contentType:'application/json',
dataType:'json',
url:'/dhtmlx/getData',
type:'POST',
success:function(data){
parsingGridData(data);
},
error:function(request,status,error){
alert(response.message);
}
});
});
그리고 이것을 dhtmlx가 원하는 형태로 바꾸어준다.
dhtmlx는 내가 데이터를 요렇게 만들어주기를 원한다.(링크 참조!)
그리고 마지막처럼 mygrid.parse() 를 사용하면 json 타입 데이터를 알아서 파싱해서 로드한다.
data={
rows:[
{ id:1, data: ["A Time to Kill", "John Grisham", "100"]},
{ id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
{ id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
]};
mygrid.parse(data,"json");
일단 ajax로 넘어온 내 데이터는 key:value 형태의 JSON 이다. 이것을 {id:인덱스, data:[데이터]} 형태의 배열로 먼저 만들고, 그 이후에 rows 로 묶어주는 작업이 필요하다. Java 단에서 이것을 하려면 은근 코드가 길고 복잡해져서, 이 단계 때문에 jQuery 로 모든 것을 처리하기로 마음 먹었다. -_-
그리고 작성한 파싱 function :)
function parsingGridData(data){
var rows = [];
$.each(data, function(i, item) {
var array = new Array();
array.push(item.name);
array.push(item.gender);
array.push(item.address);
var row = { id:i+1, data:array};
rows.push(row);
});
var gridData = {rows:rows};
mygrid(gridData);
}
받아온 data를 담을 array를 만들고, 그 array를 row에 담아주고, row를 다시 rows에 담아주는 형태다-_-;; 예전 회사에선 이걸 xml로 파싱했는데, 진짜 하면서 개.짜.증났었다. 이 정도면 완전 완전 양반임. ㅜㅜ
그리고 세번째 단계, dhtmlx Grid 초기화. 나는 smartRendering 를 사용하고 싶었기 때문에, smartRendering을 넣었다.
function mygrid(data){
myGrid = new dhtmlXGridObject('gridbox');
myGrid.setImagePath("/dhtmlx/skins/terrace/imgs/dhxgrid_terrace/"); //스킨 설정
myGrid.setHeader("이름,성별,주소"); //헤더 설정
myGrid.setInitWidths("150,150,300"); //헤더 컬럼별 width 설정
myGrid.setColSorting("str,str,int"); //소팅을 위한 데이터 타입 설정
myGrid.attachHeader("#text_filter,#select_filter, "); //필터 설정(필터 없는 곳은 띄워놓으면 된다)
myGrid.setColAlign("left"); //컬럼 정렬
myGrid.init(); //초기화
myGrid.enableColumnMove(true); //컬럼 순서 변경 기능 사용 여부
myGrid.enableSmartRendering(true); //스마트렌더링 기능 사용 여부
myGrid.parse(data,"json"); //json 데이터 파싱
}
...
<div id="gridbox"></div>
스마트 렌터링 기능 때문에 dhtmlx 를 택한 게 컸다. 스마트 렌더링이란, 딱 사용자가 보는 화면만큼만 데이터를 view에 뿌려주는 거다. 사용자가 안 보는 위치에 있는 데이터도 미리 구현되어 있으면 아무래도 화면이 느려지기 마련이다. 그래서 사용자가 보는 뷰의 태그들만 딱딱 뿌려지도록 설정.
이거 하면서 바보같이 하나 헤맸었는데, myGrid.parse() 뒤에 myGrid.enableSmartRendering() 을 설정해서 작동이 안됐었다. ㅜㅜ 당연히.. 데이터 로드하기 전에 렌더링 설정을 해야합니다.. ;;
