RealGrid+(FLASH)에서 RealGridJS로의 전환
RealGrid+는 기본적으로 RealGridJS와 호환성을 유지하여 개발되었습니다.
일부 변경된 부분을 제외한다면 생성과 데이터 로드 부분만 변경해도 화면표시까지는 100% 동작 합니다.
RealGridJS의 데모는 http://demo.realgrid.com/ (opens in a new tab) 에서 확인하실 수 있습니다.
RealGridJS의 가이드 문서는 http://help.realgrid.com/ (opens in a new tab) 에서 확인하실 수 있습니다.
https://help.realgrid.com/tutorial/ (opens in a new tab) 에서 기본적인 학습을 진행하시기 바랍니다.
아래 문서도 같이 참조해주세요.
http://help.realgrid.com/tutorial/c11/ (opens in a new tab)
중요 변경 사항
RealGrid+는 FLASH기반의 그리드 였으나 RealGridJS는 HTML5 Canvas기반의 그리드로 개발되었습니다.
그렇기 때문에 사용하는 브라우져는 반드시 HTML5 기술을 지원하는 브라우져여야 합니다.(ie9~edge, chrome, firefox 등)
ie9 이상 지원하기는 하지만 성능상 최소 ie11, 가능하다면 chrome, edge등 최신버전사용을 추천드립니다.
변경 내용
필요 파일
RealGrid+
<script type="text/javascript" src="/scripts/realgridplus.js"></script>
<script type="text/javascript" src="/scripts/realgridlic.js"></script>
<script type="text/javascript" src="/scripts/realgridutil.js"></script>
<script type="text/javascript" src="/scripts/swfobject.js"></script>RealGridJS
import 되는 순서가 중요합니다. 반드시 아래 예제와 같이 지정해주세요.
<script type="text/javascript" src="/scripts/realgridjs-lic.js"></script>
<script
type="text/javascript"
src="/scripts/realgridjs_eval.1.1.34.min.js"
></script>
<script type="text/javascript" src="/scripts/realgridjs-api.1.1.34.js"></script>
<script type="text/javascript" src="/scripts/jszip.min.js"></script>그리드 생성
- RealGrids.onload -> window.onload, $(document).ready()로 변경되었습니다.
- Flash 객체를 로드하는 setupGrid()를 사용하지 않습니다.
- RealGridJS에서 사용하는 assets 위치를 지정하는 setRootContext() (opens in a new tab)가 추가되었습니다.
- RealGrids -> RealGridJS로 클래스명이 변경되었습니다.
RealGrid+
RealGrids.onload = function (id) {
gridView = new RealGrids.GridView(id);
dataProvider = new RealGrids.LocalDataProvider();
gridView.setDataProvider(dataProvider);
dataProvider.setFields([
{
fieldName: 'KorName',
dataType: 'text',
},
]);
gridView.setColumns([
{
name: 'KorName',
fieldName: 'KorName',
type: 'data',
width: '60',
header: {
text: '이름',
},
},
]);
};RealGridJS
window.onload = function () {
RealGridJS.setRootContext('/scripts/');
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView(container);
gridView.setDataSource(dataProvider);
dataProvider.setFields([
{
fieldName: 'KorName',
dataType: 'text',
},
]);
gridView.setColumns([
{
name: 'KorName',
fieldName: 'KorName',
type: 'data',
width: '60',
header: {
text: '이름',
},
},
]);
};데이터 로드
RealGrid+
dataProvider.loadData(
{
type: 'json',
method: 'post',
url: '../../DemoData/defaultdemodata.json?__time__=' + new Date().getTime(),
progress: true,
},
function (provider) {
grdView.setFocus();
},
function (provider, message) {}
);RealGridJS
$.ajax({
url: '../../DemoData/defaultdemodata.json?__time__=' + new Date().getTime(),
success: function (data) {
dataProvider.fillJsonData(data);
},
error: function (xhr, status, error) {},
complete: function (data) {
grdView.closeProgress();
grdView.setFocus();
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
//Download progress
xhr.addEventListener(
'progress',
function (evt) {
if (evt.lengthComputable) {
grdView.setProgress(0, evt.total, evt.loaded);
}
},
false
);
return xhr;
},
});아이콘 렌더러
- 이미지 list 등록하는 방법이 변경되었습니다.
RealGrid+
var imgList = new RealGrids.ImageList('images1');
imgList.rootUrl = 'http://' + location.host + '/imgs/';
imgList.images = ['man.png', 'woman.png'];
gridView.addImageList(imgList);
gridView.setColumns([
{
fieldName: 'fieldName',
name: 'columnName',
imageList: 'image1',
renderer: { type: 'icon' },
styles: [
{
iconIndex: 0,
iconLocation: 'left',
},
],
},
]);RealGridJS
http://demo.realgrid.com/Renderer/IconCellRenderer/ (opens in a new tab)
var imgs = new RealGridJS.ImageList('images1', '/resource/image/icon/');
imgs.addUrls(['man.png', 'woman.png']);
gridView.registerImageList(imgs);
gridView.setColumns([
{
fieldName: 'fieldName',
name: 'columnName',
imageList: 'image1',
renderer: { type: 'icon' },
styles: [
{
iconIndex: 0,
iconLocation: 'left',
},
],
},
]);ContextMenu
두번째 Argument인 label이 RealGridJS에서는 MenuItem (opens in a new tab) 객체로 변경되었습니다.
RealGrid+
gridView.setContextMenu([
{label:"Menu1"},
{label:"Menu2"},
....
]);
....
gridView.onContextMenuItemClicked = function (grid, label, index) {
alert("Context menu가 클릭됐습니다: " + label + "\n"+JSON.stringify(index));
var selRow = dataProvider.getJsonRow(index.dataRow);
console && console.log(selRow);
};RealGridJS
gridView.setContextMenu([
{label:"Menu1"},
{label:"Menu2"},
....
]);
....
gridView.onContextMenuItemClicked = function (grid, data, index) {
alert("Context menu가 클릭됐습니다: " + data.label + "\n"+JSON.stringify(index));
var selRow = dataProvider.getJsonRow(index.dataRow);
console && console.log(selRow);
};API
| RealGrid+ | RealGridJS |
|---|---|
| setupGrid() | X |
| setExternalWheelEvents() | X |
| X | setRootContext() |
| loadData() | fillJsonData(), fillCsvData(), fillXmlData() |
| addImageList() | registerImageList() |