Format
SBGrid는 컬럼에 Format 설정을 제공합니다.
요약
컬럼의 타입(input,output) format 설정한다.format 유형
통화 : #,###
날짜 : yyyy-mm-dd
시간 : hh:nn:ss
문자 : 999999-9999999
컬럼에 대한 속성에 "format": "#,###" 입력합니다.
예) var SBGridColumnInitInfo = [{ "id": "col1", "type": "output", "ref": "Electric_power_consumption", "format": "#,###.00" ,"style" : "text-align:right" }];
상세설명
통화 : #,### - 숫자만 입력 가능, 소수점에 대한 통화는 별도 Script 코딩이 필요합니다.
날짜 : yyyy-mm-dd - 소문자 표기만 가능하며 대문자는 적용되지 않습니다. 각각 두자리 또는 네자리 표현 가능합니다.
시간 : hh:nn:ss - 두자리의 소문자만 표현가능합니다. 'h' 유효값 범위 :00~24 ,'n' 유효값 범위 : 00~59,'s' 유효값 범위 : 00~59
문자 : 999999-9999999 : 포맷은 숫자 여섯자리 입력 수 "-"가 자동으로 붙으며 다시 7자리 숫자 입력 가능합니다.
<!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;
var SBGridColumnInitInfo = [
{
"id": "col1",
"type": "output",
"ref": "orderdate",
"style": "text-align:center"
},
{
"id": "col2",
"type": "output",
"ref": "deliverynum",
"style": "text-align:center"
},
{
"id": "col3",
"type": "output",
"ref": "name",
"style": "text-align:center"
},
{
"id": "col4",
"type": "output",
"ref": "identification",
"style": "text-align:center"
},
{
"id": "col5",
"type": "output",
"ref": "phone",
"style": "text-align:center"
},
{
"id": "col6",
"type": "output",
"ref": "price",
"style": "text-align:right"
}
];
$(document).ready(function () {
__createElements();
});
function __createElements() {
var GridInitInfo = {
"strParentId": "sbGridArea",
"strId": "datagrid1",
"strCaption": "주문날짜^송장번호^이름^주민등록번호^전화번호^가격",
"strColWidth": "130, 130, 130, 130, 100, 130",
"strJsonRef": "eval1.grid",
"strDataHeight": "29",
"strStyle": "width:100%; height:480px;",
"strBackColorAlternate": "#f7f7f7"
};
if (SBGrid.getGrid('datagrid1') != null) {
datagrid1.destroy();
datagrid1 = null;
}
datagrid1 = createSBGrid(GridInitInfo, SBGridColumnInitInfo);
datagrid1.setRowHeight(0, 30);
};
function formatOnClick() {
SBGridColumnInitInfo[0].format = "yyyy-mm-dd";
SBGridColumnInitInfo[1].format = "L99-LL999";
SBGridColumnInitInfo[3].format = "999999-9999999";
SBGridColumnInitInfo[4].format = "99-999-9999";
SBGridColumnInitInfo[5].format = "#,###";
__createElements();
datagrid1.refresh();
};
function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo) {
var objJSONdata = new Object();
objJSONdata.objSBGridInitInfo = SBGridInitInfo;
objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
return SBGrid.DEF.createSBGrid(objJSONdata);
};
</script>
</head>
<body>
<div id="button_group">
<input type="button" class="sbgrid_demo_button2" style="width:33%; height:30px; background-color:#F2CB61;" id="btnEmptyMessage" value="Format 적용" />
</div>
<div id="sbGridArea"></div>
</body>
</html>