들어가며

[A20 강좌]에서는 RealGrid에서 셀을 선택하는 방법에 대해 알아보았습니다. 이번 강좌에서는 선택한 범위에 해당하는 셀의 값을 가져오는 방법에 대해 배워보겠습니다.

이론

선택된 범위에 대한 셀의 값을 가져오려면 GridBase.getSelectionData()함수를 사용하면 됩니다. 이 함수는 아래와 같이 정의되어 있으며 maxRows인자는 함수에서 반환할 행의 수를 입력합니다.

getSelectionData(maxRows);

실습

  1. 드롭다운 메뉴를 선택하면 SelectionOptionsSelectionStyle을 변경하도록 작성합니다. 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);
     })

실행화면

  1. 위 드롭다운 메뉴를 펼치고 SelectionStyle중 하나를 선택합니다.

  2. 그리드에서 마우스를 클릭-드래그하여 셀 범위를 선택합니다.

  3. 버튼을 클릭하여 모든 범위의 데이터를 가져왔는지 확인합니다.

    가져온 데이터 확인
  4. 버튼을 클릭하여 2행의 데이터를 가져왔는지 확인합니다.

    가져온 데이터 확인
Your browser does not support HTML5 Canvas.

전체 소스코드

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() {

    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalDataProvider();
    gridView = new RealGridJS.GridView("realgrid");
    gridView.setDataSource(dataProvider);

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

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60            
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
        ["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "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"]
    ];
    dataProvider.setRows(data);

    // 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"});
    })

    // 선택된 범위의 모든 행에 대한 데이터를 가져옵니다.
    $("#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);
    })
});
</script>
HTML
<div class="row">
    <div class="col-md-12">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  SelectionStyle
                  <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a id="btnSetSelectOptionsBlock">BLOCK</a></li>
                <li><a id="btnSetSelectOptionsRows">ROWS</a></li>
                <li><a id="btnSetSelectOptionsColumns">COLUMNS</a></li>
                <li><a id="btnSetSelectOptionsSingleRow">SINGLE_ROW</a></li>
                <li><a id="btnSetSelectOptionsSingleColumn">SINGLE_COLUMN</a></li>
                <li><a id="btnSetSelectOptionsNone">NONE</a></li>
            </ul>
        </div>
<span class="label label-success" id="labelSelectionStyle">BLOCK</span>
    </div>
</div>    
1. 위 드롭다운 메뉴를 펼치고 SelectionStyle중 하나를 선택합니다.

2. 그리드에서 마우스를 클릭-드래그하여 셀 범위를 선택합니다.

3. <button type="button" class="btn btn-primary btn-xs" id="btnGetSelectionData">선택한 범위의 모든행 데이터 가져오기</button> 버튼을 클릭하여 모든 범위의 데이터를 가져왔는지 확인합니다.

    <div class="panel panel-default">
      <div class="panel-heading">가져온 데이터 확인</div>
      <div class="panel-body">
        <sapn id="allRowSelectionData"></sapn>
      </div>
    </div>

4. <button type="button" class="btn btn-primary btn-xs" id="btnGet2RowSelectionData">선택한 범위의 2개행 데이터만 가져오기</button> 버튼을 클릭하여 2행의 데이터를 가져왔는지 확인합니다.

    <div class="panel panel-default">
      <div class="panel-heading">가져온 데이터 확인</div>
      <div class="panel-body">
        <sapn id="twoRowSelectionData"></sapn>
      </div>
    </div>

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

참조