들어가며

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

실행화면

  1. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 드래그한 범위만큼의 셀이 선택되는지 확인하세요.

  2. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 드래그한 범위만큼의 행들이 선택되는지 확인하세요.

  3. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 드래그한 범위만큼의 컬럼들이 선택되는지 확인하세요.

  4. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 처음 클릭하여 선택된 행만 선택되고 더 이상 선택 안되는 것을 확인하세요.

  5. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 처음 클릭하여 선택된 컬럼만 선택되고 더 이상 선택 안되는 것을 확인하세요.

  6. 버튼을 클릭한 다음 마우스로 셀을 클릭하고 드래그해 보세요. 포커스된 셀 이외에 어떤 셀도 선택 안되는 것을 확인하세요.

전체 소스코드

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"});
    })
});
</script>
HTML
<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsBlock"SelectionStyle을  BLOCK으로 설정</button>

<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsRows"SelectionStyle을  ROWS로 설정</button>
    
<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsColumns"SelectionStyle을  COLUMNS로 설정</button>

<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsSingleRow"SelectionStyle을  SINGLE_ROW로 설정</button>

<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsSingleColumn"SelectionStyle을  SINGLE_COLUMN으로 설정</button>

<button type="button" class="btn btn-primary btn-xs" id="btnSetSelectOptionsNone"SelectionStyle을  NONE으로 설정</button>

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

참조