추천 그리드 ▼
Link : https://aljjabaegi.tistory.com/593
[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open
[Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회,
aljjabaegi.tistory.com
jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정
이번 포스팅에서는 jqGrid filterToolbar에 dateRangePicker를 적용하는 방법을 알아보겠습니다.
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회
dateRangePicker 관련 js, css 파일은 위에 1부 Link를 참고하세요.
적용하는 방법은 간단합니다.
colModel 쪽만 수정해주면 되는데요.
아래와 같이 colModel의 searchoptions를 추가해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
colM : [
{name:'csrTenant',align:'center',width:'50px'},
{name:'csrId', align:'center',width:'50px'},
{name:'csrName', align:'center',width:'50px'},
{name:'csrDn', align:'center',width:'40px'},
{name:'csrPhone', align:'center',width:'50px'},
{name:'regDtm', align:'center',sortable:true,sorttype: 'date',
searchoptions : {
dataInit : function(elem){
$(elem).dateRangePicker({});
}
}
},
{name:'recentLoginTime', align:'center',sortable:true, sorttype:'date',
searchoptions : {
dataInit : function(elem){
$(elem).dateRangePicker({});
}
}
},
{name:'pwReset', align:'center',sortable:true, width:'25px',search:false},
],
|
cs |
날짜관련 컬럼인 regDtm과 recentLoginTime에만 적용을 했습니다.
그럼 결과를 보도록 하죠.
regDtm과 recentLoginTime filterToolbar에 클릭을 하게되면 아래와 같이 달력이 나옵니다.
그리고 기간을 선택하게 되면 해당 input text에 입력이되죠.
하지만 text가 전달 되기 때문에 프론트엔드든 백엔드든 해당 text를 조회하고 싶은 조건에 맞게
가공해주어야 합니다.
저같은 경우에는 Controller에서 split을 사용해 두개의 날짜 파라메터로 나누었습니다.
이제 jqGrid json type의 조회부분은 마무리가 된것 같네요.
다음포스팅에서는 CUD 기능에 대해 포스팅 하도록 하겠습니다.
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현
댓글