Multi Sorting

SBGrid는 정렬기능을 제공합니다.

Multi Sorting 의 정렬은 숫자나 화살표 클릭을 통해 변경됩니다.

요약

사용자가 그리드 헤더 영역을 클릭하면 열이 오름/내림차순으로 정렬됩니다.

입력값

String : 유형



예) "strExplorerbar" : "sort" "bUserMultiSoring" : true (멀티소팅이용시 attribute 를 추가합니다)

상세설명

strExplorerbar 를 속성으로 각각의 유형별로 아래와 같은 동작을 합니다.

move : 열의 타이틀 영역을 드래그하여 위치조절

sort : 열의 타이틀 영역을 클릭하여 각 열을 정렬

sortmove : 열의 타이틀 영역 정렬및 드래그하여 위치조절

sortshow : 열의 타이틀 영역을 클릭하여 정렬 및 타이틀 영역에 작은 화살표료 정렬방식 표시

sortshowmove : 정렬,위치조절, 작은화살표로 표시

<!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.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": "FirstName^LastName^Company^Address^City^County^State^ZIP_Code^Phone^Fax^E-mail^HomePage Address",
								"strColWidth": "100, 100, 250, 250, 180, 150, 70, 100, 110, 110, 250, 300",
								"strJsonRef": "grid_data",
								"strDataHeight":"29",
								"strStyle": "width:100%; height:480px; ",
								"strBackColorAlternate" : "#f7f7f7",
								"strExplorerbar": "sortshowmove",
	        					"bUseMultiSorting" : true
							};
										
			var SBGridColumnInitInfo =	[
								{ "id": "col1", "type": "output", "ref": "FirstName" },
								{ "id": "col2", "type": "output", "ref": "LastName" },
								{ "id": "col3", "type": "output", "ref": "Company" },
								{ "id": "col4", "type": "output", "ref": "Address" },
								{ "id": "col5", "type": "output", "ref": "City" },
								{ "id": "col6", "type": "output", "ref": "County" },
								{ "id": "col7", "type": "output", "ref": "State", "style" : "text-align:center" },
								{ "id": "col8", "type": "output", "ref": "ZIP", "style" : "text-align:center" },
								{ "id": "col9", "type": "output", "ref": "Phone", "style" : "text-align:center" },
								{ "id": "col10", "type": "output", "ref": "Fax", "style" : "text-align:center" },
								{ "id": "col11", "type": "output", "ref": "Email" },
								{ "id": "col12", "type": "output", "ref": "Web" }
							];
			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 onload="createElements()" class="sbgrid_body" >
	
        <div class="content_group">
            <div id="sbGridArea"></div>
        </div>
    		
</body>
</html>