들어가며

[c1 강좌] 강좌에서는 다이어로그에서 입력한 하나의 Row를 그리드에 추가하는 방법을 배웠습니다. 이번 강좌에서는 다이얼로그 상의 그리드에서 check로 선택한 행을 메인화면의 그리드에 일괄적으로 추가하는 방법을 배우도록 하겠겠습니다.

이론

별도의 다이얼로그위에 그리드를 생성하여 체크된 데이터를 메인 그리드의 Provider에 일괄적으로 추가하는 방법을 사용합니다.

먼저 메인화면과 팝업화면에 각각 그리드를 생성합니다. 팝업화면의 그리드에는 미리 선택할 데이터를 표시해 놔야 합니다. 데이터를 가져오는 방법은 여러가지가 있는데 여기에선 setRows 함수를 사용하여 메모리상에 이미 존재하는 Object배열을 Provider에 채웁니다.

check된 행을 가져오는 것은 getCheckedRows 함수를 사용합니다. 이 함수에서 반환되는 값은 체크된 행들에 대한 RowId의 배열입니다.

이 배열을 loop를 통해 각각의 실제 Object로 가져오는 것은 getJsonRow 함수를 사용합니다. 이 강좌에서는 메인 그리드와 다이얼로그 그리드의 필드구조가 동일하므로 getJsonRow함수에서 반환된 객체를 바로 배열에 담았지만, 필드구조가 다른 경우는 반환값을 변수로 저장후 Object값을 가공하여 담으면 되겠습니다.

가져온 Object들을 Array에 담아 addRows 함수를 사용하여 Provider에 추가합니다.

예제에서 다이얼로그는 편의를 위해 bootstrap dialog를 사용하였습니다, 다른 UI 라이브러리나 별도의 페이지를 다이얼로그로 구현하셔도 됩니다. 다만 bootstrap dialog는 한페이지내에 존재하는 영역이므로 전역변수를 사용하였지만, 별도의 페이지로 구성시 window.opener.gridView와 같은 접근이 필요합니다.

실습

  1. 그리드 관련 공통 함수 선언하기

     function setFields(provider) {
     provider.setFields([{
         fieldName: "name"
     }, {
         fieldName: "company"
     }, {
         fieldName: "email"
     }]);
 }

 function setColumns(grid) {
     grid.setColumns([{
         fieldName: "name",
         name: "name",
         width: 70,
         styles: {
             textAlignment: "center"
         },
         header: {text: "이름"}
     }, {
          fieldName: "company",
         name: "company",
         width: 150,
         styles: {
             textAlignment: "center"
         },
         header: {text: "회사"}
     }, {
        fieldName: "email",
         name: "email",
         width: 200,
         header: {text: "e-mail"}
     }]);
 }

 function setOptions(grid) {
     grid.setEditOptions({
         insertable: false,
         appendable: false
     });
 }

  2. 두개의 그리드 생성하기

    메인 그리드

     dataProvider = new RealGridJS.LocalDataProvider();
 setFields(dataProvider);

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

    다이얼로그 상의 그리드

     dataProviderPopup = new RealGridJS.LocalDataProvider();
 setFields(dataProviderPopup);

 gridViewPopup = new RealGridJS.GridView("realgridPopup");
 gridViewPopup.setDataSource(dataProviderPopup);   
 setColumns(gridViewPopup);
 setOptions(gridViewPopup);

  3. 다이얼로그의 그리드에 데이터 채우기

     var data = [{
     name: "홍길동",
     company: "(주)율도",
     email: "gdhong@yuldo.com"
 }, {
     name: "동방삭",
     company: "사단법인 삼천갑자",
     email: "dongbangsac@3000.com"
 }, {
     name: "일지매",
     company: "의적협회",
     email: "apricot@heros.org"
 }, {
     name: "각시탈",
     company: null,
     email: "bridal-mask@korea.com"
 }];
 dataProviderPopup.setRows(data);

  4. 다이얼로그의 그리드 사이즈 재설정

    다이얼로그가 bootstrap과 같이 동적으로 표시되는 경우 다이얼로그 표시가 완료된 후 그리드의 크기를 재설정해야 합니다.

     $('#addRowDialog').on('shown.bs.modal', function() {
     gridViewPopup.resetSize();
 });

  5. 체크된 행을 메인 그리드에 추가하기

     var newRows = [];
 var checkedRows = gridViewPopup.getCheckedRows();
 for (var r in checkedRows) {
     newRows.push(dataProviderPopup.getJsonRow(checkedRows[r]));
 }
 dataProvider.addRows(newRows);

실행화면