thomasJang
grid 사용시 td 색상변경문의 드려요
안녕하세요 몇일전에 AXISJ를 알게되어 최근 열심히 공부중인 학생입니다. 다름이 아니라 저는 데이터 값에 따라서 td의 색을 변경하고 싶은데 colGroup 설정에 style이라던가 다른 색상 변경할수있는 방법이 있는지 궁금합니다.
예를들면 이렇습니다. {key: "col1", label: "col1", width: "100", align: "center" , style:'background-color : red;'} 혹은 {key: "col1", label: "col1", width: "100", align: "center" , style:function(){ if(col1 > 50) {return "'background-color : red;"} else {return 'background-color : blue;} }}
제생각은 대략이런데 안되네요.. api도 읽어봤는데 style이라는 key값이 없어서 그런것같습니다. 혹시 다른접근방법이있으시면 알려주시면 감사하겠습니다!!
답변 감사합니다.
답변에 대해서 궁금한점이있는데요. addClass를 사용해서 하니까 단일td에 먹히는게아니라 tr 태그 전체에 먹히더라구요.. 그래서 저는 colGroup에서 단일td에
{key: "col1", label: "col1", width: "80" , align : "right" ,
formatter : function(){
if(this.item.col1< 50) {
return '<div style="background-color:#FFE8E8;">' + this.item.col1+ '</div>';
}else{
return '<div>' + this.item.rate + '</div>';
}
}
}
이런식으로 하니까 전체 td에 꽉채워져보이는게아니라 td안에 div가 생겨서 가장자리부분은 적용이 안됩니다.(아마 padding때문에 일까 생각합니다.) 혹시 addClass나 다른방법으로 단일 td에 대해 class를 적용할 수 있는 방법이 없을까요..??
colGroup 설정시
addClass: function () {
if (this.item.col1< 50) {
return "custom_class";
}
}
적용 하시면 됩니다. 단일 cell에 적용 됩니다. 위에 적어놓으신 소스에서 formatter 대신 addClass를 집어 넣으시면 되겠네요.
@lhslive 저도 특정 컬럼만 bg 색상을 바꿔서 강조해 주고 싶은데 저같은 경우에는 반영이 안됩니다.
예제에 있는 데로 setconfig 안에 body 안에서 addClass를 설정하면 전체 row에 색상이 변경됩니다. 특정 컬럼에만 반영하고 싶어서 colGroup 내에 addClass: function ()으로 해서 넣으면 참인 조건에서 아무 변화가 없습니다. addClass:"red"를 바로 넣어줘도 반응이 없는데 어디가 문제인 걸까요? 참고로 inline-edit 예제를 사용하여 개발중에 있습니다
colGroup 내에서 addClass가 정상적으로 동작하였다면 정상적으로 부여 받았을텐데요, 이는 f12 누르셔서 개발자도구로 확인해 보시는게 제일 빠르겠네요. 그리고 당연히 css 선언 해 주셔야 하구요~
그리고 혹시 못보셨을까봐...
[주의!] 이 프로젝트는 더 이상 추가개발/개선작업을 진행하지 않습니다. 앞으로는 AX5UI를 이용해주세요.