UI Event

UI 변경 관련 EVENT 동작을 확인 합니다.

(* Header 컬럼을 마우스로 드래그 하십시오)

요약

UI 변경 관련 EVENT 동작을 확인합니다.

입력값

String : 이벤트


String : 이벤트 발생시 호출할 사용자 함수명



예) datagrid1.addEventListener("onbeforemovecolumn","eventProcess","","")
function eventProcess(event){
//cell값 변경시 동작되는 부분//
}

상세설명

UI EVENT는 사용자가 SBGrid 열의 크기를 임의로 변경 시 발생하는 onafteruserresize,
열의 순서를 변경 하기 전에 발생하는 onbeforemovecolumn, 열의 순서가 변경된 후에 발생하는 onaftermovecolumn,
트리 관련 oncollapse, onexpanded 등의 기능으로 구분됩니다. 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java"   contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
	<meta content="IE=9" http-equiv="X-UA-Compatible">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SoftBowl SBGrid Example</title>
	<link href="../../css/common.css" type="text/css" rel="stylesheet"/>;
    <link href="../../css/common/stylesheet.css" type="text/css" rel="stylesheet"/>
	<link href="../../kr/co/softbowl/css/Sbgrid_default.css" type="text/css" rel="stylesheet"  />
	<link href="../../css/user_defined_sbgrid_style.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
	<script type="text/javascript" src="../../js/DATA_JSON_POI_10.js"></script>
	<script type="text/javascript">
		SBGrid.DEF.DOMAIN = "../../";
		var datagrid1, 
			datagrid2,
			firstRowHeight;
		firstRowHeight = 30;

		$(document).ready(function(){
		    __createElements();
		});
		
				
		function __createElements (){
			var GridInitInfo = 	{
								"strParentId" : "sbGridArea",
								"strId": "datagrid1",
								"strCaption": "Longitude^Latitude^Name^City Code^classification",
								"strColWidth": "90, 100, 280, 120, 90",
								"strJsonRef": "grid_data",
								"strStyle": "width:100%; height:480px; ",
								"strDataHeight":"29",
								"strBackColorAlternate" : "#f7f7f7",
								"strExplorerbar": "move"
						};
			var SBGridColumnInitInfo =	[
							        { "id": "col1", "type": "input", "ref": "x", "style": "text-align:center;padding-left:5px" },
							        { "id": "col2", "type": "input", "ref": "y", "style": "text-align:center;padding-left:5px" },
							        { "id": "col3", "type": "input", "ref": "name", "style": "text-align:left;padding-left:5px" },
							        { "id": "col4", "type": "combo", "ref": "city", "strJsonNodeSet": "combo_city", "strLabelRef": "label", "strValueRef": "value", "style": "text-align:left;padding-left:5px" },
							        { "id": "col5", "type": "combo", "ref": "code", "strJsonNodeSet": "combo_code", "strLabelRef": "label", "strValueRef": "value", "style": "text-align:center;padding-left:5px" }
							];
			if(SBGrid.getGrid('datagrid1') != null){
				datagrid1.destroy();
				datagrid1 = null;				
			}
			
			datagrid1 = createSBGrid(GridInitInfo,SBGridColumnInitInfo);			
			
			
			datagrid1.setCellStyle('background-color', 0,0,0,datagrid1.getCols(),'#696969');
			datagrid1.setCellStyle('color', 0,0,0,datagrid1.getCols(),'#ffffff');
			datagrid1.setCellStyle('font-weight', 0,0,0,datagrid1.getCols(),'bold');
			datagrid1.setRowHeight(0, 30);
			
			datagrid1.addEventListener("onbeforemovecolumn","eventProcess","","");
			datagrid1.addEventListener("onaftermovecolumn","eventProcess","","");
			datagrid1.addEventListener("onafteruserresize", "eventProcess", "", "" ); 
		}

		function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo){
			var objJSONdata = new Object();
			objJSONdata.objSBGridInitInfo = SBGridInitInfo;
			objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
			return SBGrid.DEF.createSBGrid(objJSONdata);
		};
		
		function softbowl_ready_model (event){
			model1_ready();
		};
		
		function eventProcess( event){
			var strMessage = "Row = " +datagrid1.getMouseRow() + " Col = " + datagrid1.getMouseCol();
			var strEvent = "event 발생 위치 : " + strMessage + " event 명 :" +event.name; 
			eventName.value = strEvent +  "\n"  +eventName.value;
		};
		
	</script>
</head>;
<body onload="__createElements()" class="sbgrid_body">
	
	<div id="sbGridArea">;</div>;
	</br>
	<textarea  id="eventName"  style="width:348px; height:90px; overflow:hidden"></textarea>

</body>
</html>