HOPPEN Grid DEMO

Core

그리드 기본 기능을 설정할 수 있습니다.

ini

Level1	Level2	Level3	Level4	기능	Type	Default	Value
ini				그리드 공통 정보 설정	JSONObject
	id			그리드의 아이디 설정	String
	url			그리드 서비스 통신을 위한 URL	String
	data			그리드 데이터 설정	JSONObject
	selector			그리드를 출력할 Element Selector	String
	width			그리드 너비	String	'1000px'
	height			그리드 높이	String	'500px'
	theme			그리드 테마설정	String	'default'	default, skyblue, oceanblue, bluishgreen, lightgreen, graypurple, pinkgray, darkgray, blackgray, claret, basicblue, basicred
	resize			그리드 컬럼 너비 조정 여부	Boolean	true	true, false
	checkbox			그리드 좌측에 체크박스 표시 활성화 여부	Boolean	false	true, false
	checkboxsync			그리드 로우 클릭 시 체크박스 자동 선택 여부	Boolean	false	true, false
	refresh			그리드 새로고침 기능 활성화 여부	Boolean	true	true, false
	footer			그리드 푸터 표시/숨김 여부	Boolean	false	true, false
	noDataMsg			데이터가 없을때 출력 할 메시지	String	'No Data'
	selectMode			그리드 데이터 선택 모드 설정	String	'none'	none, singleRow, singleCell, multiRow, multiCell
	syncYScroll			그리드 간 Y축 스크롤 연동	Array		그리드의 ini.id 값으로 연동
	syncXScroll			그리드 간 X축 스크롤 연동	Array		그리드의 ini.id 값으로 연동
	syncSelection			그리드 간 선택 연동	Array		그리드의 ini.id 값으로 연동
	tooltip			그리드에서 툴팁 사용여부	Boolean	false	true, false
	dataType			그리드 데이터 유형 설정	String	'json'	json, text
	structure			전송된 데이터 구조 정의	JSONObject
		totalCount		총 개수	String
		data		데이터	String
	stateStorage			스토리지/쿠키[부가설정의 컬럼정보저장]	JSONObject
		id		아이디	String
		type		저장 타입	String	'cookie'	cookie, storage
	loader			그리드 로딩 이미지 경로	String	'images/load.gif'
	method			데이터 전송 방식(post, get)	String	'get'	get, post
	postData			전송할 데이터	Object	{}	{}
	fontFamily			글꼴 유형	String		나눔고딕, NanumGothic, 돋움, Dotum
	fontStyle			글꼴 모양(기울임)	String		normal, italic
	fontWeight			글꼴 모양(진하기)	String		lighter, normal, bold, bolder

Title

그리드 제목과 부가 기능을 설정할 수 있습니다.

title

Level1	Level2	Level3	Level4	기능	Type	Default	Value
title				그리드 타이틀 설정 정보	JSONObject
	visible			그리드 타이틀 표시/숨김 여부	Boolean	true	true, false
	text			제목 설정	String	'Grid Title'
	toggle			그리드 펼침/숨김 여부	Boolean	true	true, false
	setting			부가 설정 사용 여부(컬럼 목록 표시/숨김 및 너비 일괄 조정)	Boolean	true	true, false
	custom			타이틀 커스텀 버튼 사용 여부	Boolean	false	true, false
	customFn			타이틀 커스텀 버튼 클릭 시 실행될 함수	Function
	fontStyle			글꼴 모양(기울임)	String
	fontWeight			글꼴 모양(진하기)	String
	color			글꼴 색상	String
	backgroundColor			배경 색상	String
	backgroundImage			배경 이미지	String

Panel

그리드 설명글과 기능 버튼을 설정할 수 있습니다.

panel

Level1	Level2	Level3	Level4	기능	Type	Default	Value
panel				그리드 패널 설정 정보	JSONObject
	visible			그리드 패널 표시/숨김 여부	Boolean	false	true, false
	text			제목 설정	String	'Grid Panel'
	position			위치 설정	String	'top'	top, bottom
	fontStyle			글꼴 모양(기울임)	String		normal, italic
	fontWeight			글꼴 모양(진하기)	String		lighter, normal, bold, bolder
	color			글꼴 색상	String
	backgroundColor			배경 색상	String
	backgroundImage			배경 이미지	String

Header

그리드 컬럼명 표시와 컬럼 너비, 위치제어 기능을 설정할 수 있습니다.

header

Level1	Level2	Level3	Level4	기능	Type	Default	Value
header				그리드 헤더 설정 정보	JSONObject
	height			그리드 헤더 높이	Array	['30px']
	moving			그리드 컬럼 이동 사용 여부	Boolean	true	true, false
	context			그리드 헤더 컨텍스트 메뉴 설정	JSONObject
		enable		컨텍스트 메뉴 사용 여부	Boolean	false	true, false
		common		공통 기능 사용 여부	Boolean	false	true, false
		custom		사용자 정의 컨텍스트 메뉴 설정	JSONArray
			id	메뉴 아이디	String
			name	메뉴명	String
			icon	메뉴 아이콘	String
			fn	메뉴 클릭 시 실행될 함수	Function
	fontStyle			글꼴 모양(기울임)	String		normal, italic
	fontWeight			글꼴 모양(진하기)	String		lighter, normal, bold, bolder
	color			글꼴 색상	String

Rows

그리드의 로우에 여러 기능을 설정할 수 있습니다.

rows

Level1	Level2	Level3	Level4	기능	Type	Default	Value
rows				그리드 로우 설정 정보	JSONObject
	height			그리드 로우 높이	String	24px
	rownum			자동 순번 사용 여부	Boolean	false	true, false
	rownumZeroBase			자동 순번 시작 번호(0부터 시작)	Boolean	false	true, false
	customRowStyle			사용자 정의 로우 별 스타일 설정	Function
	customCellStyle			사용자 정의 셀 별 스타일 설정	Function
	cascading			Cascading ComboBox 설정	JSONArray
		datasource		cascading에 사용할 데이터	JSONObject
		cols		cascading을 적용할 컬럼 아이디	Array
	moving			그리드 로우 이동 사용 여부	Boolean	false	true, false
	context			그리드 로우 컨텍스트 메뉴 설정	JSONObject
		enable		컨텍스트 메뉴 사용 여부	Boolean	false	true, false
		common		공통 기능 사용 여부	Boolean	false	true, false
		custom		사용자 정의 컨텍스트 메뉴 설정	JSONArray
			id	메뉴 아이디	String
			name	메뉴명	String
			icon	메뉴 아이콘	String
			fn	메뉴 클릭 시 실행될 함수	Function
	enableClipboard			그리드 데이터 복사 및 붙여넣기 활성화 여부	Boolean	true	true, false
	merge			데이터 병합 설정	String		col, row
	altRows			짝/홀수 로우별 스타일 사용 여부	Boolean	false	true, false
	fontStyle			글꼴 모양(기울임)	String
	fontWeight			글꼴 모양(진하기)	String
	wordWrap			로우 데이터가 줄바꿈 있는지를 판단하여 높이 지정	boolean	false	true,false

Paging

그리드의 페이징 기능을 설정할 수 있습니다.

page

Level1	Level2	Level3	Level4	기능	Type	Default	Value
page				그리드 페이징 설정 정보	JSONObject
	visible			그리드 페이징 표시/숨김 여부	Boolean	false	true, false
	count			표시할 데이터 개수	Number	20
	rowList			표시할 데이터 개수 목록	Array	[20, 30, 50]
	reload			서버 페이징 사용 여부	Boolean	false	true, false
	fontStyle			글꼴 모양(기울임)	String		normal, italic
	fontWeight			글꼴 모양(진하기)	String		lighter, normal, bold, bolder
	color			글꼴 색상	String
	backgroundColor			배경 색상	String
	backgroundImage			배경 이미지	String

Info

페이징 기능이 비활성화 된 상태에서 데이터의 총 건수를 표시할 수 있습니다.

info

Level1	Level2	Level3	Level4	기능	Type	Default	Value
info				데이터 총 건수 표시 설정 정보	JSONObject
	visible			데이터 총 건수 표시여부 설정	Boolean	false	true, false
	fontStyle			글꼴 모양(기울임)	String		normal, italic
	fontWeight			글꼴 모양(진하기)	String		lighter, normal, bold, bolder
	color			글꼴 색상	String
	backgroundColor			배경 색상	String
	backgroundImage			배경 이미지	String

Column

그리드의 컬럼을 설정할 수 있습니다.

cols

Level1	Level2	Level3	Level4	기능	Type	Default	Value
cols				그리드 컬럼 설정 정보	JSONArray
	id			컬럼 아이디	String
	name			컬럼명	String
	width			컬럼 너비	String		px,%
	resize			컬럼 너비 조정 여부	Boolean	true	true, false
	merge			컬럼 병합 여부	Boolean	true	true, false
	moving			컬럼 이동 여부	Boolean	true	true, false
	editable			컬럼 편집 여부	Boolean	true	true, false
	sortable			컬럼 정렬 여부	Boolean	true	true, false
	visible			[내부] 컬럼 표시/숨김 여부	Boolean	true	true, false
	align			컬럼 정렬 설정	String	'center'	left, center, right
	mergeDependency			데이터 병합 시 참조할 컬럼 설정	String
	tooltip			툴팁 설정	JSONObject
		header		컬럼별 툴팁 설정	Object
			show	툴팁 표시 여부	Boolean	false	true, false
			fn	툴팁 사용자 함수 설정	Function
		body		로우별 툴팁 설정	Object
			show	툴팁 표시 여부	Boolean	false	true, false
			fn	툴팁 사용자 함수 설정	Function
	filter			필터 설정	JSONObject
		visible		필터 표시 여부	Boolean	true	true, false
		disable		필터 사용 가능 여부	Boolean	false	true, false
		option		기본 선택 연산자 설정	String
			type	필터 유형 설정	String	'string'	list : 목록 선택형(공통) string : 사용자 검색형(문자형) number : 사용자 검색형(숫자형)
			defaultOperator	기본 선택 연산자 설정	String	''	공통 : eq, ne 문자형 : bw, bn, ew, en, cn, nc, nu, nn 숫자형 : bg, be, sm, se
			autocomplete	자동완성 기능 사용 여부 설정	Boolean	false	true, false
			limit	필터할 데이터의 목록 제한 개수	Number	20	filter type이 list일 경우 해당 제한 없이 모든 데이터를 표기 하려면 null 로 설정
	display			데이터 표시 유형 설정(표시유형별 옵션 페이지 참조)	JSONObject
		type		데이터 표시 유형	String	'text'	text, button, combo, checkbox, radiobox, image, icon, bar, link, sparkline, sparkcolumn, sparkwinloss
		masking		[Text] 마스크 처리 여부	Boolean	false	true, false
		comma		[Text] 천단위 콤마 출력 여부	Boolean	false	true, false
		contents		[Text] 콘텐츠 설정	String
		loadFormat		[Text] 로드 시 표시 형식 설정	String		[a(a-z), 9(0-9), *(a-z,A-Z,0-9), c(영문자)]
		contents		[ComboBox] 콘텐츠 설정	String
		checkAll		[CheckBox] 체크박스 전체 선택/해제 사용 여부	Boolean	false	true, false
		height		[Image] 이미지 높이	String
		prefix		[Image] 이미지 경로	String
		contents		[Icon] 콘텐츠 설정	String
		width		[Icon] 아이콘 너비	String	'20px'
		height		[Icon] 아이콘 높이	String	'20px'
		position		[Icon] 아이콘 표시 위치	String	'left'	left, right
		iconset		[Icon] 아이콘 목록	Object
		theme		[Button] 테마 설정	String	'basic'	basic, blue, sky, green, orange
		label		[Button] 텍스트 설정	String	'button'
		width		[Button] 버튼 가로 크기	String	'30px'
		onclick		[Button] 버튼을 클릭 시 실행될 함수	Function
		max		[Bar] 최대값 설정	Number
		button		[Text] 텍스트+버튼 정보	Object
			visible	[Text] 버튼 표시 유무	Boolean		true, false
			theme	[Text] 버튼 테마 설정	String	'basic'	basic, blue, sky, green, orange
			text	[Text] 버튼의 텍스트 설정	String
			width	[Text] 버튼 가로 크기	String	'30px'
			height	[Text] 버튼 세로 크기	String	'24px'
			position	[Text] 버튼 위치	String	'right'	left, right
			onclick	[Text] 버튼 클릭시 실행될 함수	Function
		mode		[Link] 링크 형태	String	'url'	url, javascript
		baseUrl		[Link] 링크 URL	String
		target		[Link] 링크를 열 target 속성 값	String	'_blank'	_blank, _parent, _self, _top
		paramColumn		[Link] 링크의 파라미터가 될 컬럼 아이디	String
		fn		[Link] 사용자 정의 함수	Function
		dataColumn		[SparkLine] 스파크라인 차트에 표시할 컬럼 아이디	String
		dataColumn		[SparkColumn] 스파크라인 차트에 표시할 컬럼 아이디	String
		dataColumn		[SparkWinLoss] 스파크라인 차트에 표시할 컬럼 아이디	String
	editor			데이터 편집 유형 설정(편집유형별 편집옵션 페이지 참조)	Object
type			데이터 편집 유형	String	'editbox'	editbox, textarea, combo, checkbox, radiobox, calendar, spin, maskededit
format			[EditBox] 입력 포맷 설정	String	'all'	all, number, english, email, korean
minlength			[EditBox] 최소 입력 길이	Number
maxlength			[EditBox] 최대 입력 길이	Number
required			[EditBox] 필수 입력 여부	Boolean	false	true, false
contents			[ComboBox] 콘텐츠 설정	String
check_contents			[CheckBox] 체크 기준 설정	String	'1:0'
radio_contents			[RadioBox] 체크 기준 설정	String	'1:0'
loadFormat			[MaskedEdit] 로드 시 표시 형식 설정	String	'9999'
saveFormat			[MaskedEdit] 저장 시 표시 형식 설정	String
required			[MaskedEdit] 유효성 검사 여부	Boolean	false
validationFailFn			[MaskedEdit] 유효성 검사 실패 시 실행될 함수	Function
allowEmpty			[MaskedEdit] 빈 값 허용 여부 설정	Boolean		빈 값이 아니며, 설정한 포맷에 맞지 않는 값일 경우 이전 값으로 되돌림
loadFormat			[Calendar] 로드시 날짜 표시 형식 설정	String		yyyymmdd, yyyy-mm-dd, yy/mm/dd 등
saveFormat			[Calendar] 저장시 날짜 표시 형식 설정	String		yyyymmdd, yyyy-mm-dd, yy/mm/dd 등
max			[Spin] 최대값	Number
min			[Spin] 최소값	Number
step			[Spin] 증감 간격	Number
onfocus			포커스되었을 때 실행될 함수	Function
footer			그리드 푸터 설정 정보	JSONObject
	text		텍스트 설정	String
	colspan		병합할 개수 설정	Number
	oper		연산자 유형 설정	String		sum, avg, count, max, min
	fildNm		계산할 컬럼 설정	String
	customFunction		사용자 정의 함수 설정	String
	style		푸터 스타일 설정	Object
		comma	천단위 콤마 표시 여부	Boolean	false	true, false
		dPlace	소수점 이하 자리수 설정	Number
		dPlaceZero	소수점 이하 자리수 0 출력 여부	Boolean	false	true, false
		roundType	반올림 유형 설정	String		round, roundUp, roundDown
		prefix	접두사 설정	String
		postfix	접미사 설정	String
		textAlign	텍스트 정렬	String		left, center, right, justify
		fontStyle	글꼴 모양(진하기)	String
		fontWeight	글꼴 모양(기울임)	String
		color	글꼴 색상	String
		backgroundColor	배경 색상	String
		backgroundImage	배경 이미지	String
sub			하위 컬럼 설정 정보	JSONArray
style			스타일 설정	Object
	header		컬럼 스타일 설정	Object
		fontStyle	글꼴 모양(진하기)	String
		fontWeight	글꼴 모양(기울임)	String
		color	폰트 색상	String
		backgroundColor	배경 색상	String
		backgroundImage	배경 이미지	String
		textAlign	텍스트 정렬	String		left, center, right
		cursor	로우별 커서 변경	String	Auto	Auto, Crosshair, Default, Pointer, Move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
	body		로우 스타일 설정	Object
		fontStyle	글꼴 모양(진하기)	String
		fontWeight	글꼴 모양(기울임)	String
		color	폰트 색상	String
		backgroundColor	배경 색상	String
		backgroundImage	배경 이미지	String
		textAlign	텍스트 정렬	String		left, center, right
		cursor	로우별 커서 변경	String	Auto	Auto, Crosshair, Default, Pointer, Move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
	spark		스파크 라인 차트 스타일 설정	Object
		normal	기본 색상	String
		high	높은점 색상	String
		low	낮은점 색상	String
renderer			표시되는 값을 변경할 수 있는 콜백 함수	Function

Edit

그리드의 컬럼의 내용을 수정할 수 있습니다.

edit

Level1	Level2	Level3	Level4	기능	Type	Default	Value
edit				그리드 편집 설정 정보	JSONObject
	editable			편집 여부	Boolean	false	true, false
	enter			엔터키 동작 모드 설정	String	'end'	end, next
	begin			편집 진입 모드 설정	String	'dblclick'	dblclick, click
	f2			F2키를 이용한 편집 진입 모드 여부	Boolean	true	true, false
	before			편집전 호출되는 콜백 함수	function
	readonly			읽기 전용 로우 개수 설정	Number
	dialog			그리드 입력 Form 자동 생성 기능 활성화 여부	Boolean	false	true, false
	tooltip			헤더 좌측의 편집 상태 아이콘 툴팁 내용 설정	String	'편집유무'

Sort

그리드의 정렬 기능을 설정할 수 있습니다.

sort

Level1	Level2	Level3	Level4	기능	Type	Default	Value
sort				정렬 설정 정보	JSONObject
	sortable			정렬 사용 여부	Boolean	true
	type			정렬 유형 설정	String	'multi'	single, multi
	scope			정렬 범위 설정	String	'all'	all, current
	reload			서버 정렬 사용 여부	Boolean	false	true, false
	sortkey			다중 정렬 시 사용할 키 설정	String	'shiftkey'	shiftkey, ctrlkey, always

Group

그리드의 그룹 기능을 설정할 수 있습니다.

group

Level1	Level2	Level3	Level4	기능	Type	Default	Value
group				그룹핑 설정 정보	JSONObject
	visible			그룹핑 사용 여부	Boolean	false
	groupingField			그룹핑 대상 컬럼 아이디	Array
	groupingSummary			그룹핑 요약 정보 설정	JSONObject
		positionTop		요약 정보 상단 표시 여부	Boolean	true	true, false
		column		요약 정보 관련 컬럼 정보	JSONArray
			id	표시할 컬럼 아이디	String
			expression	연산자 유형 설정	String		avg, sum, count
			prefix	접두사 설정	String
			suffix	접미사 설정	String
			useThousandComma	천단위 콤마 표시 여부	Boolean		true, false
			floatDigits	소수점 자리수	Number	2	0또는 자연수
	collapseChild			요약 정보 접기 표시 여부	Boolean	true	true, false
	fontStyle			글꼴 모양(진하기)	String
	fontWedight			글꼴 모양(기울임)	String
	backgroundColor			배경 색상	String
	backgroundimage			배경 이미지	String

Tree

그리드의 트리 기능을 설정할 수 있습니다.

tree

Level1	Level2	Level3	Level4	기능	Type	Default	Value
tree				트리 구조 그리드 설정 정보	JSONObject
	visible			트리 구조 그리드 표시 여부	Boolean	false	true, false
	expandColumnId			트리 펼침 아이콘이 표시될 데이터의 아이디	String
	isLeafColumnId			최하위 컬럼 정보를 가진 데이터의 아이디	String
	depthColumnId			컬럼 깊이 정보를 가진 데이터의 아이디	String
	isRowDblclickToggle			로우 더블클릭 할 경우 트리 펼침 및 접기 여부	Boolean	false	true, false

Fix

그리드의 열과 행을 고정할 수 있습니다.

fix

Level1	Level2	Level3	Level4	기능	Type	Default	Value
fix				고정 컬럼/로우 설정 정보	JSONObject
	row			고정 로우 개수 설정	Number	0
	col			고정 컬럼 개수 설정	Number	0
	editable			고정 셀 편집 여부	Boolean	false	true, false

LazyLoading

대용량 데이터 처리 기능을 설정할 수 있습니다.

lazyLoading

Level1	Level2	Level3	Level4	기능	Type	Default	Value
lazyloading				대용량 데이터 처리 설정 정보	JSONObject
	enable			레이지 로딩 사용 여부	Boolean	false	true, false
	url			레이지 로딩 관련 서비스 URL	String
	count			로드할 데이터 개수	Number	20
	autoLoad			자동 로드 사용 여부	Boolean	false	true, false
	loadLimit			자동 로드 시 최대 데이터 개수	Number

Chart

그리드의 데이터를 챠트로 설정할 수 있습니다.

chart

Level1	Level2	Level3	Level4	기능	Type	Default	Value
chart				차트 연계 설정 정보	JSONObject
	visible			차트 연계 표시 여부	Boolean	false	true, false
	id			차트를 표시할 아이디	String
	api			연계할 차트 API	String	'echart'
	type			차트 유형 설정	String		bar, line, columnLine, columnPie, multi
	connect			멀티 차트의 연계 정보	JSONObject
		type		연계할 차트 위치 유형	String		internal : 현재 그리드 차트와 연계 external : 다른 그리드 차트와 연계
		grid		연계할 그리드 아이디	String
	width			차트 너비	String
	height			차트 높이	String
	toolbox			차트 유형 선택박스 설정
		show		차트 유형 선택박스 표시 여부	Boolean	false	true, false
		position		차트 유형 선택박스 위치 설정	String		top, bottom
	tooltip			툴팁 정보 설정	JSONObject
		show		툴팁 표시 여부	Boolean	false	true, false
		data		툴팁 관련 데이터 설정	Array
		formatter		툴팁 표시 포맷 설정	Function
	datazoom			데이터 확대/축소 기능 설정	JSONObject
	datazoom	show		데이터 확대/축소 기능 사용 여부	Boolean	false	true, false
	legend			데이터를 설정할 컬럼	Function
	xAxis			X축(가로) 데이터 설정)	Function
	series			차트 데이터 설정(Array)	Function

Search

그리드의 검색 기능을 설정할 수 있습니다.

search

Level1	Level2	Level3	Level4	기능	Type	Default	Value
search				검색 설정 정보	JSONObject
	visible			검색 기능 사용 여부	Boolean	false	true, false
	target			검색 대상 컬럼 아이디	String	'all'	all, 컬럼ID
	inclusionHideCol			숨김 컬럼 검색 포함 여부	Boolean	false	true, false

DetailGrid

그리드의 DetailGrid 기능을 설정할 수 있습니다.

detailgrid

Level1	Level2	Level3	Level4	기능	Type	Default	Value
detailgrid				Master Details 그리드 설정 정보	JSONObject
	enable			연계할 그리드 활성화 여부	Boolean	false	true, false
	target			연계할 그리드 아이디	String
	query			Master 그리드와 Detail 그리드간의 연계 정보	Array
	prequery			Detail 그리드의 파라미터 정보	String
	method			데이터 전송 방식	String	'get'	get, post

Filter

그리드의 필터기능을 설정할 수 있습니다.

filter

Level1	Level2	Level3	Level4	기능	Type	Default	Value
filter				필터링 설정 정보	JSONObject
	visible			필터 표시여부 설정	Boolean	false	true, false
	type			필터링 형태 설정	String	'icon'	icon(아이콘으로 표시), toolbar(툴바로 표시)
	autocomplete			자동완성기능 사용여부 설정	Boolean	false	true, false