A27 옵션(Options)의 종류와 설정 방법

들어가며

이번 강좌에서는 RealGrid가 가지고 있는 옵션에는 어떤 것들이 있으며 기본적인 옵션 설정 방법에 대해 배워보겠습니다.

이론

RealGrid에는 많은 종류의 옵션이 있기 때문에 요구사항에 맞게 다양한 옵션을 선택하여 그리드의 설정을 변경할 수 있습니다.

옵션의 종류

GridBase
- GridOptions : 그리드 기본 옵션
  - getOptions()
  - setOptions()
- CopyOptions : 셀의 값을 클립보드로 복사하는 기능 관련 옵션
  - getCopyOptions()
  - setCopyOptions()
- DisplayOptions : 그리드 UI 관련 옵션
  - getDisplayOptions()
  - setDisplayOptions()
- EditOptions : 편집 기능 관련 옵션
  - getEditOptions()
  - setEditOptions()
- FilteringOptions : 필터링 기능 관련 옵션
  - FilterSelectorOptions : 필터의 선택상자 관련 옵션
  - ToastOptions : 정렬/필터링/그룹핑시 토스트 메시지 옵션
  - getFilteringOptions()
  - setFilteringOptions()
- FixedOptions : 행, 열 고정 기능 관련 옵션
  - getFixedOptions()
  - setFixedOptions()
- GroupingOptions : 행 그룹핑 기능 관련 옵션
- PasteOptions : 클립보드의 값을 셀에 붙여넣기 기능 관련 옵션
  - getPasteOptions()
  - setPasteOptions()
- SelectOptions : 셀 선택 기능 관련 옵션
  - getSelectOptions()
  - setSelectOptions()
- SortingOptions : 정렬 기능 관련 옵션
TreeView
- TreeOptions : 트리 기본 옵션
  - getTreeOptions()
  - setTreeOptions()
DataProvider
- DataProviderOptions : DataProvider 기본 옵션
  - getOptions()
  - setOptions()
Component
- Panel
  - getPanel()
  - setPanel()
- Header
  - getHeader()
  - setHeader()
- Indicator
  - getIndicator()
  - setIndicator()
- StateBar
  - getStateBar()
  - setStateBar()
- CheckBar
  - getCheckBar()
  - setCheckBar()
- Footer
  - getFooter()
  - setFooter()
함수의 인자로 사용되는 옵션
- DataFillOptions (RealGridJS only)
  - fillCsvData()
  - fillJsonData()
  - fillXmlData()
- DataLoadOptions (RealGrid+ only)
  - loadData()
- GridExportOptions
  - exportGrid()
- RowGroupOptions
  - setRowGroup()
- SearchOptions
  - searchCell() (RealGridJS only)
  - searchItem()

실습

보이기, 감추기 버튼을 누를때 panel, indicator, checkbar를 보이거나 감추도록 옵션 설정 코드를 작성합니다.

 // panel, indicator, checkbar 감추기
 $("#btnSetHide").on("click", function(){
     gridView.setPanel({ 
         visible: false 
     });

     gridView.setIndicator({ 
         visible: false
     });

     gridView.setCheckBar({
         visible: false
     });
 })

 // panel, indicator, checkbar 보이기
 $("#btnSetShow").on("click", function(){
     gridView.setPanel({ 
         visible: true 
     });

     gridView.setIndicator({ 
         visible: true
     });

     gridView.setCheckBar({
         visible: true
     });
 })

실행화면

버튼을 눌러 그리드에서 Panel, Indicator, CheckBar가 사라지는 것을 확인하세요.
버튼을 눌러 그리드에서 Panel, Indicator, CheckBar가 보이는 것을 확인하세요.

전체 소스코드

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 = [
        ["가수", "여자", "정수라", "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);

    // panel, indicator, checkbar, statebar 감추기
    $("#btnSetHide").on("click", function(){
        gridView.setPanel({ 
            visible: false 
        });

        gridView.setIndicator({ 
            visible: false
        });

        gridView.setCheckBar({
            visible: false
        });

        girdView.setStateBar({
            visible: false
        })
    })

    // panel, indicator, checkbar, statebar 보이기
    $("#btnSetShow").on("click", function(){
        gridView.setPanel({ 
            visible: true 
        });

        gridView.setIndicator({ 
            visible: true
        });

        gridView.setCheckBar({
            visible: true
        });

        girdView.setStateBar({
            visible: true
        })
    })

});
</script>

HTML

1. <button type="button" class="btn btn-primary btn-xs" id="btnSetHide">감추기</button> 버튼을 눌러 그리드에서 Panel, Indicator, CheckBar, StateBar가 사라지는 것을 확인하세요.

2. <button type="button" class="btn btn-primary btn-xs" id="btnSetShow">보이기</button> 버튼을 눌러 그리드에서 Panel, Indicator, CheckBar, StateBar가 보이는 것을 확인하세요.


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

참조

RealGrid Help