AJAX 로 일부데이터 호출
SBGrid는 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 = "A^B^C^D^E^F^G^H";
colWd = "114,114,114,114,113,113,113,113";
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"
};
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;" }
];
if (SBGrid.getGrid('datagrid1') != null) {
datagrid1.destroy();
datagrid1 = null;
}
datagrid1 = createSBGrid(GridInitInfo, SBGridColumnInitInfo);
// 데이터 형태
/*
grid_data.grid = [
{ "A": "김정식1", "B": "임길현1", "C": "박천호1", "D": "유수현1", "E": "황영진1", "F": "박희애1", "G": "최제연1", "H": "이재하1" },
{ "A": "김정식2", "B": "임길현2", "C": "박천호2", "D": "유수현2", "E": "황영진2", "F": "박희애2", "G": "최제연2", "H": "이재하2" },
{ "A": "김정식3", "B": "임길현3", "C": "박천호3", "D": "유수현3", "E": "황영진3", "F": "박희애3", "G": "최제연3", "H": "이재하3" },
{ "A": "김정식4", "B": "임길현4", "C": "박천호4", "D": "유수현4", "E": "황영진4", "F": "박희애4", "G": "최제연4", "H": "이재하4" },
{ "A": "김정식5", "B": "임길현5", "C": "박천호5", "D": "유수현5", "E": "황영진5", "F": "박희애5", "G": "최제연5", "H": "이재하5" },
{ "A": "김정식6", "B": "임길현6", "C": "박천호6", "D": "유수현6", "E": "황영진6", "F": "박희애6", "G": "최제연6", "H": "이재하6" },
{ "A": "김정식7", "B": "임길현7", "C": "박천호7", "D": "유수현7", "E": "황영진7", "F": "박희애7", "G": "최제연7", "H": "이재하7" },
{ "A": "김정식8", "B": "임길현8", "C": "박천호8", "D": "유수현8", "E": "황영진8", "F": "박희애8", "G": "최제연8", "H": "이재하8" },
{ "A": "김정식9", "B": "임길현9", "C": "박천호9", "D": "유수현9", "E": "황영진9", "F": "박희애9", "G": "최제연9", "H": "이재하9" },
{ "A": "김정식10", "B": "임길현10", "C": "박천호10", "D": "유수현10", "E": "황영진10", "F": "박희애10", "G": "최제연10", "H": "이재하10" },
{ "A": "김정식11", "B": "임길현11", "C": "박천호11", "D": "유수현11", "E": "황영진11", "F": "박희애11", "G": "최제연11", "H": "이재하11" },
{ "A": "김정식12", "B": "임길현12", "C": "박천호12", "D": "유수현12", "E": "황영진12", "F": "박희애12", "G": "최제연12", "H": "이재하12" },
{ "A": "김정식13", "B": "임길현13", "C": "박천호13", "D": "유수현13", "E": "황영진13", "F": "박희애13", "G": "최제연13", "H": "이재하13" },
{ "A": "김정식14", "B": "임길현14", "C": "박천호14", "D": "유수현14", "E": "황영진14", "F": "박희애14", "G": "최제연14", "H": "이재하14" },
{ "A": "김정식15", "B": "임길현15", "C": "박천호15", "D": "유수현15", "E": "황영진15", "F": "박희애15", "G": "최제연15", "H": "이재하15" },
{ "A": "김정식16", "B": "임길현16", "C": "박천호16", "D": "유수현16", "E": "황영진16", "F": "박희애16", "G": "최제연16", "H": "이재하16" },
];
*/
loadDatabyAjax();
datagrid1.vscroll.addEventListener("onscrollmax", "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, "ajxData.html" , param, "html" , callBackFunction, true, false);
};
var callBackFunction = function (data) {
var rowsCount = datagrid1.rows;
if (grid_data.grid != undefined) {
grid_data.grid = grid_data.grid.concat(JSON.parse(data));
} else {
grid_data.grid = JSON.parse(data);
}
datagrid1.refresh();
datagrid1.setTopRow(rowsCount);
};
</script>
</head>
<body onload="createElements()" class="sbgrid_body" >
<div class="content_group">
<div id="sbGridArea"></div>
</div>
</body>
</html>