dhtmlx Grid 스타일 Customizing
6/20 개발일기
컴포넌트를 사용하다보면 편리하긴 하지만 아무래도 컴포넌트의 제한적인 API 때문에 하고싶은 걸 못하는 경우도 많다. (사실 API가 제한되어 있다기보다는, API를 활용하는 방법이 손에 익지 않아서인 경우가 제일 크고, 제대로 API를 못찾는 경우도 많고..) 이번 dhtmlx Grid 가 그랬다. 어버버 하면서 구글링한 내용 중 스타일 관련하여 절실했던 건 컬럼별/데이터별 스타일 변경이었다. (다른 건 예제가 잘 되어 있음) 이에 대해 정리해본다.
특정 컬럼의 스타일 변경
function mygrid(data){
....
myGrid.setColTypes("ro,ch,ro,edncl,ro")
....
}
//coloumn Type 이 edncl 인 행에 아래 스타일 부여
function eXcell_edncl(cell){
this.base = eXcell_edn;
this.base(cell);
this.setValue = function(val){
this.cell.style.fontWeight = 900;
this.cell.style.color = "#ddd";
this.cell.innerHTML = this.grid._aplNF(val+"개",this.cell._cellIndex);
}
}
컬럼 타입에 ed 가 붙는 건 editable 컬럼이라는 뜻이다. (반대는 ro, Read-Only라는 뜻) 거기에 "n"이 더 붙으면 지정된 numberFormat 을 따르는 컬럼이라는 의미가 된다. 보다 자세한 Column 데이터 타입 설명은 아래 공식홈페이지 참조 :)
내 경우 edncl 칼럼에는 물품 갯수를 표기했는데, 숫자 뒤에 "개"가 나오도록 하고 싶어서 innerHTML 에 val+"개"를 추가했다. 그러면 해당 컬럼에는 "개"가 따라나오게 된다.
만약 컬럼이 수정 불가능하여 ron이라고 입력하고 싶으면 function 명도 적용할 colType명과 동일하게 바꿔주어야 한다. 예컨대 myGrid.setColTypes("roncl") 이라고 정했으면 function 명도 function eXcell_roncl(cell) 요렇게 ~
Data에 따라 스타일 변경하기
function mygrid(data){
....
myGrid.parse(data,doAfterLoadData,"json");
....
}
function doAfterLoadData(){
myGrid.forEachRow(function(rid){
if(myGrid.cells(rid,5).getValue() == '해결완료')
{
myGrid.setCellTextStyle(rid,5,'color:red;font-weight:900;');
}
});
}
출력한 데이터에 따라 스타일을 변경하고 싶을 때, 위 예제와 같이 진행한다. 위 예제는 데이터 값이 '해결완료'라면, 해당 '해결완료' 텍스트를 빨간색으로 굵게 출력한다. cells(rid,5)에서 뒤에 5는 cell 인덱스 값인데, 인덱스는 0부터 시작한다는 걸 명심하자.
