jqGrid 조회 버튼 클릭 시 조회 방법, 페이지 최초 로딩시 조회 안되게 하는 방법
jqGrid의 세팅을 옵션에 dataType을 'json' 으로 할 경우 페이지 로딩 시에
자동으로 조회가 되게 됩니다.
그리고 filterToolbar 를 사용할 경우 filter의 값이 바뀌면 자동으로 조회가 되게 되죠.
이런 것을 filterToolbar에서 값을 바꾸면 조회가 되지 않고,
조회 버튼을 눌렀을 때만 조회가 되도록 바꿔보겠습니다.
우선 filterToolbar 에 두개의 옵션을 추가 합니다.
|
1
2
3
4
|
const filterOption = {
autosearch : false,
searchOnEnter : false,
}
|
cs |
autosearch 옵션은 filterToolbar의 값이 바뀌어도 조회가 되지 않는 옵션이고,
searchOnEnter 는 filterToolbar의 inputbox에서 엔터를 쳐도 조회가 되지 않게 하는 옵션입니다.
그리고 jqGrid의 기본옵션은 그대로 하되, dataType : 'local' 로 설정합니다.
그럼 최초 페이지 로딩 시에 조회가 되지 않습니다.
이제 조회버튼을 눌렀을 때 조회가 되도록 해야겠죠.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$('#search').on('click', function(){
$('#bitHisList').setGridParam({datatype : 'json',
postData : {
sidNo : function(){return $("#gs_sidName option:selected").val()},
soiYmdhms : function(){return $("#gs_soiYmdhms").val()},
brtNo : function(){return $("#gs_brtNo").val()},
busNo : function(){return $("#gs_busNo").val()},
stopName : function(){return $("#gs_stopName").val()},
soiType : function(){return $("#gs_soiType").val()},
bapType : function(){return $("#gs_bapType").val()},
pageIndex : $("#bitHisList").getGridParam("page"),
pageUnit : $('.ui-pg-selbox option:selected').val(),
columnName : function(){return $("#columnName").val()},
sortOrder : function(){return $("#sortOrder").val()},
},
});
$('#bitHisList').trigger('reloadGrid');
});
|
cs |
코드를 보시면 조회 버튼을 클릭했을 경우 jqGrid의 setGridParam 함수를 사용해서
그리드의 옵션값을 변경해주고 있습니다.
그리고 옵션을 변경한 후에 reloadGird 함수를 실행하면서 데이터를 새로 가져오게 됩니다.
혹시나 페이징 처리쪽이 잘 구현이 안되시는 분은 아래의 코드를 참고하세요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
onPaging: function(action){
const suffix = gridOption.pager;
let currentPage = $("#"+listNm).getGridParam("page");
const lastPage = $("#"+listNm).getGridParam("lastpage");
const userPage = $('.ui-pg-input').val();
const pageUnit = $('.ui-pg-selbox option:selected').val();
if(action=="next_"+suffix){
if( currentPage < lastPage){
currentPage += 1;
}
}else if(action=="prev_"+suffix){
if( currentPage > 0 && currentPage != 1){
currentPage -= 1;
}
}else if(action=="first_"+suffix){
currentPage = 1;
}else if(action=="last_"+suffix){
currentPage = lastPage;
}else if(action=="user"){
if (userPage>lastPage || userPage< 1){
alert('페이지 범위가 올바르지 않습니다.');
return "stop";
}else{
currentPage = userPage;
}
}else if(action=="records"){
console.log('지금?');
if( currentPage <= lastPage){
}else{
alert('잘못된 페이지를 입력 하였습니다.');
return "stop";
}
}
grid.setGridParam({
postData : {
pageIndex : currentPage,
pageUnit : pageUnit,
},
});
},
|
cs |
추천 그리드 ▼
Link : https://aljjabaegi.tistory.com/593
[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open
[Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회,
aljjabaegi.tistory.com
'Programing > jQuery' 카테고리의 다른 글
| jquery 업로드할 이미지 미리보기 image preview URL.createObjectURL (0) | 2018.03.20 |
|---|---|
| jqGrid navGird edit add del 시 데이터 컨트롤 방법 (1) | 2018.03.08 |
| jquery plugin download jquery 플러그인 검색 다운 사이트 (0) | 2018.02.08 |
| jquery ajax loading bar, ajax 로딩바 나타내기 blockUI 적용방법 (0) | 2018.01.25 |
| jqGrid checkbox Multiselect 그리드 멀티선택 체크박스 추가방법 (2) | 2018.01.17 |
댓글