ax5grid의 특정 셀의 값이 바뀔 때 해당 cell만 styleClass 적용

AXISJ AX5UI
1

안녕하세요~

AX5 project 오픈소스를 정말 잘 사용하고 있어요. 정말 감사드립니다.

근데 궁금한점이 있어서 글 올립니다.

ax5grid를 실시간 값이 변경되는 목록을 표시하는 표로 사용을 하고
있습니다. 표시되는 값의 조건에 따라서 개별 cell의 색상이 변하도록
styleClass를 적용을 해 놓은 상태구요.
그래서 repaint를 호출하면 색상이 조건값에 따라 styleClass가 잘 적용됩니다.

그런데 setValue로 값을 변경하면 formatter는 호출이 되어서 정해진
format에 맞게 값이 바로 표시가 되는데, 색상은 styleClass가 호출이
되지 않아 변경이 되지 않습니다.

그래서 setValue후에 repaint를 하다 보니 값의 변경이 빈번하여
성능 문제가 발생을 하네요.

그래서 이상황을 해결할 수 있는 방법이 있을지요?

api 쪽을 보다 보니 updateCell 이 있던데 이 api를 좀 수정해봐도 될거 같기도 한데…ㅠ.ㅠ;;;

결론은 개별 cell의 값을 update하고 개별 cell에 대해서만 styleClass적용할 수 있는 방법이 있는지 문의 드립니다.

2

관련한 소스 아래 첨부해 봅니다.

// 개별 cell의 값을 설정하는 함수입니다.
// setValue만으로는 색상을 변경하기 위한 styleClass가 적용되지 않아 repaint를 하는데
// 이게 부하를 발생시킵니다.
setValue: function (index, key, value) {
this.target.setValue(index, key, value);
this.target.repaint();
},

// 아래 cell의 style을 지정하는 함수
// repaint시에 모두 동작하나 setvalue시에는 formatter만 돌고 styleClass는 동작하지 않음
// color = “grid-cell-” ~ 이부분이 css에 정의된 것을 return하는 곳입니다.
setStyle: function(){
var _this = this;
var recolumns = [];

_this.target.columns.forEach(function (n,index) {
	if(n.key === "103"){
		recolumns.push(
			{key: "103", label: "상담사상태", width: 100, align: "center", //108                                                                                              
				styleClass: function () {                                                                               
					//var _this = this;
					var value = this.item["103"];
					if(typeof value !== "undefined") {
						var color = "";
						for(var i = 0; i < fnObj.agentsate.length;i++){
							if(fnObj.agentsate[i].stateId == value) {
								color = "grid-cell-" + fnObj.agentsate[i].colorCd.replace("0x","");
								return color;
							}                                                     
						}
						return color;
					}else{
						return;
					}
				},
				formatter: function () {
					var _this = this;
					var value = _this.item["103"];
					var stateNm = "";
					fnObj.agentsate.forEach(function (n){                                 
						if(n.stateId == value) {
							stateNm = n.stateNm;
							return ;
						}                               
					});
					return stateNm;                                                                                                                                                                                             
				}                               
			}
		);
	}
	else{ recolumns.push(n); }
});

}