들어가며

이번 강좌에서는 인디케이터(Indicator)에 대하여 알아보도록 하겠습니다.

이론

인디케이터는 그리드의 가장 왼쪽에 위치한 수직 Bar로 아이템이나 데이터행의 Index 혹은, 행의 편집 상태 등을 표시합니다. 기본적으로 표시되는 값은 itemIndex이며 필요에 따라 dataRow로 표시되게 할 수 있습니다. 숫자의 기본 시작값은 1입니다. 그러나 0으로 시작하거나 특정 값을 더해서 표시 할 수 있습니다.

만약 Item과 Data의 차이에 대해 잘 모른다면 [A10], [A11]강좌에서 배울 수 있습니다.

인디케이터 정보 가져오기

GridBase.getIndicator()를 사용해서 현재 설정된 인디케이터의 정보를 가져 올 수 있습니다.

Indicator클래스의 속성 정보는 아래와 같습니다.

• displayValue : Indicator 셀들에 표시할 내용을 지정합니다. “none”(아무것도 표시 안함), “index”(itemIndex), “row”(dataRow)를 지정합니다.
• minWidth : Indicator의 최소 너비를 픽셀 단위로 지정합니다.
• maxWidht : Indicator의 최대 너비를 픽셀 단위로 지정합니다.
• width : Indicator의 너비를 픽셀 단위로 지정합니다. 이 값이 0보다 크면 minWidth, maxWidth는 무시됩니다.
• selectable : 선택가능 여부를 지정합니다.
• visible : Indicator를 표시합니다.
• zeroBase : Indicator의 숫자가 0부터 시작할것인지의 여부를 지정합니다.
• indexOffset : Indicator에 표시될 숫자와 itemIndex와의 간격을 지정합니다.
• rowOffset : Indicator에 표시될 숫자와 dataRow와의 간격을 지정합니다.

인디케이터는 등록된 속성 정보를 이용하여 자동으로 너비를 계산하여 표시하며 계산 순서는 아래와 같습니다.

1. width에 기본값 0 이 아닌 다른 값이 들어 있으면 너비는 그 값으로 결정. 이후 계산 순서는 PASS.
2. Indicator 스타일의 폰트 및 padding 값들로 모든 행의 indicator셀의 충분히 표시될 수 있는 너비를 계산.
   2-1. 계산된 값이 maxWidth보다 크면 maxWidth로 조정.
   2-2. 계산된 값이 minWidth보다 작으면 minWidth로 조정.
3. 계산된 너비로 인디케이터 표시.

인디케이터 정보 설정하기

GridBase.setIndicator()를 사용해서 인디케이터의 정보를 설정할 수 있습니다. 이 함수의 인자는 Indicator객체 입니다.

실습

실습에서는 인디케이터 속성 정보를 하나하나 실행해보면서 결과를 확인해보도록 하겠습니다.

1. 버튼을 클릭하면 그리드에 인디케이터가 표시됩니다.

    $("#btnVisible").click(function () {
        //인디케이터 표시
        gridView.setIndicator({visible: true});    
    });

2. 표시값 변경하기 - 표시하지 않음

    $("#btnDisplayValueNone").click(function () {
        gridView.setIndicator({displayValue: 'none'});     
    });

3. 표시값 변경하기 - dataRow

    $("#btnDisplayValueRow").click(function () {
        gridView.setIndicator({displayValue: 'row'});     
    });

4. 표시값 변경하기 - itemIndex

    $("#btnDisplayValueItem").click(function () {
        gridView.setIndicator({displayValue: 'index'});     
    });

5. 표시값 0부터 시작하기

    $("#btnZeroBase").click(function () {
        gridView.setIndicator({zeroBase: true});    
    });

6. 표시값에 itemIndex + 10 을 표시하기

    $("#btnIndexOffset").click(function () {
        gridView.setIndicator({indexOffset: 10});    
    });

7. 최소 너비를 70픽셀로 설정하기

    $("#btnMinWidth").click(function () {
        gridView.setIndicator({minWidth: 70});    
    });

8. 최대 너비를 140픽셀로 설정하기

    $("#btnMaxWidth").click(function () {
        gridView.setIndicator({maxWidth: 140});    
    });

9. 너비를 40픽셀로 설정하기

    $("#btnWidth").click(function () {
        gridView.setIndicator({width: 40});    
    });

10. 인디케이터를 선택 불가상태로 설정하기

     $("#btnSelectable").click(function () {
         gridView.setIndicator({selectable: false});    
     });

실행화면

1. visible: true 버튼을 클릭하면 그리드에 인디케이터가 표시됩니다.

2. displayValue: ‘none’ 인디케이터에 표시값이 나타나지 않음.

3. displayValue: ‘row’ 인디케이터에 표시값이 dataRow로 표시됨. 컬럼헤더를 클릭해서 소트를 하여 표시값이 변경되는 것을 확인하세요.

4. displayValue: ‘item’ 인디케이터에 표시값이 itemIndex로 표시됨.

5. zeroBase: true 인디케이터 표시값이 0부터 시작함.

6. indexOffset: 10 표시값에 itemIndex + 10 을 표시하기

7. minWidth: 70 최소 너비를 70픽셀로 설정하기

8. maxWidth: 140 최대 너비를 140픽셀로 설정하기, 현재 설정된 인디케이터의 너비로도 모든 정보가 표시되기 때문에 너비가 변경되지 않습니다.

9. width: 40 너비를 40픽셀로 설정하기, minWidth, maxWidth에서 설정한 값은 무시되고 지정한 값으로 변경됩니다.

10. indicator를 마우스를 클릭해보기도 하고, 클릭 후 드래그 하여 선택도 해보세요.

11. selectable: false indicator를 선택 불가상태로 설정하기

12. 10번을 반복해 보면서 동작이 어떻게 다른지 확인해보세요.

전체 소스코드

SCRIPT

<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.112.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 = [
        ["배우", "여자", "전도연", "0", "70", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "1", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "2", "100", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "3", "90", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "4", "100", "90", "70", "60", "100", "80"],
        ["가수", "남자", "이승환", "5", "100", "100", "100", "100", "100", "100"],
        ["가수", "남자", "토이", "6", "100", "100", "100", "100", "100", "100"]
    ];
    dataProvider.setRows(data);

    gridView.setOptions({
        indicator: {visible: false},        
        checkBar: {visible: false},
        stateBar: {visible: false}
    });

    //버튼을 클릭하면 그리드에 인디케이터가 표시됩니다.

    $("#btnVisible").click(function () {
        //인디케이터 표시
        gridView.setIndicator({visible: true});    
    });

    //표시값 변경하기 - 표시하지 않음  
    $("#btnDisplayValueNone").click(function () {
        gridView.setIndicator({displayValue: 'none'});     
    });

    //표시값 변경하기 - dataRow    
    $("#btnDisplayValueRow").click(function () {
        gridView.setIndicator({displayValue: 'row'});     
    });

    //표시값 변경하기 - itemIndex  
    $("#btnDisplayValueItem").click(function () {
        gridView.setIndicator({displayValue: 'index'});     
    });

    //표시값 0부터 시작하기   
    $("#btnZeroBase").click(function () {
        gridView.setIndicator({zeroBase: true});    
    });

    //표시값에 itemIndex + 10 을 표시하기    
    $("#btnIndexOffset").click(function () {
        gridView.setIndicator({indexOffset: 10});    
    });

    //최소 너비를 70픽셀로 설정하기      
    $("#btnMinWidth").click(function () {
        gridView.setIndicator({minWidth: 70});    
    });

    //최대 너비를 140픽셀로 설정하기    
    $("#btnMaxWidth").click(function () {
        gridView.setIndicator({maxWidth: 140});    
    });

    //너비를 40픽셀로 설정하기    
    $("#btnWidth").click(function () {
        gridView.setIndicator({width: 40});    
    });

    //인디케이터를 선택 불가상태로 설정하기    
    $("#btnSelectable").click(function () {
        gridView.setIndicator({selectable: false});    
    });
});   
 
</script>

HTML

1. <button type="button" class="btn btn-primary btn-xs" id="btnVisible">visible: true</button> 버튼을 클릭하면 그리드에 인디케이터가 표시됩니다.

2. <button type="button" class="btn btn-primary btn-xs" id="btnDisplayValueNone">displayValue: 'none'</button> 인디케이터에 표시값이 나타나지 않음.

3. <button type="button" class="btn btn-primary btn-xs" id="btnDisplayValueRow">displayValue: 'row'</button> 인디케이터에 표시값이 dataRow로 표시됨. 컬럼헤더를 클릭해서 소트를 하여 표시값이 변경되는 것을 확인하세요.   

4. <button type="button" class="btn btn-primary btn-xs" id="btnDisplayValueItem">displayValue: 'item'</button> 인디케이터에 표시값이 itemIndex로 표시됨.

5. <button type="button" class="btn btn-primary btn-xs" id="btnZeroBase">zeroBase: true</button>  인디케이터 표시값이 0부터 시작함.

6. <button type="button" class="btn btn-primary btn-xs" id="btnIndexOffset">indexOffset: 10</button> 표시값에 itemIndex + 10 을 표시하기 

7. <button type="button" class="btn btn-primary btn-xs" id="btnMinWidth">minWidth: 70</button> 최소 너비를 70픽셀로 설정하기 

8. <button type="button" class="btn btn-primary btn-xs" id="btnMaxWidth">maxWidth: 140</button> 최대 너비를 140픽셀로 설정하기, 현재 설정된 인디케이터의 너비로도 모든 정보가 표시되기 때문에 너비가 변경되지 않습니다.    

9. <button type="button" class="btn btn-primary btn-xs" id="btnWidth">width: 40</button> 너비를 40픽셀로 설정하기, minWidth, maxWidth에서 설정한 값은 무시되고 지정한 값으로 변경됩니다.

10. indicator를 마우스를 클릭해보기도 하고, 클릭 후 드래그 하여 선택도 해보세요.

11. <button type="button" class="btn btn-primary btn-xs" id="btnSelectable">selectable: false</button> indicator를 선택 불가상태로 설정하기

12. 10번을 반복해 보면서 동작이 어떻게 다른지 확인해보세요.

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

데모 사이트

• 인디케이터 데모

API 참조

• GridBase.getIndicator()
• GridBase.setIndicator()