C1 RealGridJS 별도 다이얼로그를 이용한 하나의 행 추가

들어가며

이번 강좌에서는 다이얼로그를 통해 입력한 값을 그리드에 개별 행으로 추가하는 방법을 배워보겠습니다.

이론

별도의 다이얼로그에서 입력한 값을 Object로 구성하여 그리드의 Provider에 추가하는 방법을 사용합니다. 행을 추가하는 것은 addRow 함수를 사용합니다.

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

실습

Provider의 이름, 회사, 이메일 정보를 가질 필드 생성하기

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

그리드의 이름, 회사, 이메일 컬럼 생성하기

 gridView.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"}
     }]);

그리드에서 직접적인 추가,삽입을 하지 못하도록 EditOptions를 설정하기

 gridView.setOptions({
     edit: { 
         insertable: false,
         appendable: false
     }
 });

또는

 gridView.setEditOptions({
     insertable: false,
     appendable: false
 });

팝업창에서 입력된 값을 Object로 구성하기

 var newRow = {
     name: $("#dialog_txtName").val(),
     company: $("#dialog_txtCompany").val(),
     email: $("#dialog_txtEmail").val()
 };

Provider에 Object를 전달하여 행 추가하기
```
 dataProvider.addRow(newRow);
```

실행화면

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>

<script>
var gridView;
var dataProvider;

$(document).ready( function(){
    $("#dialog_btnAddRow").click(function () {
        var newRow = {
            name: $("#dialog_txtName").val(),
            company: $("#dialog_txtCompany").val(),
            email: $("#dialog_txtEmail").val()
        };
        dataProvider.addRow(newRow);
        $("#addRowDialog").modal('hide');
    });

    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();

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

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

    gridView.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"}
        }]);

    gridView.setOptions({
        edit: { 
            insertable: false,
            appendable: false
        }
    });
});
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#addRowDialog">Add a row</button>

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

<div class="modal fade" id="addRowDialog" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">One Row Input</h4>
            </div><div class="modal-body">
                <p>
                    <label for="dialog_txtName" style="width:80px">Name</label>
                    <input type="text" id="dialog_txtName" /><br />
                    <label for="dialog_txtCompany" style="width:80px">Company</label>
                    <input type="text" id="dialog_txtCompany" /><br />
                    <label for="dialog_txtEmail" style="width:80px">E-Mail</label>
                    <input type="text" id="dialog_txtEmail" />
                </p>
            </div><div class="modal-footer">
                <button type="button" class="btn btn-primary" id="dialog_btnAddRow">Apply</button>
                <button type="button" class="btn btn-default" id="dialog_btnClose" data-dismiss="modal">Close</button>
            </div></div></div>
</div>

참조

RealGrid Help