A14 소팅(sorting), 데이터 정렬하기 - III orderBy()함수 사용하기

들어가며

지난 [A12 강좌], [A13 강좌]에서는 컬럼을 클릭하여 데이터를 정렬하는 방법에 대해 알아보았습니다. 이번 강좌에서는 GridBase.orderBy()함수를 이용해 정렬하는 방법에 대해 배워보겠습니다.

이론

orderBy함수의 인자는 FieldName의 배열값과 SortDirection의 배열값입니다. FieldName와 SortDirection은 짝이 맞아야 하며 각각의 짝에 해당하는 필드와 방향으로 정렬을 실행 합니다. 정렬상태를 완전히 초기화 하기 위해서는 아래 코드처럼 FieldName배열과 SortDirection배열, 두 인자에 모두 빈값을 넘겨주면 됩니다.

    //정렬 순서 초기화하기
    gridView.orderBy([], []);

동시에 여러 컬럼을 한 번에 정렬할 필요가 있는 경우 사용할 수 있습니다.

실습

그리드의 정렬상태를 초기화 하기 위해 GridBase.orderBy();함수에 빈 배열 값을 넘겨주는 resetOrders()함수를 만듭니다.
```
 //정렬 순서를 초기화하는 함수
 function resetOrders() {
     gridView.orderBy([], []);
 }
```

btnChangeOrders INCLUSIVE와 REVERSE로 설정하기 위해 버튼 클릭 이벤트를 작성 합니다.

 // SortStyle을 INCLUSIVE으로 설정
 $("#btnChangeSortStyleInclusive").on("click", function(){
     setSortStyles(RealGridJS.SortStyle.INCLUSIVE);
 })    

 // SortStyle을 REVERSE로 설정
 $("#btnChangeSortStyleReverse").on("click", function(){
     setSortStyles(RealGridJS.SortStyle.REVERSE);
 })

orderBy()함수를 사용하여 국어컬럼, 수학컬럼을 순방향 정렬하는 코드를 작성합니다.

 // 국어, 수학 컬럼을 순방향 정렬하기위해 orderBy() 함수 사용
 $("#btnChangeOrders").on("click", function(){
     gridView.orderBy(["field2", "field3"], ["ascending", "ascending"]);
 })

실행화면

정렬상태 초기화 버튼을 눌러 정렬 상태를 초기화 합니다.
국어, 수학 컬럼 순방향 정렬 버튼을 클릭하면 국어 컬럼과 수학 컬럼의 데이터를 순방향(ascending)으로 정렬합니다.
정렬상태 초기화버튼을 눌러 정렬상태를 초기화 하고 국어컬럼과 수학컬럼을 차례로 클릭하여 클릭에 의한 정렬순서와 orderBy()함수에 의한 정렬순서가 같은 결과인지 확인합니다.

전체 소스코드

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"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //field1필드와 연결된 컬럼을 가진 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "이름"
            },
            width: 150
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "국어"
            },
            width: 150
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "수학"
            },
            width: 150
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["송윤아", "10", "33"],
        ["전도연", "20", "22"],
        ["하지원", "10", "11"],
        ["전지현", "20", "44"]
    ];
    dataProvider.setRows(data);

    // 정렬초기화
    $("#btnResetOrder").on("click", function(){
        gridView.orderBy([], []);
    })    

    // 국어, 수학 컬럼을 순방향 정렬하기위해 orderBy() 함수 사용
    $("#btnChangeOrders").on("click", function(){
        gridView.orderBy(["field2", "field3"], ["ascending", "ascending"]);
    })    

});
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" id="btnResetOrder">정렬상태 초기화</button>

<button type="button" class="btn btn-primary btn-xs" id="btnChangeOrders">국어, 수학 컬럼 순방향 정렬</button>

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

참조

RealGrid Help