Softbowl Demo Site

SBGrid는 전체데이터를 호출하는 처리가 가능합니다. 아래는 Row 30,000개 Column 10개 데이터를 AJAX 통신으로 불러온 내용입니다.

요약

AJAX 통신을 이용하여 SBGrid의 Data를 동적으로 추가할 수 있습니다.

입력값, 공동함수로 제공하고 있습니다.

String type : [getType = GET , postType = POST ]

String Send Url : 통신 Host

Object Send Data : 전송할 데이터

String dataType : 데이터 타입 [ json, html, ... ]

callback callBack 함수 : 전달받을 callback 함수

Boolean async 여부 : [true 일때 async , false 일때 동기]

Boolean cache 여부 : [true 일때 cache ]

예) AjaxHelper.excute(getType, "ajxData.html" , param, "html" , callBackFunction, true, false);

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
	<title> SB Grid </title>
	<link href="/kr/co/softbowl/css/Sbgrid_default.css" type="text/css" rel="stylesheet"  />
	<link href="/css/sort.css" type="text/css" rel="stylesheet"  />
	
	<jsp:include page="/view/common/cmCommon.jsp"/>
	<script type="text/javascript" src="/kr/co/softbowl/SBGrid.js"></script>
	<script type="text/javascript" src="/js/jsondata/DATA_JSON_POI_100.js"></script>
	<script type="text/javascript">
		SBGrid.DEF.DOMAIN = "../../";
        var datagrid1;
        var grid_data = [];
        $(document).ready(function () {
            __createElements();
        });
        function __createElements() {
            var caption, colWd, style;
            caption = "A1^A2^A3^A4^A5^A6^A7^A8^A9^A10";
            colWd = "100,100,100,100,100,100,100,100,100,100";
            style = "left:1px; top:1px; width:100%; height:480px;";
            var GridInitInfo = {
                            "strParentId": "sbGridArea",
                            "strId": "datagrid1",
                            "strCaption": caption,
                            "strColWidth": colWd,
                            "strJsonRef": "grid_data.grid",
                            "strStyle": style,
                            "strDataHeight": "29",
                            "strBackColorAlternate": "#f7f7f7",
                            "strExplorerbar": "sortshowmove",
                            "strRowHeader": "seq"
            };
            var SBGridColumnInitInfo = [
					{ "id": "col1", "type": "output", "ref": "A", "style": "text-align:center;" },
					{ "id": "col2", "type": "output", "ref": "B", "style": "text-align:center;" },
					{ "id": "col3", "type": "output", "ref": "C", "style": "text-align:center;" },
					{ "id": "col4", "type": "output", "ref": "D", "style": "text-align:center;" },
					{ "id": "col5", "type": "output", "ref": "E", "style": "text-align:center;" },
					{ "id": "col6", "type": "output", "ref": "F", "style": "text-align:center;" },
					{ "id": "col7", "type": "output", "ref": "G", "style": "text-align:center;" },
					{ "id": "col8", "type": "output", "ref": "H", "style": "text-align:center;" },
					{ "id": "col9", "type": "output", "ref": "I", "style": "text-align:center;" },
					{ "id": "col10", "type": "output", "ref": "J", "style": "text-align:center;" }
                            
            ];
            if (SBGrid.getGrid('datagrid1') != null) {
                datagrid1.destroy();
                datagrid1 = null;
            }
            datagrid1 = createSBGrid(GridInitInfo, SBGridColumnInitInfo);
            datagrid1.setRowHeight(0, 30);
           
            loadDatabyAjax();
           
        }
        function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo) {
            var objJSONdata = new Object();
            objJSONdata.objSBGridInitInfo = SBGridInitInfo;
            objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
            return SBGrid.DEF.createSBGrid(objJSONdata);
        };
        function loadDatabyAjax() {
            var maxRows = datagrid1.rows;
            var maxCols = datagrid1.cols;
            var param = 'axCols=' + maxCols + '&maxRows=' + maxRows;
          
            // AjaxHelper
            // 1번째 param : type [getType = GET , postType = POST ]
            // 2번째 param : Send Url
            // 3번째 param : Send Data
            // 4번째 param : dataType , [ json, html, ... ]
            // 5번째 param : 전달받을 callback 함수
            // 6번째 param : async 여부 , true 일때 async , false 일때 동기
            // 7번째 param : cache 여부 , true 일때 cache
            AjaxHelper.excute(getType, "hugeData.html" , param, "html" , callBackFunction, true, false);
        };
        var callBackFunction = function (data) {
            grid_data.grid = JSON.parse(data);
            datagrid1.rebuild();
        };
			
	</script>
</head>
<body onload="createElements()" class="sbgrid_body" >
	<div class="topNav">
        <div class="content_group">
            <div id="sbGridArea"></div>
        </div>
    </div>		
</body>
</html>

AJAX 로 전체데이터 호출

요약

입력값, 공동함수로 제공하고 있습니다.