SBGRID

전체메뉴보기

적용예시

그룹핑(setGroup)

그리드를 그룹화 하여 표시 합니다.

상세설명

setGroup

메소드 : datagrid.setGroup(groupinfo, lock);
- groupinfo (필수) : [object] 그리드 그룹화 속성값 설정
  - groupinfo.type(필수) : [string]그룹핑을 접고 펼치는 UI에 대한 적용 설정
  - "every" : 하나의 열에 각 level을 접고 펼치는 UI를 모두 표시
  - "each" : level별로 각각의 열에 접교 펼치는 UI 표시
  - "custom" : 특정 level값을 데이터에 저장하여 해당 값을 가지고 그룹 적용
  - groupinfo.typeinfo(필수) : [object]그리드 그룹 type 속성별로 종속 속성 설정
  - displayparentdata (선택) : [boolean]each 설정 하였을때 상위 부모 데이터를 표시할지 여부 지정
  - levelcolid (필수) : [string] custom 설정 하였을때 특정 level 값을 저장하는 열에 아이디 지정
  - groupinfo.columns(필수) : [object]each, every,custom 설정시 level 열 설정
  - colid : [string]level 열 열 아이디 설정
  - open : [boolean]level 열 그룹화후 open 여부 설정
- lock (선택) : [boolean] 그룹화 진행을 위해 계산하는 동안 그리드를 사용하지 않도록 설정하는 lock UI 표시 여부
  - true : lock UI 사용
  - false (default) : lock UI 사용하지 않음

제약사항

그룹핑 기능은 단순 조회용 화면이기 때문에, 그리드 CRUD 기능에 대해서는 지원하고 있지 않습니다.

예시

"그룹핑" 버튼을 클릭 후 코드명 열의 셀을 클릭해 보세요

							function createGrid(){
								var SBGridProperties = {};			
								SBGridProperties.parentid = 'SBGridArea';
								SBGridProperties.id = 'datagrid';
								SBGridProperties.backcoloralternate = '#f4f4f4';
								SBGridProperties.jsonref = 'groupData';
								SBGridProperties.rowheight = 25;
								SBGridProperties.emptyrecords = '조회된 자료가 존재하지 않습니다.';//레코드가 없을경우 출력되는 메시지
								SBGridProperties.explorerbar = 'move';
								SBGridProperties.waitingui = true;
								SBGridProperties.extendlastcol = 'scroll';
								SBGridProperties.columns = [
									{caption : ['수입/지출구분'],		ref : 'impExpSeNm',		width : 120,	type : 'output',	style : 'text-align:center'},
									{caption : ['표준/연구회구분'],   ref : 'insnSeNm',	   width : 120,	   type : 'output',	   style : 'text-align:center'},
									{caption : ['관항목세목구분'],	   ref : 'lowcdnm',		   width : 120,    type : 'output',    style : 'text-align:center'},
									{caption : ['코드'],			   ref : 'code',		   width : 100,    type : 'output',    hidden:true},
									{caption : ['코드명'],			  ref : 'codeName',		  width : 500,    type : 'output'},
									{caption : ['lowcd'],			ref : 'lowcd',			width : 100,	type : 'output',	hidden:true},
									{caption : ['topcd'],			ref : 'topcd',			width : 100,	type : 'output',	hidden:true},
									{caption : ['lowgb'],			ref : 'lowgb',			width : 100,	type : 'output',	hidden:true},
									{caption : ['insnSe'],			ref : 'insnSe',			width : 100,	type : 'output',	hidden:true},
									{caption : ['impExpSe'],		ref : 'impExpSe',		width : 100,	type : 'output',	hidden:true},
									{caption : ['lv'],				ref : 'lv',				width : 100,	type : 'output',	hidden:true},
									{caption : ['lvCodeName'],		ref : 'lvCodeName',		width : 100,	type : 'output',	hidden:true},
									{caption : ['codepathgb'],		ref : 'codepathgb',		width : 100,	type : 'output',	hidden:true},
									{caption : ['codepathgbnm'],	ref : 'codepathgbnm',	width : 100,	type : 'output',	hidden:true},
									{caption : ['cdName'],			ref : 'cdName',			width : 100,	type : 'output',	hidden:true}
								];
								
								datagrid = _SBGrid.create(SBGridProperties);
								setGroup(datagrid);
							}	
				
							function setGroup(objGrid){
								objGrid.setGroup({
									type:'custom', //every 하나의 열에 각 level을 접고 펼치는 UI를 모두 표시,
									/*each:level별로 각각의 열에 접교 펼치는 UI 제공, custom : 특정 level값을 데이터에 저장하여 해당 값을 가지고 그룹 적용*/

									typeinfo:{ // 그리드 그룹 type 속성별로 종속 속성 설정
										levelcolid	:	objGrid.getColID(objGrid.getColRef('lv')) //custom 설정시 특정 level 값을 저장하는 열에 아이디 지정
									},
									
									columns:[ //each, every, 설정시 레벨 열 설정
										{
											colid	:	objGrid.getColID(objGrid.getColRef('codeName')), //레벨 열의 열 아이디 설정
											open	:	true // 그룹화 후 그룹 오픈 여부 설정
										}
									]
								}, true); //그리드 락 유아이 표시 여부 디폴트 false
							};