웹/JSP

[realgrid] 다른 필드 값에 따라 자기 필드 색 설정

누리몬 2021. 6. 18. 15:53
	/*
	 *  필드 값에 따라 색 지정해주기.
	 *  fieldYN 값이 Y 이면 filldText 빨간색으로 표시 
	 *  fieldYN 은 실제로 그리드에 표시 X  (visible = false;)
	 *
	 */
	
	//필드 설정
	var fields = [
		{ fieldName: "filldText"  },
		{ fieldName: "fieldYN"  }		
	];
	
	
	// 컬럼 설정 
	var column;
	var columns = [];
	
	column = new RealGridJS.DataColumn();
	column.fieldName = "filldText";
	column.name = "filldText";
	column.header = { text: "filldText" };  
	column.width = 30;
	
	column.dynamicStyles = function(grid, index, value) {
		var styles = {};
		var status = grid.getValue(index.itemIndex, "fieldYN");
		if(status == "Y"){
			styles.foreground = "#ffff0000";
		}
		styles.textAlignment = "center";
		return styles;
	};
	
	columns.push(column);
	
	
	column = new RealGridJS.DataColumn();
	column.fieldName = "fieldYN";
	column.name = "fieldYN";
	column.styles = { textAlignment: "center" ,fontUnderline: true };
	column.visible = false;
	columns.push(column);
    
    
    

 

#참고

realgrid 스타일 속성 사이트 API  

속성명 타입 내용
background Fill 셀의 배경색을 지정합니다. 이 속성은 모든 렌더러에 적용됩니다.
border Stroke panel에 표시된 셀 등에서 셀의 전체 경계선을 표시하는 경우에 사용됩니다. 데이터/헤더/푸터 셀 등에서는 사용하지 않습니다.
borderLeft Stroke 셀의 왼쪽 경계선을 지정합니다.
borderRight Stroke 셀의 오른쪽 경계선을 지정합니다.
borderTop Stroke 셀의 위쪽 경계선을 지정합니다.
borderBottom Stroke 셀의 아래쪽 경계선을 지정합니다.
line Stroke panel에 표시되는 셀들의 경계선 등 선을 표시할 때 사용됩니다.
fontFamily String 폰트 이름을 지정합니다. 기본값은 “Tahoma”입니다.
fontSize Integer 폰트 크기를 지정합니다. 기본값은 12입니다.
fontBold Boolean 텍스트를 굵게 표시할 지를 지정합니다. 기본값은 false입니다.
fontItalic Boolean 텍스트를 기울여서 표시할 지를 지정합니다. 기본값은 false입니다.
fontUnderline Boolean 텍스트 아래 밑줄을 표시할 것인 지를 지정합니다. 기본값은 false입니다.
fontLinethrough Boolean 취소선을 표시합니다. RealGridJS 1.1.35 이상 지원
font String 위의 폰트 속성들을 한꺼번에 지정합니다. 예를 들어 “Arial,11,bold” 라고 지정하면 fontFamily는 “Arial”, fontSize는 11, 그리고 fontBold가 true가 됩니다. 첫번째와 두번째 폰트 이름 및 크기는 반드시 지정합니다. bold, italic, underline은 지정하면 true가 됩니다.
foreground Fill 텍스트의 색상을 지정합니다.
textAlignment Alignment 텍스트의 수평 정렬 상태를 지정합니다. “near”, “center”, “far” 중 한 값을 지정합니다.
lineAlignment Alignment 텍스트의 수직 정렬 상태를 지정합니다. “near”, “center”, “far” 중 한 값을 지정합니다.
numberFormat String number 형 값을 표시할 형식을 지정합니다.소수점 자리수 지정: “0.00” 처럼 형식에 소수점과 표시할 자리수만큼 “0”을 지정합니다.천자리수 지정: “#,###.00” 처럼 천자리수 위치에 “,”를 지정합니다.채우기: “00.00” 처럼 정수부에 설정한 “0” 만큼 0으로 채워집니다.
dateFormat String 이 속성 대신 아래의 datetimeFormat을 사용하십시오. 이 속성은 폐기될 예정입니다.datetime 형 값을 표시할 형식을 지정합니다.YYYY: 년, YY: 2000년 기준 년, MM:월, DD:일, HH:시간, NN:분, SS:초 의 조합으로 설정합니다.
datetimeFormat String datetime 형 값을 표시할 형식을 지정합니다.자세한 설명은 DataType을 참조하십시오.
booleanFormat String boolean 형 값을 표시할 형식을 지정합니다.”거짓말;참말”과 같이 세미콜론(;)이나 콜론(:)으로 분리하여 false/true 값을 지정합니다. 자세한 설명은 DataType을 참조하십시오.
prefix String 값의 앞쪽에 덧붙여 표시할 텍스트를 지정합니다.
postfix String suffix 를 대신 사용하십시오.
suffix String 값의 뒤쪽에 덧붙여 표시할 텍스트를 지정합니다.
paddingLeft Integer 렌더러가 표시할 영역과 셀 사이의 왼쪽 간격입니다.
paddingRight Integer 렌더러가 표시할 영역과 셀 사이의 오른쪽 간격입니다.
paddingTop Integer 렌더러가 표시할 영역과 셀 사이의 위쪽 간격입니다.
paddingBottom Integer 렌더러가 표시할 영역과 셀 사이의 아래쪽 간격입니다.
iconIndex Integer 렌더러가 표시할 영역과 셀 사이의 왼쪽 간격입니다.
iconLocation IconLocation 아이콘이 표시되는 셀에서 아이콘을 표시할 위치를 지정합니다.”left”, “right”, “top”, “bottom”, “center”, “none” 들 중에서 지정합니다.
iconAlignment Alignment 아이콘의 정렬 상태를 “near”, “center”, “far” 중 한 값으로 지정합니다.
iconOffset Integer iconAlignment로 지정한 위치에서 얼만큼 비켜나 표시할 것인 지를 지정합니다.
iconPadding Integer icon과 텍스트 등 사이의 간격을 지정합니다.
contentFit ContentFit 이미지 등을 표시할 때 크기를 셀에 어떻게 맞출 것인 지를 지정합니다.”none”, “center”, “both”, “width”, “height”, “auto” 중에서 지정합니다.
hoveredBackground Fill 마우스가 올라간 셀의 배경 속성을 지정합니다.
hoveredForeground Fill 마우스가 올라간 셀의 텍스트 색상을 지정합니다.
figureBackground Fill 이미지 외에 렌더러가 직접 표시하는 도형 등의 배경색을 지정합니다.
figureInactiveBackground zFill 이미지 외에 렌더러가 직접 표시하는 도형 등의 비활성시 배경색을 지정합니다.
figureBorder Stroke 도형 등의 경계선을 지정합니다.
figureSize Dimension 도형 등의 크기를 지정합니다. “20” 처럼 고정 값으로 지정하거나, “50%” 처럼 셀의 크기에 대한 비율값으로 지정할 수 있습니다.
figureName String 표시되는 도형 등의 종류가 하나 이상일 때 표시할 도형의 이름을 지정합니다.
figureState String 상태를 갖는 복잡한 도형일 경우 그 상태값을 지정합니다.

출처: https://demo.realgrid.com/GridStyle/StyleProperties/