jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬

추천 그리드 ▼

Link : https://aljjabaegi.tistory.com/593

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open

 

jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬

 

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정

 

이전 1부와 2부 포스팅에서 데이터 조회와 페이징 설정 방법에 대해 알아보았습니다.

이번 3부 포스팅에서는 테이블의 헤더를 클릭해 오름/내림 차순 정렬을 하는 방법을 알아보도록 하겠습니다.

 

헤더의 정렬값을 파라메터로 넘기기 위해서는 jqGrid의 onSortCol 옵션을 사용합니다.

 

2부의 jqGridFunc의 setGrid에  onSortCol 옵션을 추가합니다.

 

onSortCol: function(columnName, columnIndex, sortOrder) {
    $('#columnName').val(columnName);
    $('#sortOrder').val(sortOrder);
    $('#csrList').jqGrid().trigger("reloadGrid");
},

 

위와같이 추가 할 경우

columName에 클릭한 헤더의 name이

columIndex에 클릭한 헤더의 index가

sortOrder에 오름 내림차순 값이 들어오게 됩니다. (asc, desc)

 

그래서 html 에 hidden으로 숨겨둔 값의 value에 해당 값을 넣습니다.

 

<input type="hidden" id="columnName" value=""/>
<input type="hidden" id="sortOrder" value=""/>

이렇게 넘긴 값을 myBatis의 $를 활용하여 order by 쿼리문에 추가해주시면 됩니다.

 

<if test="columnName != null and columnName != ''">
    ORDER BY ${columnName} ${sortOrder}
</if>

 

pageIndex와 pageUnit은 beforeRequest 옵션에서 설정해 주므로 현재 값이 넘어가게 되니 신경 안쓰셔도 되구요

(2부 참고)

 

이제 그리드의 헤더 클릭시 오름/내림차순 정렬이 되는것을 확인하실 수 있습니다.

 

 

다음 4부에서는 filterToolbar를 활용하여 멀티 조건 조회 하는 방법을 알아보도록 하겠습니다.

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회