SBGRID

전체메뉴보기

적용예시

그리드 개인화 설정 (메소드)

그리드의 너비, 열 위치, 숨김 등 그리드의 개인화를 설정할 수 있습니다.

그리드 개인화 설정(속성)

상세설명

savePersonalInfo, loadPersonalInfo

메소드 : datagrid.savePersonalInfo(param1);
- param1 : [string] 개인화를 저장할 ID
메소드 : datagrid.loadPersonalInfo(param1);
- param1 : [string] 개인화를 호출할 ID

제약사항

개인화 기능은 IE9 부터 지원이 가능합니다.
제공하고 있는 개인화 기능은 그리드의 너비(width), 열의 위치(move), 열의 숨김(hidden)에 대해서만 제공하고 있습니다.
ie의 경우는 server에 올려서 테스트 하셔야 합니다. chrome은 html 파일로도 테스트 및 확인이 가능합니다.

예시

Ctrl + 마우스엔터로 여러열을 선택한 후 버튼을 클릭해 보세요.

							var datagrid;
							var SBGridProperties = {};
							
							function createGrid(){
								SBGridProperties.parentid = 'SBGridArea';
								SBGridProperties.id = 'datagrid';
								SBGridProperties.jsonref = 'ct_data.resources';
								SBGridProperties.selectmode = 'free';
								SBGridProperties.columns = [
									{caption : [''],               ref : 'check',		 width : '30px',	style : 'text-align:center',    type : 'checkbox'},
									{caption : ['학원명'],          ref : 'academy',	   width : '168px',	  style : 'text-align:center',    type : 'input'},
									{caption : ['설립자(성명)'],	   ref : 'name',		 width : '163px',	style : 'text-align:center',    type : 'output'},
									{caption : ['전화번호'],		ref : 'phone',		  width : '120px',	 style : 'text-align:center',	 type : 'input'},
									{caption : ['학원주소'],		ref : 'addr',		  width : '407px',	 style : 'text-align:center',	 type : 'textarea'},
									{caption : ['교습과정'],		ref : 'curriculum',	  width : '100px',	 style : 'text-align:center',	 type : 'inputcombo',   typeinfo : {ref : 'newComboData', displayui : true, label : 'label', value : 'value'}},
									{caption : ['교습과목(반)'],	   ref : 'class2',		 width : '100px',	style : 'text-align:center',	type : 'combo',        typeinfo : {ref : 'classData',    displayui : true, label : 'label', value : 'value',  filtering : {usemode : true, uppercol : 5, attrname : 'code'}}},
									{caption : ['교육시작일'],	   ref : 'startday',	 width : '100px',	style : 'text-align:center',	type : 'datepicker',   typeinfo : {locale : 'ko' , dateformat :'yymmdd'}, format : {type:'date', rule:'yyyy-mm-dd', origin : 'yyyymmdd' }},
									{caption : ['교육종료일'],	   ref : 'endday',	 	 width : '100px',	style : 'text-align:center',	type : 'inputdate',    typeinfo : {locale : 'ko' , dateformat :'yymmdd'}, format : {type:'date', rule:'yyyy-mm-dd', origin : 'yyyymmdd' }},
									{caption : ['바로가기'],	    ref : 'link',		  width : '100px',	 style : 'text-align:center',	 type : 'outputbutton'}
								];
								datagrid = _SBGrid.create(SBGridProperties);
							};
									
							function hideColumns(){
								if (_.size(datagrid.getSelectedCols()) < 1 ) {
									alert('그리드의 셀을 선택하셔야 합니다.');
									return;
								}
					
								// 그리드 열의 뒤쪽부터 숨겨서 index 의 변동을 막는다.
								$.each(datagrid.getSelectedCols().reverse(), function(key,index){
									datagrid.setColHidden(index, true);
								});
							}

							//개인화 저장
							function fnSave(){
								datagrid.savePersonalInfo($('#tValue').val());
							}

							//개인화 호출
							function fnLoad(){
								datagrid.loadPersonalInfo($('#tValue').val());
							}

							function loClear() {
								localStorage.clear();
								datagrid.rebuild();
							}