A17 행과 열 고정하기(Fixing)

들어가며

이번 강좌에서는 그리드의 행과 열을 고정하는 방법을 배워보겠습니다. 행이나 열이 고정되면 스크롤에서 제외됩니다. 다시 말해서, 고정된 행이나 열은 그리드의 다른 데이터들이 스크롤 될때에도 왼쪽과 위쪽에 고정된채 스크롤되지 않습니다.

이론

행(Row)이나 열(Column)을 고정하기(Fixing)위해서 GridBase.setFixedOptions()함수를 이용합니다. 이 함수의 인자는 FixedOptions라는 클래스이며 반환값은 없습니다. setFixedOptions()함수가 호출되는 즉시 FixedOptions의 속성값에 따라 그리드의 고정상태가 변경됩니다.

행 고정

행을 고정하기 위해서는 rowCount속성에 고정할 행의 갯수를 넘겨 줍니다. 고정된 행은 기본적으로 소팅, 그룹핑, 필터링에서 제외됩니다.

열 고정

열을 고정하기 위해서는 colCount속성에 고정할 열의 갯수를 넘겨 줍니다. 고정된 열은 기본적으로, 사용자가 너비를 조정할 수 없습니다.

초기화

행 고정, 열 고정 값을 초기화 하려면 각각rowCount, colCount의 속성에 0값을 입력 하면 됩니다.

이 외에도 FixedOptions 클래스에는 여러가지 속성이 포함되어 있습니다. FixedOptions에 대한 속성에 대해서는 [B 클래스]강좌에서 좀더 자세히 다루도록 하겠습니다.

실습

실습을 위해 필드와 컬럼의 갯수를 늘렸으며, 데이터도 추가했습니다.
버튼을 클릭할때 행, 열 고정상태를 초기화 하기 위해 아래 코드를 추가합니다.

    // 행, 열 고정 상태 초기화
    $("#btnResetFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 0,
            rowCount: 0
        });
    })

버튼을 클릭할때 각각 행 고정, 열 고정, 행 열 고정하도록 아래 코드를 추가합니다.

    // 행 고정
    $("#btnRowFixing").on("click", function(){
        gridView.setFixedOptions({
            rowCount: 1
        });
    })    

    // 열 고정
    $("#btnColumnFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 3
        });
    })    

    // 행 열 고정
    $("#btnRowColumnFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 3,
            rowCount: 1
        });
    })

실행화면

행, 열 고정상태 초기화 버튼을 눌러 행, 열 고정상태를 초기화 합니다. 2, 3, 4 실습을 실행한 다음 각각 초기화 버튼을 눌러 고정상태가 초기화 되는 모습을 확인하세요.
1행 고정하기 버튼을 클릭하여 데이터의 첫 행이 고정되는 모습을 확인하세요.
3열 고정하기 버튼을 클릭하여 직업, 성별, 이름 3개의 컬럼이 고정되는 모습을 확인하세요. 또, 1행 고정하기 버튼을 클릭한 다음 3열 고정하기버튼을 클릭하여 행과 열이 모두 고정되는 모습을 확인하세요.
1행, 3열 고정하기 버튼을 클릭하면 행과 열이 모두 고정되는 모습을 확인하세요.

전체 소스코드

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);

    // 행, 열 고정 상태 초기화
    $("#btnResetFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 0,
            rowCount: 0
        });
    })    

    // 행 고정
    $("#btnRowFixing").on("click", function(){
        gridView.setFixedOptions({
            rowCount: 1
        });
    })    

    // 열 고정
    $("#btnColumnFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 3
        });
    })    

    // 행 열 고정
    $("#btnRowColumnFixing").on("click", function(){
        gridView.setFixedOptions({
            colCount: 3,
            rowCount: 1
        });
    })
});
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" id="btnResetFixing">행, 열 고정상태 초기화</button>

<button type="button" class="btn btn-primary btn-xs" id="btnRowFixing">1행 고정하기</button>

<button type="button" class="btn btn-primary btn-xs" id="btnColumnFixing">3열 고정하기</button>

<button type="button" class="btn btn-primary btn-xs" id="btnRowColumnFixing">1행, 3열 고정하기</button>

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

참조

RealGrid Help