jQgrid의 지정한 칼럼, 지정한 열을 다른색으로 지정하기

2013. 4. 12. 15:28·프로그래밍 언어/js

사용자에게 해당칼럼이나 열의 정보를 강조하기 위해서 테이블의 배경색을 바꾸고 싶을 때는 다음처럼 처리한다. 

// 배경색상 css 선언
var cssGreen = {'background-color':'#6DFF6D'};
   
// 그리드 데이터의 ID 가져오기
var ids = $('#requestList').jqGrid('getDataIDs');
   
// 그리드 데이터 가져오기
var gridData = $("#requestList").jqGrid('getRowData');

// 데이터 확인후 색상 변경
for (var i = 0; i < gridData.length; i++) {
   
	// 데이터의 is_test 확인
	if (gridData[i].is_test == 'Y') {
	   
		// 열의 색상을 변경하고 싶을 때(css는 미리 선언)
		$('#requestList tr[id=' + ids[i] + ']').addClass('grid-test');
	   
		// 칼럼의 색생을 변경하고 싶을 때
		$('#requestList').jqGrid('setCell', ids[i], 'document_status_text', '', cssGreen);
   }
}


이상과 같이 처리하면 칼럼이나 열의 색상 변경이 가능하다. 

* loadComplete 시점에 처리하면 된다. 



다른 방법으로는 afterInsertRow 이벤트를 이용하는 방법도 있다. 


// grid setting
		$('#statusList').jqGrid({
			
		    afterInsertRow: function(rowid, rowdata , rowelem){
		    	
				if (rowdata.job_type == "소계"){                					
					 $("#"+rowid).css("background", "#e0ffff");
				} 
				
			}        
		    
		});
반응형

'프로그래밍 언어 > js' 카테고리의 다른 글

jQuery 2.0 릴리스  (0) 2013.04.19
GET 방식으로 호출시 '&', '+' 기호 전달하기  (0) 2013.04.18
자바스크립트의 프로토타입을 이해하고 객체지향 구현하기  (0) 2013.04.16
Javascript의 Array 의 concat, $.extend 메소드 알아보기  (0) 2013.04.10
80020101 오류 해결하기  (0) 2013.02.15
'프로그래밍 언어/js' 카테고리의 다른 글
  • GET 방식으로 호출시 '&', '+' 기호 전달하기
  • 자바스크립트의 프로토타입을 이해하고 객체지향 구현하기
  • Javascript의 Array 의 concat, $.extend 메소드 알아보기
  • 80020101 오류 해결하기
hs_seo
hs_seo
Hello World!
    반응형
  • hs_seo
    개발자로 살아남기
    hs_seo
  • 전체
    오늘
    어제
    • 전체 (1140)
      • 개발자 (21)
        • 개발에 유의할 점 (0)
        • 면접 (5)
      • IT 소식 (5)
        • 업계 (1)
      • java (51)
        • 디자인패턴 (3)
        • apache-common (1)
      • 개념 (47)
        • 자료구조 (4)
        • 함수형사고 (8)
        • 디자인패턴 (1)
      • 데이터분석 (1)
      • python (67)
        • 코드조각 (12)
        • 라이브러리 (2)
      • 빅데이터 (418)
        • zookeeper (5)
        • hadoop (78)
        • hdfs (12)
        • hive (127)
        • hbase (16)
        • spark (40)
        • scala (4)
        • trino (3)
        • oozie (41)
        • Hue (9)
        • R (5)
        • sqoop (6)
        • flume (3)
        • elasticsearch (2)
        • airflow (16)
        • kafka (3)
        • kubernetes (10)
        • openstack (3)
        • flink (2)
        • redis (2)
      • 빅데이터 강좌 (2)
      • 알고리즘 (131)
        • 알고리즘 (1)
        • 백준 (61)
        • 정올 (41)
        • 더블릿 (5)
        • 프로그래머스 (1)
      • 프로그래밍 언어 (30)
        • go (4)
        • js (9)
        • .Net (6)
        • Jsp (1)
        • ansible (3)
        • terraform (6)
      • Tools (56)
        • docker (2)
        • macbook (6)
        • maven (3)
        • sublime (1)
      • 프레임워크 (25)
        • [JS] angularjs (2)
        • [JS] node.js (19)
        • [Java] spring (2)
        • Android (2)
      • 데이타베이스 (43)
        • SQLD (5)
        • Oracle (1)
        • MySQL (8)
        • ADsP (2)
      • 리눅스 (25)
        • Bash (61)
      • GCP (5)
      • AWS (34)
        • EC2 (2)
        • EMR (14)
      • 정보보안기사 (4)
        • 네트워크 (1)
      • 개인 (80)
        • 업무실수 (0)
        • 책 (9)
        • 교육 (3)
        • 여행 (17)
        • 영화 (12)
        • 음악 (2)
        • 피규어 (4)
        • 게임 (3)
        • 생각 (7)
        • 기타 (10)
        • 좋은글 (5)
        • 좋은 사이트 (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

    • 빅데이터-하둡,하이브로 시작하기
    • 빅데이터-스칼라, 스파크로 시작하기
    • Kaggle에서 파이썬으로 데이터 분석 시작하기
    • 쉘스크립트 개발 시작하기
    • 개발자가 데이터 분석 준전문가 되기
    • 데브쿠마
  • 공지사항

  • 인기 글

  • 태그

    오류
    oozie
    SPARK
    알고리즘
    S3
    Linux
    ubuntu
    Hadoop
    백준
    airflow
    mysql
    yarn
    Python
    hbase
    java
    정올
    Tez
    error
    k8s
    다이나믹
    HIVE
    하둡
    AWS
    HDFS
    파이썬
    nodejs
    emr
    build
    하이브
    bash
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
hs_seo
jQgrid의 지정한 칼럼, 지정한 열을 다른색으로 지정하기
상단으로

티스토리툴바