RealGrid HELP

RealGrid개발자가이드(TutorialAClass)Mar3,2015

RealGridJS주요기능

Mar4,2015

A0RealGrid평가판받기

Mar29,2015

A1RealGridJS설치하기(v1.0.10이상)

Jun17,2015

A2컬럼만들기

Jun26,2015

A3컬럼이름바꾸기

Jun26,2015

A4DataProvider에Field만들기

Jun29,2015

A5컬럼-필드연결하기

Jun30,2015

A6RealGrid에데이터넣기

Jun30,2015

A7필드하나에컬럼두개연결하기

Jul6,2015

A8포커스셀(FocusedCell)이해하기

Jul6,2015

A9여러행데이터와RowId이해하기

Jul9,2015

A10ItemModel과ItemIndex이해하기

Jul9,2015

A11Data와Item의다른점은?

Jul13,2015

A12소팅(sorting),데이터정렬하기-I단일컬럼정렬

Jul14,2015

A13소팅(sorting),데이터정렬하기-II다중컬럼정렬

Jul15,2015

A14소팅(sorting),데이터정렬하기-IIIorderBy()함수사용하기

Jul15,2015

A15로우그룹핑(rowgrouping)-I드래깅(dragging)을이용하여그룹핑

Jul15,2015

A16로우그룹핑(rowgrouping)-IIgroupBy()함수로그룹핑

Jul27,2015

A17행과열고정하기(Fixing)

Jul29,2015

A18컬럼필터링(Filtering)-I필터선택상자사용하기

Jul30,2015

A19컬럼필터링(Filtering)-IIsetColumnFilters()함수사용하기

Jul31,2015

A20셀선택하기(Selecting)-SelectOptions

Aug5,2015

A21셀선택하기(Selecting)-선택한셀의값가져오기

Aug7,2015

A22셀선택하기(Selecting)-동적으로셀선택하기

Aug10,2015

A23데이터편집하기(Editing)

Aug11,2015

A24데이터불러오기(DataLoading)

Aug12,2015

A25에디터(Editor)와셀의값

Aug17,2015

A26이벤트이해하기(Events)

Aug20,2015

A27옵션(Options)의종류와설정방법

RealGridJS주요기능Mar3,2015

RealGridJS RealGrid 기능정의 Features

RealGridJs주요기능정리컬럼(Column)

컬럼너비조정

컬럼너비자동조정

컬럼틀고정

컬럼숨기기

컬럼스타일변경

컬럼이동

컬럼헤더호버링

컬럼레이아웃파일저장

컬럼그룹핑

다중정렬

셀병합

필터링

필터핸들러

로우(Row)

행높이조정

행틀고정

행스타일변경

행선택

그룹핑

편집(Editing)

다양한편집기능

데이터유효성체크

셀또는행단위편집가능여부조정

컬럼포멧적용

멀티콤보필터

데이터(Data)

데이터검색

다중그리드뷰기능

레이지로딩지원

선택된셀들의집계연산기능

데이터롤백

전체데이터선택

엑셀(Excel)

엑셀내보내기

엑셀들여오기

확장기능(Extention)

합계/평균및소계기능

대용량데이터처리

언어변환가능여부

멀티라인그리드

복사및붙여넣기

그리드내부에그래프표현

바코드표현

선택이벤트

스타일변경가능

참조

RealGridAPI

A0RealGrid평가판받기Mar4,2015

RealGridJS RealGrid Tutorial 평가판 evaluation

들어가며이글은RealGridJS버전평가판을받는방법에대해포스팅한글입니다.

RealGrid+와RealGridJS는둘다RealGrid의홈페이지에서평가판을받을수있습니다.하지만,아직평가판

을직접다운로드할수있는방법은없습니다.홈페이지에서평가판을요청하면이메일을통해평가판을받을수

있습니다.

평가판요청평가판을다운로드하기위해홈페이지로들어가보겠습니다.홈페이지에서Download메뉴를클릭하면평가판을

요청할수있는페이지로이동합니다.30일동안사용할수있는평가판은HTML5버전인RealGridJS와Flash

버전인RealGrid+를따로요청할수있도록버튼이마련되어있습니다.평가판요청버튼을눌러보면평가판요청

에필요한기본정보를입력할수있는화면이팝업됩니다.

이름,회사명,연락처,이메일을입력하고RealGrid를사용할도메인을입력해주어야합니다.RealGrid는도메

인단위로동작되는라이선스방식을채택하고있기때문에해당도메인이외의도메인에서는사용할수없습니다.

그러니반드시평가판을테스트해볼도메인명을입력해야합니다.“localhost”이나IP주소를입력해도된다고

합니다.

정보를모두입력했다면요청하기버튼을누르면됩니다.이제조금기다리면메일을통해요청한평가판이발송되

어옵니다.

메일로받은파일을열어보면아래화면과같이하나의폴더와네개의파일로구성되어있습니다.우선assets폴더

는RealGrid에서사용되는이미지리소스가들어있는폴더입니다.버튼아이콘이미지가들어있습니다.네개의

파일중sample.html파일은RealGrid를웹에서볼수있는샘플파일입니다.나머지JavaScript파일들은

RealGrid컨트롤을웹화면에올리는데필요한핵심파일들입니다.javascript폴더에넣고사용할페이지소스에

서링크를걸어사용하면됩니다.

참조

RealGrid평가판다운로드

A1RealGridJS설치하기(v1.0.10이상)Mar29,2015

RealGridJS RealGrid Setup

들어가며이번강좌에서는RealGridJS의설치에대해배워보겠습니다.이강좌의내용에해당하는버전은1.0.10이후버

전입니다.

1.0.10 버전 보다 이전 버전의 설치 방법은 [v1.0.10 이전 버전 설치하기(v1.0.9.1988 이하)]강좌를 참조하세요.

이론RealGrid를개발환경에맞게설치해보겠습니다.만약,RealGrid가없다면평가판요청페이지에서평가판을요

청하면메일로평가판을받을수있습니다.메일에포함된RealGrid파일중설치에반드시필요한파일은아래다

섯개의Javascript파일들과RealGridJS화면구성에필요한assets폴더에들어있는이미지파일들입니다.

Javascript파일중jszip.min.js파일은엑셀파일Import/Export에필요한파일이므로엑셀파일내보내기기능

이필요한화면에서는반드시포함시켜주셔야합니다.

참고로RealGridJS는JQuery와같은외부라이브러리가필요없습니다.

RealGridJS평가용/개발자용버전파일

/scripts/assets//scripts/realgridjs-lic.js/scripts/realgridjs_eval.{version}.min.js/scripts/realgridjs-api.{version}.js.js/scripts/jszip.min.js

RealGridJS운영용버전파일

/scripts/assets//scripts/realgridjs-lic.js/scripts/realgridjs.{version}.min.js/scripts/realgridjs-api.{version}.js.js/scripts/jszip.min.js

실습이제RealGridJS를웹화면에올려보겠습니다.

1. 세개의스크립트파일을순서대로include합니다.반드시아래의순서대로파일을불러와야합니다.

<script type="text/javascript" src="/scripts/realgridjs-lic.js"></script> <script type="text/javascript" src="/scripts/realgridjs_eval.1.0.14.min.js"></script> <script type="text/javascript" src="/scripts/realgridjs-api.1.0.14.js"></script>

2. GridView객체를저장할gridView변수를정의합니다.

var gridView;

3. LocalDataProvider객체를저장할dataProvider변수를정의합니다.

var dataProvider;

4. assets폴더의위치를변경하기위해setRootContext(path)함수를호출합니다.이때 assets 이라는

폴더이름은변경할수없습니다.반드시path에지정된경로아래에 assets 이라는이름의폴더가존재해

야하며,그아래에화면을구성하기위한이미지파일들이있어야합니다.

RealGridJS.setRootContext("/script");

5. LocalDataProvider와GridView객체를생성하고GridView의DataSource를생성된

LocalDataProvider로지정하는코드를추가합니다.

dataProvider = new RealGridJS.LocalDataProvider(); gridView = new RealGridJS.GridView("realgrid"); gridView.setDataSource(dataProvider);

6. RealGridJS가표시될 div 태그를작성하고크기를지정해야합니다.크기가지정되지않으면화면에

RealGridJS가표시되지않습니다.

<div id="realgrid" style="width: 100%; height: 200px;"></div>

A2컬럼만들기Jun17,2015

RealGridJS RealGrid column

들어가며[A1강좌]에서html을이용해화면에RealGridJS를올리는방법에대해알아보았습니다.이강좌에서는그리드

에컬럼을표시하는방법에대해배워보겠습니다.

이론컬럼에대해이야기하기전에RealGrid의컨셉을이해해야합니다.아래이미지는RealGrid의구성을간략하게

표현한도식입니다.

그림에서보는것과같이RealGrid는데이터영역을구현한DataProvider와컨트롤영역인Controller,데이

터뷰영역인GridView로구성되어있습니다.

간단히설명하면RealGrid는DataProvider에들어있는데이터를GridView를통해화면에보여주도록만들어

졌습니다.ItemModel이나Controller는GridView에데이터가표현되기전에Sorting이나Groupping등

데이터를조작하는역학을담당하고있습니다.각각의구성에대한상세한내용을앞으로차차알아보기로하겠습니

다.

RealGrid에서컬럼(Column)이란DataProvider에들어있는DataSet의특정필드의값을그리드에표현하

기위한부분을말합니다.컬럼에대한속성은DataColumn를참조하세요.

실습1. RealGrid에컬럼을표시하기위해새로운DataColumn배열객체를생성하고타이틀표시를위한헤더속

성과너비속성을입력합니다.

//새로운 DataColumn array 객체 생성 var columns = [ { header : { text: "컬럼1" }, width: 300 } ];

2. 만들어진DataColumn객체를GridView의setColumns()함수를이용해그리드에입력합니다.

//setColumns()함수로 그리드에 반영 gridView.setColumns(columns);

A3컬럼이름바꾸기Jun26,2015

RealGridJS RealGrid column

들어가며[A2강좌]에서는컬럼을만들어보았습니다.이번강좌에서는컬럼의헤더타이틀을변경하는방법에대해배워보겠

습니다.

이론그리드에표시된컬럼의정보를변경하기위해서는해당컬럼의헤더(header)속성을가져온다음HeaderTitle

을변경하고다시컬럼에넣어주는방법을사용합니다.그러면여기서헤더속성을가져오는함수와다시넣어주는

함수를알아야겠습니다.GridView객체가가지고있는두함수는각각getColumnProperty()함수와

setColumnProperty()함수입니다.

이두함수는컬럼의헤더속성뿐아니라데이터컬럼(DataColumn)이가지고있는여러가지속성을수정하기위

해사용됩니다.

실습1. 컬럼의헤더속성객체가져오기

//컬럼 이름이 "col1"인 컬럼의 heder객체를 가져온다. var header = gridView.getColumnProperty("col1", "header");

2. 헤더객체의Title속성변경하기

//컬럼 헤더를 "컬럼2"로 바꾼다. header.text = "컬럼2";

3. 헤더객체GridView에다시넣기

//헤더 객체를 GridView에 다시 넣는다. gridView.setColumnProperty("col1", "header", header);

컬럼의헤더가“컬럼2”로바뀐것을확인하세요.

A4DataProvider에Field만들기Jun26,2015

RealGridJS RealGrid field

들어가며지난강좌에서Column을만들어보았지만Field가없는Column은껍데기에불과합니다.이번강좌에서는

RealGridJS의데이터를담고있는DataProvider에Field라는것을만들어데이터를구조화해보기로하겠습

니다.

이론지난RealGridJS컬럼만들기에서살펴본RealGrid의컨셉이미지에Field와Column이속한영역을표시해

보았습니다.그림에서Column이 속한 영역 은GridView이며Field가속한영역은DataProvider입니다.

DataProvider는원본데이터를관리하기위한클래스이며하위클래스인LocalDataProvider와

TreeDataProvider는각각그리드와트리그리드의데이터관리를위한클래스입니다.

속한영역 이라고 표현 하는 것이 조금 어색하긴 하지만 그렇게 표현하겠습니다.

RealGrid에서

Field는DataField라는클래스로정의되어있으며,

Column은DataColumn이라는클래스로정의되어있습니다.

실습1. DataField객체의배열을생성하여fields변수에넣습니다.

//새로운 DataField 배열 객체 생성 var fields = [ { fieldName: "field1" }, { fieldName: "field2" } ];

2. 생성한DataField배열을DataProvider의setFields()함수의인자로넘겨필드셋을구성합니다.

//setColumns()함수로 그리드에 반영 dataProvider.setFields(fields);

A5컬럼-필드연결하기Jun29,2015

RealGridJS RealGrid column field

들어가며필드와컬럼을연결한다는표현은조금이상합니다.하지만그냥그렇게표현하겠습니다.DataProvider에들어

있는데이터를GridView에표현하는것은RealGrid의중요한기능중하나입니다.

이기능을구현하기위해필드와컬럼을연결해야합니다.

이론그림을보겠습니다.

필드는 Data 영역이고컬럼은 View 영역입니다.

그림에서처럼하나의필드는하나의컬럼과연결가능합니다.RealGrid는하나의필드에여러개의컬럼을연결할

수도있습니다.이것은데이터를다양한방법으로표현가능한RealGrid의장점이기도합니다.하나의필드에여러

개의컬럼을연결해보는연습은[A7강좌]에서배울수있습니다.

필드와컬럼을연결하는방법은간단합니다.컬럼객체를생성할때fieldName속성에연결할필드의이름을지정

하면됩니다.

fieldName속성은데이터컬럼(DataColumn)페이지를참조하세요.

실습1. 두개의필드를가진배열객체를생성하고DataProvider에입력합니다.

//두 개의 필드를 가진 배열 객체를 생성합니다. var fields = [ { fieldName: "field1" }, { fieldName: "field2" } ]; //DataProvider의 setFields함수로 필드를 입력합니다. dataProvider.setFields(fields);

2. field1과연결된컬럼을생성하고GridView에입력합니다.

//필드와 연결된 컬럼을 가진 배열 객체를 생성합니다. var columns = [ { name: "col1", fieldName: "field1", header : { text: "컬럼1" }, width: 200 }, { name: "col2", fieldName: "field2", header : { text: "컬럼2" }, width: 200 } ]; //컬럼을 GridView에 입력 합니다. gridView.setColumns(columns);

A6RealGrid에데이터넣기Jun30,2015

RealGridJS RealGrid column field dataprovider setRows

들어가며이번강좌는[A5강좌]에서이어지는내용입니다.

그리드에필드와컬럼이연결된상태에서DataProvider에데이터를넣는방법을배워보겠습니다.

이론DataProvider에데이터를넣는방법은아래와같이여러가지방법이있습니다.이강좌에서는

LocalDataProvider.setRows()함수를사용합니다.

실습1. 데이터행배열객체를생성하고데이터를입력합니다.

var data = [ ["data1", "data2", "data3"] ];

2. setRows()함수로LocalDataProvider에원본데이터를입력합니다.

dataProvider.setRows(data);

A7필드하나에컬럼두개연결하기Jun30,2015

RealGridJS RealGrid column field dataprovider

들어가며이강좌에서는[A6강좌]와는달리하나의필드를두개의컬럼과연결하는방법을배웁니다.

이론아래그림에서처럼필드와컬럼의관계는1:n의관계입니다.이방법은그리드를활용한업무에서다양한데이터

표현기법을가능하게해줍니다.

예를들어하나의필드데이터를숫자컬럼과바셀렌더러(BarCellRenderer)컬럼에연결하면시각적인데이터표현

효과를높일수있습니다.

실습1. 두번째컬럼의fieldName속성에“field1”을연결합니다.

var columns = [ { name: "col1", fieldName: "field1", header : { text: "컬럼1" }, width: 150 }, { name: "col2", fieldName: "field1", header : { text: "컬럼2" }, width: 150 } ];

2. 데이터행배열객체를생성하고,setRows()함수로LocalDataProvider에원본데이터를입력합니다.

var data = [ ["data1", "data2"] ]; dataProvider.setRows(data);

A8포커스셀(FocusedCell)이해하기Jul6,2015

RealGridJS RealGrid dataprovider focus

들어가며이번강좌에서는그리드의포커스셀(FocusedCell)에대해알아보고포커스셀의정보를가져오거나특정셀로포

커스를이동시켜보겠습니다.

이론RealGrid에서포커스셀이란커서가위치한셀을의미합니다.포커스셀의정보를가져오려면

GridBase.getCurrent()를이용하고포커스셀의정보를입력하려면GridBase.setCurrent()를이용합니다.

두함수의인자와리턴값인CellIndex는데이터셀(DataCell)의정보를관리하기위한클래스입니다.

CellIndex의속성에대한정보는다음강좌에서배울수있습니다.

실습1. getCurrent()함수로현재포커스된셀의CellIndex를가져옵니다.가져온CellIndex객체에dataRow,

column,fieldName속성을변경하여포커스셀의위치를이동합니다.

$("#btnToggleFocus").on("click", function(){ //현재 포커스된 셀정보 가져오기 var focusCell = gridView.getCurrent(); //이동할 행 번호(RowId), 컬럼정보 입력 focusCell.dataRow = 0; if (focusCell.fieldName == "field1") { focusCell.column = "col2"; focusCell.fieldName = "field2"; } else { focusCell.column = "col1"; focusCell.fieldName = "field1"; } //포커스된 셀 변경 gridView.setCurrent(focusCell); })

A9여러행데이터와RowId이해하기Jul6,2015

RealGridJS RealGrid dataprovider RowId dataRow CellIndex

들어가며이번강좌에서는여러행의데이터를그리드에입력하는방법과RowId의개념을배워보겠습니다.

이론여러행의데이터를입력하는방법이따로있는것은아닙니다.기본적으로DataProvider.setRows()함수에인

자로데이터배열객체를넣어주면됩니다.

사실이번강좌에서이해해야할부분은DataProvider에입력된데이터는고유의행번호를가지게된다는것과

이행번호를 RowId 라고부른다는것입니다.RowId는DataProvider에들어있는데이터세트(DataSet)의

각행에부여된고유번호입니다.

RowId는A8강좌에서알아본CellIndex클래스의 dataRow 속성을통해확인할수있습니다.

실습1. 여러행데이터를배열로만들어data변수에넣습니다.DataProvider.setRows()를호출하면서인자로

넘겨줍니다.

var data = [ ["data1-1", "data1-2"], ["data2-1", "data2-2"], ["data3-1", "data3-2"], ["data4-1", "data4-2"] ]; dataProvider.setRows(data);

2. 버튼을클릭하면GridView.getCurrent()로가져온CellIndex정보에서dataRow속성값을팝업합니

다.

$("#btnPopupRowId").on("click", function(){ var focusCell = gridView.getCurrent(); alert(focusCell.dataRow); });

A10ItemModel과ItemIndex이해하기Jul9,2015

RealGridJS RealGrid dataprovider ItemModel itemIndex CellIndex

들어가며A9강좌에서 RowId 에대해배워보았습니다.이번강좌에서는그와유사한개념인 ItemIndex 에대해배워보겠

습니다.

이론기본적으로아래그림과같이Item과Data는1:1매핑이되어있습니다.하지만,소팅(Sorting),그룹핑

(Grouping)등컨트롤러(Controller)의다양한기능을그리드에표현하기위해더많은Item들이생겨납니다.

이런기능은앞으로남은많은강좌들에서배울수있습니다.

ItemIndex 는Item의고유한행번호입니다.itemIndex는A8강좌에서알아본CellIndex클래스의

itemIndex 속성을통해확인할수있습니다.

실습을통해현재포커스된셀의ItemIndex를팝업해보겠습니다.

실습소스코드는A9강좌와거의동일합니다.

1. 버튼을클릭하면GridView.getCurrent()로가져온CellIndex.itemIndex를팝업합니다.

$("#btnPopupItemIndex").on("click", function(){ var focusCell = gridView.getCurrent(); alert(focusCell.itemIndex); });

A11Data와Item의다른점은?Jul9,2015

RealGridJS RealGrid dataprovider itemmodel itemid datarow rowid

들어가며A9강좌와A10강좌에서 RowId 와 ItemIndex 에대해배워보았습니다.이번강좌에서는Data와Item에대

해알아보겠습니다.

이론Data와Item은RealGrid의공식적인명칭이아니지만튜토리얼에서는이해를돕기위해DataProvider와

ItemModel의행(Row)정보를각각Data와Item으로표현하겠습니다.

아래그림은Data와Item의관계를표현하고있습니다.동시에,Item의종류도설명합니다.

Item의순서는Data의순서는동일할수도있고,아닐수도있습니다.

Item은“row”,“group”,“footer”,“tree”의형식으로구분됩니다.

Item에대한자세한설명은GridItem을참조하세요.

Item과Data의개념은앞으로남은많은강좌들을실습해가면서좀더깊이이해할수있습니다.

이번강좌에서는ItemIndex와RowId가서로다를수있다는사실을정렬(Sorting)기능을통해확인해보겠습

니다.

RealGrid에서정렬은Data를정렬하는것이아니고Item을정렬하는것입니다.즉,정렬순서가변경되면

RowId와는관계가없고,ItemIndex에변동이발생합니다.이런사실을실습을통해확인해보겠습니다.

실습소스코드는A10강좌에서필드와컬럼,데이터는모두동일합니다.

1. setCurrent2Row()함수는포커스를두번째행에가도록하는함수입니다.GridView.getCurrent()함

수의리턴값인CollIndex의dataRow값을변경하도록했지만,현재상태는ItemIndex와RowId가같기

때문에코드에서 current.dataRow = 1; 을 current.itemIndex = 1; 로바꾸어도동일한결과를얻

을수있습니다.

//동적으로 두 번째 행에 포커스 되도록 함수 function setCurrent2Row(){ var current = {}; current.dataRow = 1; gridView.setCurrent(current); }

2. popupIndex()함수는포커스된셀의ItemIndex와RowId를팝업합니다.

//ItemIndex와 RowId를 팝업하는 함수 function popupIndex(){ var focusCell = gridView.getCurrent(); alert("ItemIndex:" + focusCell.itemIndex + ", RowId:" + focusCell.dataRow); }

3. changeOrder()함수는두번째컬럼데이터의역순으로그리드의정렬순서를변경합니다.

GridView.orderBy();함수에대해서는별도의강좌에서배울수있습니다.

//두 번째 필드의 데이터를 기준으로 역순으로 정렬 function changeOrder(){ var fields = ["field2"]; var dirs = [RealGridJS.SortDirection.DESCENDING]; gridView.orderBy(fields, dirs); }

4. 아래코드는각버튼의클릭이벤트입니다.

//버튼을 클릭하면 포커스행을 두번째 행으로 선택합니다. $("#btnSetCurrent2Row").on("click", function(){ setCurrent2Row(); })

//버튼을 클릭하면 ItemIndex와 RowId를 표시 합니다. $("#btnPopupIndex1").on("click", function(){ popupIndex(); }) //버튼을 클릭하면 정렬순서를 바꿉니다. $("#btnChangeOrder").on("click", function(){ changeOrder(); })

//버튼을 클릭하면 ItemIndex와 RowId를 표시 합니다. $("#btnPopupIndex2").on("click", function(){ popupIndex(); })

A12소팅(sorting),데이터정렬하기-I단일컬럼정렬Jul13,2015

RealGridJS RealGrid dataprovider itemmodel sort sorting exclusive

들어가며[A11강좌]에서이미 GridBase.orderBy(); 함수를이용해정렬하는방법이언급되었습니다.[A12강좌],

[A13강좌],[A14강좌]에서정렬(sorting)에대해좀더자세히배워보겠습니다.

이론

RealGrid에서 정렬 이란 특정 컬럼의 데이터값에 의해 행의 순서를 재배열 하는 것을 의미합니다.

그림에서처럼정렬명령은Controller가받아서ItemModel을재구성하는과정으로처리됩니다.정렬명령을내

리는방법은 컬럼 클릭(Column Click) 방법과 orderBy(); 함수를호출하는방법이있습니다.

[그림12-1]

SortStyle

정렬은단일컬럼정렬(exclusive)과다중컬럼정렬(inclusive,reverse)로SortStyle을구분합

니다.SortStyle은SortingOptions클래스를통해그리드에적용할수있습니다.

SortDirection

정렬방향은순방향(ascending)과역방향(descending)의두가지가있습니다.순방향이란작은값에

서큰값의순서로정렬하는것이며,역방향은그반대의순서로정렬하는것입니다.

정렬방향은SortDirection의이름으로정의되어있습니다.SortDirection은GridView.orderBy()함

수의인자로넣어각필드의정렬방향을결정합니다.

이번강좌에서는정렬을위해그리드에옵션을설정하는방법과컬럼클릭정렬방법중단일컬럼정렬(exclusive)

에대해배워보겠습니다.

컬럼클릭에의한정렬은아래세가지방법으로토글(toggle)됩니다.

첫번째클릭:순방향(ascending)정렬

두번째클릭:역방향(descending)정렬

세번째클릭:원래데이터의순서(RowId순서)로정렬

단일컬럼정렬

아래그림은실행화면에서수학컬럼을클릭할경우정렬이실행되는순서를표시한그림입니다.실제RealGrid에

서아래그림과같이클릭했을경우정렬되는지확인해보세요.

단일컬럼정렬인경우정렬된컬럼이아닌다른컬럼을클릭할경우이전컬럼의정렬순서는모두무시하고새롭

게클릭된컬럼으로다시정렬합니다.

[그림12-2]

실습1. 그리드의데이터를위한코드는지금까지연습했던코드와같습니다.세개의필드와세개의컬럼,그리고4개

행의데이터를입력하는코드입니다.

//세 개의 필드를 가진 배열 객체를 생성합니다. var fields = [ { fieldName: "field1" }, { fieldName: "field2" }, { fieldName: "field3" } ]; //DataProvider의 setFields함수로 필드를 입력합니다. dataProvider.setFields(fields);

//필드와 연결된 컬럼을 가진 배열 객체를 생성합니다. var columns = [ { name: "col1", fieldName: "field1", header : { text: "이름" }, width: 150 }, { name: "col2", fieldName: "field2", header : { text: "국어" }, width: 150 }, { name: "col3", fieldName: "field3", header : { text: "수학" }, width: 150 } ]; //컬럼을 GridView에 입력 합니다. gridView.setColumns(columns);

var data = [ ["송윤아", "10", "33"], ["전도연", "20", "22"], ["하지원", "20", "11"], ["전지현", "10", "44"] ]; dataProvider.setRows(data);

2. setSortStyles()함수에서는정렬옵션을설정하기위해GridBase.setSortOptions();함수를호출합니

다.

//그리드의 소트 옵션 설정 함수 function setSortStyles(style) { var options = {}; options.style = style; gridView.setSortingOptions(options); }

3. SortStyle을NONE과EXCLUSIVE로설정하기위해버튼클릭이벤트를작성합니다.

// SortStyle을 NONE으로 설정 $("#btnChangeSortStyleNone").on("click", function(){ setSortStyles(RealGridJS.SortStyle.NONE); })

// SortStyle을 EXCLUSIVE로 설정 $("#btnChangeSortStyleExclusive").on("click", function(){ setSortStyles(RealGridJS.SortStyle.EXCLUSIVE); })

A13소팅(sorting),데이터정렬하기-II다중컬럼정렬Jul14,2015

RealGridJS RealGrid dataprovider itemmodel sort sorting inclusive revers

들어가며지난[A12강좌]에서RealGrid의정렬에대한기본적인개념과컬럼클릭을통한단일컬럼정렬방법에대해배

웠습니다.이번강좌에서는다중컬럼정렬에대해배워보겠습니다.

이론다중컬럼정렬에대한옵션은INCLUSIVE와REVERS가있습니다.INCLUSIVE는먼저클릭한컬럼을우선

정렬하고REVERS는나중에클릭한컬럼을우선정렬합니다.INCLUSIVE와REVERS를아래그림을보면서조

금더설명하겠습니다.

INCLUSIVE

SortStyle을INCLUSIVE로설정한경우

먼저국어컬럼을클릭하고다음에수학컬럼을클릭해보겠습니다.그러면국어컬럼의정렬은고정된채수학컬럼

만다시정렬합니다.그림에서원안에숫자는정렬우선순위를의미합니다.

[그림13-1]

REVERS

SortStyle을REVERS로설정한경우

먼저국어컬럼클릭->수학컬럼클릭해보겠습니다.이번에는나중에클릭한수학컬럼으로우선정렬하고수학

컬럼의정렬순위가두번째로밀린것을확인할수있습니다.

[그림13-2]

REVERS는특별한경우가아니면사용할필요없습니다.

INCLUSIVE와REVERS,두가지옵션이있지만,사실둘중하나의옵션만을사용해도동일하게정렬된결과를

만들어낼수있습니다.

위의그림을예로들면,SortStyle을INCLUSIVE로놓고수학컬럼->국어컬럼의순서로클릭하면REVERS

로국어컬럼->수학컬럼의순서로클릭한결과와동일한결과를얻을수있습니다.

이내용은아래실습을통해직접테스트해보세요.

실습1. 그리드의정렬상태를초기화하기위해GridBase.orderBy();함수에빈배열값을넘겨주는

resetOrders()함수를만듭니다.

//정렬 순서를 초기화하는 함수 function resetOrders() { gridView.orderBy([], []); } //그리드의 소트 옵션 설정 함수 function setSortStyles(style) { var options = {}; options.style = style; gridView.setSortingOptions(options);

resetOrders(); }

2. SortStyle을INCLUSIVE와REVERSE로설정하기위해버튼클릭이벤트를작성합니다.

// SortStyle을 INCLUSIVE으로 설정 $("#btnChangeSortStyleInclusive").on("click", function(){ setSortStyles(RealGridJS.SortStyle.INCLUSIVE); })

// SortStyle을 REVERSE로 설정 $("#btnChangeSortStyleReverse").on("click", function(){ setSortStyles(RealGridJS.SortStyle.REVERSE); })

A14소팅(sorting),데이터정렬하기-IIIorderBy()함수사용하기Jul15,2015

RealGridJS RealGrid dataprovider itemmodel sort sorting orderby

들어가며지난[A12강좌],[A13강좌]에서는컬럼을클릭하여데이터를정렬하는방법에대해알아보았습니다.이번강좌

에서는GridBase.orderBy()함수를이용해정렬하는방법에대해배워보겠습니다.

이론orderBy함수의인자는FieldName의배열값과SortDirection의배열값입니다.FieldName와

SortDirection은짝이맞아야하며각각의짝에해당하는필드와방향으로정렬을실행합니다.정렬상태를완전

히초기화하기위해서는아래코드처럼FieldName배열과SortDirection배열,두인자에모두빈값을넘겨주면

됩니다.

//정렬 순서 초기화하기 gridView.orderBy([], []);

동시에여러컬럼을한번에정렬할필요가있는경우사용할수있습니다.

실습1. 그리드의정렬상태를초기화하기위해GridBase.orderBy();함수에빈배열값을넘겨주는

resetOrders()함수를만듭니다.

//정렬 순서를 초기화하는 함수 function resetOrders() { gridView.orderBy([], []); }

2. btnChangeOrdersINCLUSIVE와REVERSE로설정하기위해버튼클릭이벤트를작성합니다.

// SortStyle을 INCLUSIVE으로 설정 $("#btnChangeSortStyleInclusive").on("click", function(){ setSortStyles(RealGridJS.SortStyle.INCLUSIVE); })

// SortStyle을 REVERSE로 설정 $("#btnChangeSortStyleReverse").on("click", function(){ setSortStyles(RealGridJS.SortStyle.REVERSE); })

3. orderBy()함수를사용하여국어컬럼,수학컬럼을순방향정렬하는코드를작성합니다.

// 국어, 수학 컬럼을 순방향 정렬하기위해 orderBy() 함수 사용 $("#btnChangeOrders").on("click", function(){ gridView.orderBy(["field2", "field3"], ["ascending", "ascending"]); })

A15로우그룹핑(rowgrouping)-I드래깅(dragging)을이용하여그룹핑Jul15,2015

RealGridJS RealGrid dataprovider itemmodel group grouping groupby

들어가며[A15강좌],[A16강좌]에서는로우그룹핑(rowgrouping)에대해배워보겠습니다.

이강좌를연습하기전에RealGrid의컴포넌트를반드시이해해야합니다.링크로이동하여RealGrid컴포넌

트의영역과명칭을확인하세요.

이론RealGrid에서그룹핑이란정해진조건으로데이터를분류하여묶는것을의미합니다.그룹핑은로우그룹핑(row

grouping)과컬럼그룹핑(columngrouping)으로구분됩니다.

이번강좌와다음강좌에서배울로우그룹핑(rowgrouping)이란특정컬럼을기준으로그룹핑하는것을의미합

니다.즉,해당컬럼의데이터값이동일한행을묶는것을의미합니다.

[A11강좌]에서우리는ItemModel이가진아이템의종류(ItemType)에대해배웠습니다.로우그룹핑을할

때ItemModel에는,로우아이템(rowitem)과는별도로그룹아이템(groupitem)과푸터아이템(footer

item)이만들어집니다.

아래그림을보면ItemModel에그룹아이템과푸터아이템이어떤형태로존재하게되는지이해할수있습니다.

[A11강좌]에의하면그룹아이템과푸터아이템도ItemIndex를갖는별도의행으로그리드에표현됩니다.이두

아이템은각각그룹핑된아이템의헤더와푸터역할을하는아이템이며로우그룹헤더(rowgroupheader)는

그룹의제목(title)이나갯수(count)를표현할수있고,로우그룹푸터(rowgroupfooter)는컬럼의합계

(sum)나평균(avg)등그룹핑된데이터집합에대한계산된값을표현할수있는영역입니다.

[그림A15-1]

호기심 많은 분들을 위해 GridBase.getModelAs(itemIndex); 라는 함수를 소개해 드립니다.로우 그룹핑을 연습한 다음, 그리드에서 각각의 행이 어떤 ItemType인지 확인해 보세요.

<script>console.log(gridView.getModelAs(0));</script>

CONSOLE >Object $_child: 1 checked: false count: 4 dataRow: -1 expanded: true footerId: 14 id: 13 itemIndex: 0 parentId: NaN type: "group" __proto__: Object

로우그룹핑

위[그림A15-1]을보면Controller에그룹핑명령을내리는방법은 Dragging 방법과 groupBy(); 함수를

사용하는방법이있다는것을알수있습니다.이번강좌에서는패널(panel)영역으로컬럼헤더(column

header)를 Dragging 하여로우그룹핑하는방법에대해배워보고연습해보겠습니다.

중첩로우그룹핑

로우그룹핑은여러개의컬럼을동시에중첩하여그룹핑할수있습니다.그룹핑할컬럼을패널에드래깅하는순서대

로중첩그룹핑이적용됩니다.

로우그룹핑해제

로우그룹핑을해제하려면패널에있는컬럼헤더를패널영역밖으로드래깅하면됩니다.

로우그룹핑에의한소팅

로우그룹핑을실행하면그룹핑된컬럼을자동으로순방향(assending)으로정렬됩니다.중첩그룹핑시에도마찬

가지로상위컬럼의범위내에서하위컬럼이순방향으로정렬됩니다.

실습1. 우선그룹핑을연습하기위해데이터를조금더확장했습니다.직업과성별컬럼을추가하고몇개의데이터를

추가했습니다.

//다섯개의 필드를 가진 배열 객체를 생성합니다.var fields = [ { fieldName: "field1" }, { fieldName: "field2" }, {

{ fieldName: "field3" }, { fieldName: "field4" }, { fieldName: "field5" }];//DataProvider의 setFields함수로 필드를 입력합니다.dataProvider.setFields(fields);

//필드와 연결된 컬럼 배열 객체를 생성합니다.var columns = [ { name: "col1", fieldName: "field1", header : { text: "직업" }, width: 100 }, { name: "col2", fieldName: "field2", header : { text: "성별" }, width: 100 }, { name: "col3", fieldName: "field3", header : { text: "이름" }, width: 100 }, { name: "col4", fieldName: "field4", header : { text: "국어" }, width: 100 }, { name: "col5", fieldName: "field5", header : { text: "수학" }, width: 100 }];//컬럼을 GridView에 입력 합니다.

gridView.setColumns(columns);

var data = [ ["배우", "여자", "송윤아", "10", "33"], ["배우", "여자", "전도연", "20", "22"], ["가수", "여자", "이선희", "40", "33"], ["배우", "여자", "하지원", "10", "11"], ["가수", "여자", "소찬휘", "30", "55"], ["가수", "여자", "박정현", "40", "22"], ["배우", "여자", "전지현", "20", "44"]];dataProvider.setRows(data);

A16로우그룹핑(rowgrouping)-IIgroupBy()함수로그룹핑Jul15,2015

RealGridJS RealGrid dataprovider itemmodel group grouping groupby

들어가며[A15강좌]에서는로우그룹핑(rowgrouping)의개념과컬럼헤더를드래깅하여그룹핑하는방법에대해배워

보았습니다.이번강좌에서는[A15강좌]와동일한결과를GridView.groupBy()함수를이용해구현하는방법

을배워보겠습니다.

이론GridView.groupBy()함수는그룹핑할필드들을배열형식의인자로넘겨줍니다.인자로넘겨지는필드가여러개

인경우필드의순서에따라차례로중첩하여그룹핑됩니다.

groupBy()함수가호출될때마다기존의그룹핑정보는모두초기화된다는사실에주의해야합니다.

모든그룹상태를초기화하기위해서는 groupBy([]); 와같이빈배열값을인자로넘겨주면됩니다.

groupBy()함수를호출하여그룹핑하면기본적으로,인자로넘겨진필드로순방향정렬됩니다.아래실습에서각각

의버튼을클릭할때해당컬럼으로순방향정렬(sortbyascending)되는모습을확인하세요.

실습1. 실습을위한기본코드는[A15강좌]와동일합니다.

2. 버튼을클릭할때그룹상태를초기화하기위해아래코드를추가합니다.

// Reset Groups $("#btnResetGroups").on("click", function(){ gridView.groupBy([]); })

1. 버튼을클릭할때 직업 컬럼, 국어 컬럼, 직업, 국어 컬럼으로각각그룹핑하도록아래코드를추가합니다.

// 직업컬럼 단일그룹 $("#btnField1Group").on("click", function(){ gridView.groupBy(["field1"]); })

// 국어컬럼 단일그룹 $("#btnField4Group").on("click", function(){ gridView.groupBy(["field4"]); })

// 직업컬럼, 국어컬럼으로 중첩그룹 $("#btnMultiFieldsGroup").on("click", function(){ gridView.groupBy(["field1", "field4"]); })

A17행과열고정하기(Fixing)Jul27,2015

RealGridJS RealGrid dataprovider itemmodel fixedcolumn fixedrow fixed fixing 고정

들어가며이번강좌에서는그리드의행과열을고정하는방법을배워보겠습니다.행이나열이고정되면스크롤에서제외됩니

다.다시말해서,고정된행이나열은그리드의다른데이터들이스크롤될때에도왼쪽과위쪽에고정된채스크롤되

지않습니다.

이론행(Row)이나열(Column)을고정하기(Fixing)위해서GridBase.setFixedOptions()함수를이용합니다.이

함수의인자는FixedOptions라는클래스이며반환값은없습니다.setFixedOptions()함수가호출되는즉시

FixedOptions의속성값에따라그리드의고정상태가변경됩니다.

행고정

행을고정하기위해서는 rowCount 속성에고정할행의갯수를넘겨줍니다.고정된행은기본적으로소팅,그룹

핑,필터링에서제외됩니다.

열고정

열을고정하기위해서는 colCount 속성에고정할열의갯수를넘겨줍니다.고정된열은기본적으로,사용자가너

비를조정할수없습니다.

초기화

행고정,열고정값을초기화하려면각각 rowCount , colCount 의속성에 0 값을입력하면됩니다.

이외에도FixedOptions클래스에는여러가지속성이포함되어있습니다.FixedOptions에대한속성에대해서

는[B클래스]강좌에서좀더자세히다루도록하겠습니다.

실습1. 실습을위해필드와컬럼의갯수를늘렸으며,데이터도추가했습니다.

2. 버튼을클릭할때행,열고정상태를초기화하기위해아래코드를추가합니다.

// 행, 열 고정 상태 초기화 $("#btnResetFixing").on("click", function(){ gridView.setFixedOptions({ colCount: 0, rowCount: 0 }); })

1. 버튼을클릭할때각각행고정,열고정,행열고정하도록아래코드를추가합니다.

// 행 고정 $("#btnRowFixing").on("click", function(){ gridView.setFixedOptions({ rowCount: 1 }); })

// 열 고정 $("#btnColumnFixing").on("click", function(){ gridView.setFixedOptions({ colCount: 3 }); })

// 행 열 고정 $("#btnRowColumnFixing").on("click", function(){ gridView.setFixedOptions({ colCount: 3, rowCount: 1 }); })

A18컬럼필터링(Filtering)-I필터선택상자사용하기Jul29,2015

RealGridJS RealGrid 필터 필터링 filter filtering filterselector

들어가며[A18강좌]와[A19강좌]에서는필터링에대해배워보겠습니다.RealGrid는다양한방법으로필터링이가능하

지만[A클래스]에서는기본적인필터링방법에대해서만다루게됩니다.

이론RealGrid에서필터링(Filtering)이란특정컬럼의데이터중주어진조건에해당하는데이터가포함된행만을그리

드에표시하는기능을의미합니다.즉,컬럼단위로조건을주어데이터를필터링하는방식입니다.

아래그림과같이필터선택상자(Filterselector)또는필터링함수(GridBase.setColumnFilters())를통해

필터링명령이전달되면ItemModel에는필터링조건에맞는데이터만남아있게됩니다.

필터선택상자로필터링하기

필터선택상자는컬럼헤더에표시된필터아이콘을클릭할때표시되는선택상자입니다.필터선택상자에서선택(체크)

된데이터가그리드에표시됩니다.필터아이콘과필터선택상자를표시하려면해당컬럼을생성할때 filters 속성

을지정해주면됩니다.아래실습의코드를참조하세요.

setColumnFilters()로필터링하기

setColumnFilters(column, filters) 함수는필터링할데이터컬럼(DataColumn)정보와컬럼필터

(ColumnFilter)를인자로필터링하는함수입니다.자세한내용은[A19강좌]에서배워보겠습니다.

컬럼의필터정보지우기

필터가지정된컬럼에서필터정보를지우기위해서는GridBase.clearColumnFilters()함수를사용합니다.

실습1. 직업 컬럼에필터를지정하기위해컬럼생성배열에필터정보를추가합니다.//필드와연결된컬럼배열객체

를생성합니다.

//필드와 연결된 컬럼 배열 객체를 생성합니다. var columns = [ { name: "col1", fieldName: "field1", header : { text: "직업" }, width : 60, filters : [{ name: "가수", criteria: "value = '가수'" }, { name: "배우", criteria: "value = '배우'" }] }, { ...

1. 버튼을클릭할때 직업 컬럼에지정된필터정보를제거하기위해clearColumnFilters()함수는호출합니다.

// 필터링된 컬럼의 필터정보 지우기 $("#btnClearColumnFilters").on("click", function(){ gridView.clearColumnFilters("col1"); })

A19컬럼필터링(Filtering)-IIsetColumnFilters()함수사용하기Jul30,2015

RealGridJS RealGrid 필터 필터링 filter filtering setColumnFilters

들어가며이번강좌에서는지난[A18강좌]에이어GridBase.setColumnFilters()함수를이용해필터링하는방법에대

해배워보겠습니다.

이론기본적인필터링함수인GridBase.setColumnFilters()는데이터컬럼(DataColumn)과컬럼필터

(ColumnFilter)를인자로합니다.첫번째인자인데이터컬럼은필터링할컬럼을지시합니다.두번째인자인컬

럼필터는필터선택상자에표시될필터정보를지시합니다.

setColumnFilters()함수의첫번째인자인데이터컬럼에는DataColumn객체를넘겨도되지만단순히컬럼이

름(ColumnName)만string형으로넘겨주어도됩니다.아래코드는데이터컬럼에컬럼이름만넘기는경우와데

이터컬럼객체를넘기는두가지경우의코드를보여주고있습니다.두경우모두동일한동작을하게됩니다.

//컬럼 이름만 넘기는 경우gridView.setColumnFilters("col1", filters)

//데이터컬럼 객체를 넘기는 경우var dataColumn = {"name" : "col1"}gridView.setColumnFilters(dataColumn, filters);

컬럼필터(ColumnFilter)객체에는 name , criteria , text , description , active 라는속성이있지

만이번강좌에서는 name , criteria , text 속성만알아보겠습니다.

name 속성은필터를구분하기위한이름입니다.

criteria 속성은필터의조건을입력하기위한Expression속성입니다.

text 속성은필터선택창에표시될문자열입니다.입력하지않으면 name 속성이표시됩니다.

실습1. 버튼을클릭하면 직업 컬럼에필터를지정하기위해filters라는ColumnFilter객체를만들고필터정보를

입력합니다.

2. setColumnFilters()함수로직업컬럼에필터를적용하기위해“col1”이라는직업컬럼필터의이름을첫번

째인자로넘겨줍니다.

3. ColumnFilter객체인filters를두번째인자로넘겨줍니다.

// setColumnFilters()함수로 직업컬럼에 필터 적용 $("#btnSetColumnFilters").on("click", function(){ var filters = [{ name: "가수", criteria: "value = '가수'", text: "가수만 걸러주세요." }, { name: "배우", criteria: "value = '배우'" }];

gridView.setColumnFilters("col1", filters); })

1. 버튼을클릭할때 직업 컬럼에지정된필터정보를제거하기위해clearColumnFilters()함수는호출합니다.

// 필터링된 컬럼의 필터정보 지우기 $("#btnClearColumnFilters").on("click", function(){ gridView.clearColumnFilters("col1"); })

A20셀선택하기(Selecting)-SelectOptionsJul31,2015

RealGridJS RealGrid 선택 selection selecting 선택블럭 선택영역 selectoptions selectstyle

setselectoptions

들어가며[A20강좌],[A21강좌],[A22강좌]에서는RealGrid의셀선택기능에대해배워보겠습니다.

이론셀선택기능이란사용자가마우스또는트랙패드를이용하여그리드의특정셀을선택하거나셀의범위를선택하는

기능을말합니다.

셀선택에는6가지SelectionStyle이있으며이클래스는SelectOptions에style속성의값으로설정할수있

습니다.

각각의선택스타일을간단한설명과함께캡쳐된화면을나열해보겠습니다.

1.BLOCK

하나의셀또는블럭형태로셀범위를선택할수있습니다.이설정은그리드생성시기본값이므로따로설정할필

요가없습니다.

2.ROWS

한줄의행또는여러줄의행을셀범위로선택할수있습니다.

3.COLUMNS

하나의컬럼또는여러개의컬럼을셀범위로선택할수있습니다.

4.SINGLE_ROW

한줄의행만을선택할수있습니다.

5.SINGLE_COLUMN

하나의컬럼만을선택할수있습니다.

6.NONE

셀을선택할수없습니다.

SelectionStyle을설정하려면GridBase.setSelectOptions(options)함수를사용합니다.함수의인자로

SelectOptions객체를넘겨줍니다.

실습1. 버튼을클릭하면SelectionStyle을설정하기위해setSelectOptions()함수를호출합니다.

SelectionStyle종류에따라각각의버튼이벤트함수를작성합니다.

// SelectionStyle을 BLOCK으로 지정하는 버튼 클릭$("#btnSetSelectOptionsBlock").on("click", function(){ gridView.setSelectOptions({"style" : "block"});})

// SelectionStyle을 ROWS로 지정하는 버튼 클릭$("#btnSetSelectOptionsRows").on("click", function(){ gridView.setSelectOptions({"style" : "rows"});})

// SelectionStyle을 COLUMNS로 지정하는 버튼 클릭$("#btnSetSelectOptionsColumns").on("click", function(){ gridView.setSelectOptions({"style" : "columns"});})

// SelectionStyle을 SINGLE_ROW로 지정하는 버튼 클릭$("#btnSetSelectOptionsSingleRow").on("click", function(){ //SeleectOptions객체를 만들어 인자로 넘겨도 결과는 같습니다. var selectOptions = {"style" : "singleRow"}; gridView.setSelectOptions(selectOptions);})

// SelectionStyle을 SINGLE_COLUMN으로 지정하는 버튼 클릭$("#btnSetSelectOptionsSingleColumn").on("click", function(){ gridView.setSelectOptions({"style" : "singleColumn"});})

// SelectionStyle을 NONE으로 지정하는 버튼 클릭$("#btnSetSelectOptionsNone").on("click", function(){ gridView.setSelectOptions({"style" : "none"});})

A21셀선택하기(Selecting)-선택한셀의값가져오기Aug5,2015

RealGridJS RealGrid 선택 selection selecting 선택블럭 선택영역 selectoptions selectstyle

setselectoptions getSelectionData

들어가며[A20강좌]에서는RealGrid에서셀을선택하는방법에대해알아보았습니다.이번강좌에서는선택한범위에해

당하는셀의값을가져오는방법에대해배워보겠습니다.

이론선택된범위에대한셀의값을가져오려면GridBase.getSelectionData()함수를사용하면됩니다.이함수는

아래와같이정의되어있으며 maxRows 인자는함수에서반환할행의수를입력합니다.

getSelectionData(maxRows);

실습1. 드롭다운메뉴를선택하면SelectionOptions의SelectionStyle을변경하도록작성합니다.Bootstrap

의dropdown-menu는<a>태그를사용하기때문에버튼과마찬가지로click()이벤트에서처리하도록작

성합니다.

// SelectionStyle을 BLOCK으로 지정하는 버튼 클릭 $("#btnSetSelectOptionsBlock").on("click", function(){ gridView.setSelectOptions({"style" : "block"}); })

// SelectionStyle을 ROWS로 지정하는 버튼 클릭 $("#btnSetSelectOptionsRows").on("click", function(){ gridView.setSelectOptions({"style" : "rows"}); })

// SelectionStyle을 COLUMNS로 지정하는 버튼 클릭 $("#btnSetSelectOptionsColumns").on("click", function(){ gridView.setSelectOptions({"style" : "columns"}); })

// SelectionStyle을 SINGLE_ROW로 지정하는 버튼 클릭 $("#btnSetSelectOptionsSingleRow").on("click", function(){ //SeleectOptions객체를 만들어 인자로 넘겨도 결과는 같습니다. var selectOptions = {"style" : "singleRow"}; gridView.setSelectOptions(selectOptions); })

// SelectionStyle을 SINGLE_COLUMN으로 지정하는 버튼 클릭 $("#btnSetSelectOptionsSingleColumn").on("click", function(){ gridView.setSelectOptions({"style" : "singleColumn"}); })

// SelectionStyle을 NONE으로 지정하는 버튼 클릭 $("#btnSetSelectOptionsNone").on("click", function(){ gridView.setSelectOptions({"style" : "none"}); })

2. 두개의버튼을클릭할때getSelectionData()함수를사용하여각각선택된범위의데이터를가져오는코

드와선택된범위중2개행의데이터만거져오는코드를작성합니다.

// 선택된 범위의 모든 행에 대한 데이터를 가져옵니다. $("#btnGetSelectionData").on("click", function(){ var selData = gridView.getSelectionData(); selData = JSON.stringify(selData); $("#allRowSelectionData").text(selData); })

// 선택된 범위중 2개행에 대한 데이터만 가져옵니다. $("#btnGet2RowSelectionData").on("click", function(){ var selData = gridView.getSelectionData(2); selData = JSON.stringify(selData); $("#twoRowSelectionData").text(selData); })

A22셀선택하기(Selecting)-동적으로셀선택하기Aug7,2015

RealGridJS RealGrid 선택 selection selecting 선택블럭 선택영역 selectionitem selectstyle

setSelection getSelection clearSelection

들어가며[A20강좌]와[A21강좌]에서는사용자가마우스를이용해서선택영역을지정하는방법및스타일과선택영역의

데이터를가져오는방법에대해알아보았습니다.이번강좌에서는동적(프로그램적)으로그리드의특정영역을선택

하는방법에대해배워보겠습니다.

이론RealGrid에는그리드의선택영역정보를가진SelectionItem이란클래스가있습니다.SelectionItem은선택

영역의시작점과끝점의정보를포함하고있으며선택의종류를구분하기위한SelectionStyle정보도포함합니다.

선택영역정보(SelectionItem)을그리드에적용하거나가져오기위해다음과같은함수가준비되어있습니다.

1. 선택영역을가져오는함수:GridBase.getSelection();

2. 선택영역을적용하는함수:GridBase.setSelection();

3. 선택영역을지우는함수:GridBase.clearSelection();

SelectionItem에는영역을선택하는방법에따라 style 속성을지정해주면됩니다. style 속성에는

“bolck”,“rows”,“columns”의값을입력하고각각의스타일에따라다음과같은범위지정속성에값을입력합

니다.

style:“block”인경우startItem,endItem또는startRow,endRow와startColumn,

endColumn

style:“rows”인경우startItem,endItem또는startRow,endRow

style:“columns”인경우startColumn,endColumn

실습1. 버튼을클릭하면Selectionstyle에따라블럭,행,컬럼을선택하도록setSelection()함수를호출하는코

드를작성합니다.

// 블럭단위 선택영역 지정하기 $("#btnSetBlockSelection").on("click", function(){ var selection = { style: "block", startItem: 2, endItem: 4, startColumn: "col3", endColumn: "col5" } gridView.setSelection(selection); })

// 행단위 선택영역 지정하기 $("#btnSetRowSelection").on("click", function(){ var selection = { style: "rows", startRow: 3, endRow: 5 } gridView.setSelection(selection); })

// 컬럼단위 선택영역 지정하기 $("#btnSetColumnSelection").on("click", function(){ var selection = { style: "columns", startColumn: "col4", endColumn: "col6" } gridView.setSelection(selection); })

2. 버튼을클릭하면선택영역정보(SelectionItem)를가져오기위해getSelection()함수를호출하는코드를

작성합니다.

// SelectionItem 가져오기 $("#btnGetSelection").on("click", function(){ var selection = gridView.getSelection(); alert(JSON.stringify(selection)); })

3. 버튼을클릭하면선택영역을제거하기위해clearSelection()함수를호출하는코드를작성합니다.

// 선택영역 모두 지우기 $("#btnClearSelection").on("click", function(){ gridView.clearSelection(); })

A23데이터편집하기(Editing)Aug10,2015

RealGridJS RealGrid 편집 RowState created updated deleted commit createanddeleted

들어가며이번강좌에서는RealGrid의강력한편집기능에대해알아보겠습니다.편집기능을하나의강좌에서다루기에는너

무많은내용이지만요약하여기본적인내용만배워보도록하겠습니다.

이론RealGrid에서편집은Data와Item으로구분해서생각해볼필요가있습니다.Data와Item에대한기본적인

이해는[A11강좌]에서배울수있습니다.

편집상태

RealGrid는그리드에서직접키보드등입력장치를통해데이터를편집할수있습니다.데이터가표시된그리드의

셀(Cell)위에서문자나숫자키를입력하면그리드는즉시편집모드로들어갑니다.이때해당행의상태는편집상태

(Editing)가되며인디케이터(Indicator)에는편집상태를알리는아이콘이표시됩니다.일반적으로편집상태는

아래화면과같습니다.

Commit

행이편집상태일때셀(Cell)의값은Data의값이아닌Item의값입니다.Item의값은Data에즉시전달되지

않고Commit이라는명령에의해DataProvider에반영하게됩니다.아래그림은변경된Item의값이

Commit명령에의해Data에반영되는과정을표현한것입니다.

Commit명령은GridBase.Commit()함수로실행되거나행이변경될때자동으로실행됩니다.

행의상태(RowState)

그리드에서편집에해당하는기능은일반적으로추가,수정,삭제가있습니다.RealGrid는기능에따라행의상태

(RowState)가달라지고행의상태는상태바(StateBar)에아이콘으로표시됩니다.

아래표에는기능별상태와상태바의아이콘이어떻게달라지는지그차이를나타내고있습니다.

기능 키보드동작 API 상태(RowState) 상태바아이콘

조회 none

행삽입(Insert) INSERT beginInsertRow() created

행추가

(Append)마지막행에서 ↓ beginAppendRow() created

행수정(Update) F2 또는값변경 beginUpdateRow() updated

행삭제(Delete) CTRL + DELETE deleteSelection() deleted

행삽입또는추가

후삭제

INSERT 후

CTRL + DELETE createAndDeleted

위API는모두GridView클래스의메서드입니다.

상태바(StatusBar)가어디를나타내는지는데모사이트Component페이지에서확인하세요.

행삽입(Insert)은현재선택된행의바로위에새로운행이추가됩니다.

행추가(Append)는맨마지막행의바로아래에새로운행이추가됩니다.

실습을통해각기능의작동방법과기능에따라상태가어떻게달라지는지확인해보겠습니다.

실습1. 행의추가,삽입,삭제가가능하도록EditOptions의insertable속성과appendable,deletable속성을

true로수정합니다.

//행 삽입과 행 추가, 행 삭제가 가능하도록 옵션 조정 gridView.setEditOptions({ insertable: true, appendable: true, deletable: true })

2. 버튼클릭시행삽입,행추가,행삭제기능을수행하는코드작성

// 현재행 위해 새로운 행 추가위해 beginInserRow()함수 실행 $("#btnInsert").click( function() { var current = gridView.getCurrent(); gridView.beginInsertRow(current.itemIndex); })

// 맨 마지막 행 추가위해 beginAppendRow()함수 실행 $("#btnAppend").click(function() { gridView.beginAppendRow(); })

// 선택된 행 삭제를 위해 deleteSelection()함수 실행 $("#btnDelete").click(function() { gridView.deleteSelection(); })

3. 버튼을클릭하면현재그리드의상태별RowId정보를가져와서alert하는코드작성

$("#btnGetStateRows").click(function() { var rowStates = { "created": dataProvider.getStateRows("created"), "updated": dataProvider.getStateRows("updated"), "deleted": dataProvider.getStateRows("deleted"), "createAndDeleted": dataProvider.getStateRows("createAndDeleted"), "none": dataProvider.getStateRows("none") }; alert(JSON.stringify(rowStates)); })

A24데이터불러오기(DataLoading)Aug11,2015

RealGridJS RealGrid 편집 RowState created updated deleted commit createanddeleted

들어가며이번강좌에서는DataProvider를통해RealGridJS에데이터를읽어오는방법에대해배워보겠습니다.

이론읽어올데이터의원본은원격에존재할수도있고로컬에존재할수도있습니다.이번강좌에서는원격에존재하는

데이터를읽어오기위해jQuery의ajax()를사용합니다.로컬에존재하는데이터도원본데이터셋의유형과방법

은본강좌의내용과동일하기때문에별도로설명하지는않겠습니다.

RealGrid가읽어올수있는원본데이터의유형은JSON,XML,CSV세가지입니다.세가지유형의데이터를

읽어오기위해각각LocalDataProvider함수를사용할수있으며그종류는다음과같습니다.

JSON:LocalDataProvider.fillJsonData()

XML:LocalDataProvider.fillXmlData()

CSV:LocalDataProvider.fillCsvData()

세함수는모두두개의인자를가지고있습니다.첫번째인자는data이고두번째인자는DataFillOptions라는

옵션입니다.이옵션에는fillMode라는이름의속성이있는데이속성은DataFillMode라는옵션입니다.

DataFillOption은데이터의갯수데이터를채우기시작할행의itemIndex등의정보를담고있으며,

DataFillMode는행을추가(Append)할것인지삽입(Insert)할것인지아니면수정(Update)할것인지등의

정보를결정합니다.

첫번째인자인data는유형에따라일반적으로다음과같은형식을유지해야합니다.단,형식이다른경우옵션으

로조정할수있는방법도있습니다.보다자세한내용은B-Class에서다룰예정입니다.

JSONDataFormat

[ ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"], ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"], ["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"], ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"], ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]]

XMLDataFormat

<rows> <row field1="배우" field2="여자" field3="전도연" field4="20" field5="22" field6="90" field7=</rows>

CSVDataFormat

가수, 여자, 정수라, 80, 99, 90, 90, 100, 100, 90배우, 여자, 송윤아, 10, 33, 90, 70, 60, 100, 80배우, 여자, 송윤아, 10, 33, 90, 70, 60, 100, 80

실습에서는유형에따른원격데이터를그리드에입력하는방법을직접구현해보겠습니다.

실습1. JSON,XML,CSV각유형의버튼을클릭하면각유형에맞는fillData함수를호출하여그리드에데이터를

채우는코드를작성합니다.이때,원격의데이터를가져오기위해jQuery의ajax()함수를써서GET

Method를이용해데이터를가져옵니다.

//현재그리드의 데이터를 모두 지우고 8행의 CSV유형 데이터를 가져와서 채웁니다. $("#btnFillCSVData").click(function() { $.ajax({ url: "/data/samples/sampleCSVData.csv", cache: false }) .done(function( data ) { dataProvider.fillCsvData(data, { count: 8, fillMode: "set" }); }); })

//현재 그리드의 데이터 맨 마지막행 뒤에 5행의 JSON유형 데이터를 가져와서 채웁니다. $("#btnFillJSONData").click(function() { $.ajax({ url: "/data/samples/sampleJSONData.json", cache: false }) .done(function( data ) { dataProvider.fillJsonData(data, { fillMode: "append" }); }); })

//현재 그리드의 데이터중 3행의 데이터를 가져온 XML 데이터로 덮어쓰기 합니다. $("#btnFillXMLData").click(function() { $.ajax({ url: "/data/samples/sampleXMLData.xml", cache: false }) .done(function( data ) { dataProvider.fillXmlData(data, { count: 1, fillPos: 2, fillMode: "update" }); }); })

A25에디터(Editor)와셀의값Aug12,2015

RealGridJS RealGrid 편집기 editor datatype 자료형 subdatatype datetime number date

dropdown combo

들어가며이번강좌에서는RealGrid의자료형(DataType)과편집기(Editor)의종류에대해배워보겠습니다.추가로그리

드의데이터를가져오거나넣는방법에대해기본적인내용만알아보겠습니다.

이론자료형(DataType)

자료형(DataType)은DataProvider에서데이터를구성하는DataField의유형을지정하며아래와같은종류

가있습니다.

TEXT:문자형

BOOL:논리형

NUMBER:숫자형

DATETIME:날짜형

기본자료형을제한하기위한용도로하위자료형(SubDataType)이있으며아래와같은종류가있습니다.

CHAR

UNUM

INT

UINT

DATE

편집기(Editor)

편집기(Editor)는사용자가셀의값을수정할수있도록그리드에서제공되는컨트롤이며아래와같은종류가있습

니다.

TextEditor-한줄텍스트편집기

MultiLineEditor-여러줄텍스트편집기

DropDownEditor-드롭다운선택편집기

NumberEditor-숫자편집기

DateEditor-날짜편집기

SearchEditor-부분검색용편집기

그리드의값을가져오거나넣기위해사용할수있는함수

Methods GridBase GridView DataProvider LocalDataProvider

GET getValue() getValue()

GETs getValues()getDistinctValues()

getValues()getFieldValues()

SET setValue() setValue()

SETs setValues()

Methods GridBase GridView DataProvider LocalDataProvider

셀의값의가져오거나넣는함수는 itemIndex 를인자로사용하여행정보를가져오는함수와 RowId 를인자로

행정보를가져오는함수로나누어지는데,당연하게도GridBase와GridView는 itemIndex 를인자로사용하

고DataProvider와LocalDataProvider는 RowId 를행정보를가져오기위한인자로사용합니다.

이두Index의차이는실제업무화면구현시항상혼란을가져오는요소중하나입니다.값을가져오거나넣기위해

GridView를사용하는지DataProvider를사용하는지만명확히구분한다면실수를막을수있습니다.주의하여

사용해야합니다.

실습1. 자료형을날짜또는숫자로지정하기위해필드의dataType속성을 number 또는 dateTime 으로작성합

니다.

... { fieldName: "field4", dataType: "datetime" }, { fieldName: "field5", dataType: "number" }, ...

2. 성별 컬럼의편집기를선택상자로하기위해아래와같이컬럼의editor속성에type을 dropDown 으로작성

하고 values , labels 등속성에값을입력합니다.

... , { name: "col2", fieldName: "field2", header : { text: "성별" }, editor : { type: "dropDown", dropDownCount: 2, values: ["남자", "여자"], labels: ["남", "여"] }, width: 50 }, ...

3. 생일 컬럼의편집기를날짜선택상자로하기위해아래와같이컬럼의editor속성에type을 date 으로작성

하고 datetimeFormat 속성에값을입력합니다.

... , { name: "col4", fieldName: "field4", header : { text: "생일" }, editor: { type: "date", datetimeFormat: "yyyy-MM-dd" }, width: 90 }, ...

4. 수학 컬럼의편집기를숫자입력편집기로하기위해아래와같이컬럼의editor속성에type을 number 으로

작성하고 styles 속성에오른쪽정렬을위한 textAlignment 값을입력합니다.

... , { name: "col5", fieldName: "field5", header : { text: "수학" }, editor : { type: "number" }, styles: { textAlignment: "far" }, width: 80 }, ...

5. 버튼을클릭하면itemIndex3,fieldIndex2인셀의값을가져오기위해GridBase의getValue()함수

를호출하도록코드를작성합니다.

//itemIndex 3, fieldIndex 2인 셀의 값 가져오기 $("#btnGetValue").click(function(){ var value = gridView.getValue(3, 2); alert(value); })

6. 버튼을클릭하면RowId3,fieldIndex2인셀의값을‘태연’으로변경하기위해LocalDataProvider의

setValue()함수를호출하도록코드를작성합니다.

//RowId 3, fieldIndex 2인 셀에 '태연' 값을 넣기 $("#btnSetValue").click(function(){ dataProvider.setValue(3, 2, '태연'); })

A26이벤트이해하기(Events)Aug17,2015

RealGridJS RealGrid 이벤트 event

들어가며이번강좌에서는이벤트에대한기본적인이해를돕기위한예제를실습해보겠습니다.

이론RealGrid는각각의객체가가지고있는많은이벤트가있습니다.이벤트는사용자가그리드를클릭하거나값을입

력하는등동작을수행할때그리드가호출해주는콜백함수입니다.

이번강좌에서는GridView객체의영역을클릭(Click)또는더블클릭(DoubleClick)할때발생하는이벤트콜

백함수를구현하고클릭된인자의정보를팝업하는예제를구현해보겠습니다.

실습1. GridView의영역별클릭또는더블클릭이벤트콜백함수를구현합니다.

//log를 alert하는 함수 function showLog(log){ alert(log); }

gridView.onColumnHeaderClicked = function (grid, column) { showLog("onColumnHeaderClicked: " + "(" + column.name + ")"); }; gridView.onColumnHeaderDblClicked = function (grid, column) { showLog("onColumnHeaderDblClicked: " + "(" + column.name + ")"); }; gridView.onColumnCheckedChanged = function (grid, column, checked) { showLog("onColumnCheckedChanged: " + "(" + column.name + ", " + checked + ")"); }; gridView.onDataCellClicked = function (grid, index) { showLog("onDataCellClicked: " + JSON.stringify(index)); }; gridView.onDataCellDblClicked = function (grid, index) { showLog("onDataCellDblClicked: " + JSON.stringify(index)); }; gridView.onFooterCellClicked = function (grid, column) { showLog("onFooterCellClicked : " + "(" + column.name + ")"); }; gridView.onFooterCellDblClicked = function (grid, column) { showLog("onFooterCellDblClicked : " + "(" + column.name + ")"); }; gridView.onItemChecked = function (grid, itemIndex, checked) { showLog("onItemChecked: " + itemIndex + ", " + checked); }; gridView.onItemsChecked = function (grid, items, checked) { showLog("onItemsChecked: " + items + ", " + checked);

showLog("onItemsChecked: " + items + ", " + checked); }; gridView.onItemAllChecked = function (grid, checked) { showLog("onItemAllChecked: " + checked); }; gridView.onCheckBarFootClicked = function (grid) { showLog("onCheckBarFootClicked"); }; gridView.onIndicatorCellClicked = function (grid, index) { showLog("onIndicatorCellClicked : " + "(" + index + ")"); }; gridView.onStateBarCellClicked = function (grid, index) { showLog("onStateBarCellClicked : " + "(" + index + ")"); }; gridView.onRowGroupHeadFootClicked = function (grid, index) { showLog("onRowGroupHeadFootClicked : " + "(" + index + ")"); }; gridView.onRowGroupHeaderFooterClicked = function (grid, index) { showLog("onRowGroupHeaderFooterClicked : " + "(" + index + ")"); }; gridView.onRowGroupBarClicked = function (grid, index) { showLog("onRowGroupBarClicked : " + "(" + index + ")"); }; gridView.onCheckBarFootDblClicked = function (grid) { showLog("onCheckBarFootDblClicked"); }; gridView.onIndicatorCellDblClicked = function (grid, index) { showLog("onIndicatorCellDblClicked : " + "(" + index + ")"); }; gridView.onStateBarCellDblClicked = function (grid, index) { showLog("onStateBarCellDblClicked : " + "(" + index + ")"); }; gridView.onRowGroupHeadFootDblClicked = function (grid, index) { showLog("onRowGroupHeadFootDblClicked : " + "(" + index + ")"); }; gridView.onRowGroupHeaderFooterDblClicked = function (grid, index) { showLog("onRowGroupHeaderFooterDblClicked : " + "(" + index + ")"); }; gridView.onRowGroupBarDblClicked = function (grid, index) { showLog("onRowGroupBarDblClicked : " + "(" + index + ")"); }; gridView.onPanelClicked = function (grid, index) { showLog("onPanelClicked : " + "(" + index + ")"); }; gridView.onPanelDblClicked = function (grid, index) { showLog("onPanelDblClicked : " + "(" + index + ")"); }; gridView.onRowGroupPanelClicked = function (grid, column) { showLog("onRowGroupPanelClicked : " + "(" + column.name + ")"); }; gridView.onRowGroupPanelDblClicked = function (grid, column) { showLog("onRowGroupPanelDblClicked : " + "(" + column.name + ")"); };

A27옵션(Options)의종류와설정방법Aug20,2015

RealGridJS RealGrid 옵션 option

들어가며이번강좌에서는RealGrid가가지고있는옵션에는어떤것들이있으며기본적인옵션설정방법에대해배워보겠

습니다.

이론RealGrid에는많은종류의옵션이있기때문에요구사항에맞게다양한옵션을선택하여그리드의설정을변경할

수있습니다.

옵션의종류

1. GridBase

GridOptions:그리드기본옵션

getOptions()

setOptions()

CopyOptions:셀의값을클립보드로복사하는기능관련옵션

getCopyOptions()

setCopyOptions()

DisplayOptions:그리드UI관련옵션

getDisplayOptions()

setDisplayOptions()

EditOptions:편집기능관련옵션

getEditOptions()

setEditOptions()

FilteringOptions:필터링기능관련옵션

FilterSelectorOptions:필터의선택상자관련옵션

ToastOptions:정렬/필터링/그룹핑시토스트메시지옵션

getFilteringOptions()

setFilteringOptions()

FixedOptions:행,열고정기능관련옵션

getFixedOptions()

setFixedOptions()

GroupingOptions:행그룹핑기능관련옵션

ToastOptions

getGroupingOptions()

setGroupingOptions()

PasteOptions:클립보드의값을셀에붙여넣기기능관련옵션

getPasteOptions()

setPasteOptions()

SelectOptions:셀선택기능관련옵션

getSelectOptions()

setSelectOptions()

SortingOptions:정렬기능관련옵션

ToastOptions

getSortingOptions()

setSortingOptions()

2. TreeView

TreeOptions:트리기본옵션

getTreeOptions()

setTreeOptions()

3. DataProvider

DataProviderOptions:DataProvider기본옵션

getOptions()

setOptions()

4. Component

Panel

getPanel()

setPanel()

Header

getHeader()

setHeader()

Indicator

getIndicator()

setIndicator()

StateBar

getStateBar()

setStateBar()

CheckBar

getCheckBar()

setCheckBar()

Footer

getFooter()

setFooter()

5. 함수의인자로사용되는옵션

DataFillOptions(RealGridJSonly)

fillCsvData()

fillJsonData()

fillXmlData()

DataLoadOptions(RealGrid+only)

loadData()

GridExportOptions

exportGrid()

RowGroupOptions

setRowGroup()

SearchOptions

searchCell()(RealGridJSonly)

searchItem()

실습1. 보이기,감추기버튼을누를때panel,indicator,checkbar를보이거나감추도록옵션설정코드를작성합

니다.

// panel, indicator, checkbar 감추기 $("#btnSetHide").on("click", function(){ gridView.setPanel({ visible: false });

gridView.setIndicator({ visible: false });

gridView.setCheckBar({ visible: false }); })

// panel, indicator, checkbar 보이기 $("#btnSetShow").on("click", function(){ gridView.setPanel({ visible: true });

gridView.setIndicator({ visible: true });

gridView.setCheckBar({ visible: true }); })

Home

Demo

Mail

Github

Help

RSS