Columns 유형

SBGrid는 다양한 Column 속성들을 제공합니다. input column 에 대한 one click 과 double click 사항은 옵션사항입니다.


요약

SBGrid는 아래와 같은 열 속성을 제공합니다.

컬럼 유형

"output" - 데이터 보여주는 타입
"input" - 데이터 입력 타입
"textarea" - 데이터 입력 타입
"combo" - 콤보박스 형태의 타입
"checkbox" - 체크박스 형태의 타입
"radio" - 라디오버튼 형태의 타입
"inputdate" - 버튼으로 캘린더를 띄우는 형태의 타입
"outputbutton" - 보여주는 텍스트와 버튼을 넣을 수 있는 타입
"inputbutton" - 입력 텍스트와 버튼을 넣을 수 있는 타입
"image" - 이미지 형태의 타입 

<!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>
	<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json-minified.js"></script>
	<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../../kr/co/softbowl/js/Library/json2.js"></script>
		
	<script type="text/javascript" src="../../kr/co/softbowl/SBGrid.js"></script>
	
	<script type="text/javascript" src="../../js/DATA_JSON_POI_100_for_ColType.js"></script>
		
	<script type="text/javascript">			
		SBGrid.DEF.DOMAIN = "../../";
	<script>
	
	<script type="text/javascript">
		var datagrid1;
		
		$(document).ready(function(){
			__createElements();
		});
		function __createElements (){
			var GridInitInfo = 	{
									   "strParentId": "sbGridArea",
							             "strId": "datagrid1",
							             "strCaption": "output^input^textarea^combo^checkbox^radio^inputdate^inputbutton^outputbutton^image",
							             "strColWidth": "60,110,130,100,70,60,120,120,120,80",
							             "strJsonRef": "grid_data",
							             "strStyle": "width:100%; height:480px; ",
							             "strDataHeight": "40",
							             "strBackColorAlternate": "#f7f7f7",
							             "strExtendLastCol": "scroll",
							             "bOneClickEdit" : true
						};
										
			var SBGridColumnInitInfo =	[
											{ "id": "col1", "type": "output", "style": "text-align:center", "ref": "output" },
											{ "id": "col2", "type": "input", "style": "text-align:center", "ref": "input" },
											{ "id": "col3", "type": "textarea", "style": "text-align:center", "ref": "textarea" },
											{ "id": "col4", "type": "combo", "style": "padding-left:5px", "ref": "combo", "strJsonNodeSet": "combo_city", "strLabelRef": "label", "strValueRef": "value" ,"editmode" : "search"},
											{ "id": "col5", "type": "checkbox", "ref": "checkbox" },
											{ "id": "col6", "type": "radio", "ref": "radio" },
											{ "id": "col7", "type": "inputdate", "style": "text-align:center", "ref": "inputdate" },
											{ "id": "col8", "type": "inputbutton", "style": "padding-left:5px", "ref": "inputbutton" },
											{ "id": "col9", "type": "outputbutton", "style": "padding-left:5px", "ref": "inputbutton" },
											{ "id": "col10", "type": "image", "ref": "image", "imageWidth": "50px", "imageHeight": "50px", "style": "text-align:center;" }
							];
			if(SBGrid.getGrid('datagrid1') != null){
				datagrid1.destroy();
				datagrid1 = null;				
			}
			
			datagrid1 = createSBGrid(GridInitInfo,SBGridColumnInitInfo);			
			
		
		}		
		function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo){
			var objJSONdata = new Object();
			objJSONdata.objSBGridInitInfo = SBGridInitInfo;
			objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
			return SBGrid.DEF.createSBGrid(objJSONdata);
		};
	</script>
</head> 
<body>
    <div id="contents">
        <div class="content_group">
            <div id="sbGridArea"></div>
        </div>
    </div>		
</body>
</html>