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

들어가며

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

이론

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

getSelectionData(maxRows);

실습

드롭다운 메뉴를 선택하면 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"});
 })

두 개의 버튼을 클릭 할때 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);
 })

실행화면

BLOCK

위 드롭다운 메뉴를 펼치고 SelectionStyle중 하나를 선택합니다.
그리드에서 마우스를 클릭-드래그하여 셀 범위를 선택합니다.
버튼을 클릭하여 모든 범위의 데이터를 가져왔는지 확인합니다.

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

가져온 데이터 확인

전체 소스코드

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>

참조

RealGrid Help