추천 그리드 ▼
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 4부 멀티 조건 조회
이전에 3개의 포스팅에서 jqGrid의 조회, 페이징, 헤더 정렬에 대해 알아보았습니다.
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬
이번 4번재 포스팅에서는 filterToolbar를 활용해 멀티 조회를 하는 방법을 알아보도록 하겠습니다.
우선 filterToolbar에 대해 설명을 드리면 페이지 헤더 아래, 최상단 row에 input text를 추가하여
해당 로우의 값을 조회 할 수 있는 툴바 입니다.
filterOption object를 추가하여 jqGridFunc.setGrid에 같이 전달해 줍니다.
그리고 해당값을 서버로 보내줄 수 있게 postData에도 파라메터를 추가합니다.
|
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
41
42
43
44
|
function setGrid(){
var html = '<table id="csrList"></table><div id="csrPage"></div>';
$('#listTable').html(html);
var gridOption = {
id : 'csrList',
url : '${ctx}/getCsrList.do',
mType : 'POST',
dataType : 'json',
pager : 'csrPage',
postData : {
csrTenant : '',
csrId : '',
csrName : '',
csrDn : '',
csrPhone : '',
regDtm : '',
recentLoginTime : '',
pageIndex : 1,
pageUnit : 10,
pageSize : 10,
columnName : function(){return $("#columnName").val()},
sortOrder : function(){return $("#sortOrder").val()},
},
colN : ['테넌트명','ID','이름','내선번호','연락처','등록일자','최근 로그인', 'PW 초기화'],
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',sorttype: 'date'},
{name:'recentLoginTime', align:'center'},
{name:'pwReset', align:'center', width:'25px'},
],
rowNum : 10,
rowList : [10,20,30,40,50,100]
};
var filterOption = {
autoSearch : false,
stringResult: true,
searchOnEnter : true,
}
jqGridFunc.setGrid(gridOption, filterOption);
}
|
cs |
filterOption의 autoSearch는 input text값이 바뀌면 자동 조회하는 기능이고
searchOnEnter는 엔터를 쳤을 때 조회 이벤트를 발생시키는 기능입니다.
엔터가 부화가 좀 덜하겠죠.
jqGridFunc.setGrid에도 filterOption을 받을 수 있게 파라메터를 추가합니다.
|
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
41
42
43
44
45
46
47
|
setGrid : function(gridOption, filterOption){
var grid = $('#'+gridOption.id);
var pager = $('#'+gridOption.pager);
grid.jqGrid({
url : gridOption.url,
mtype : gridOption.mType,
datatype : gridOption.dataType,
postData : gridOption.postData,
colNames : gridOption.colN,
colModel : gridOption.colM,
rowNum : gridOption.rowNum,
rowList : gridOption.rowList,
pager : pager,
jsonReader : {
repeatitems : false,
root : 'row',
total : 'totalPage',
records : 'totalCnt',
},
viewrecord : false,
loadonce : false,
loadui : "enable",
loadtext:'데이터를 가져오는 중...',
height : "680px",
autowidth:true,
shrinkToFit : true,
refresh : true,
loadError:function(xhr, status, error) {
alert(error);
},
beforeRequest: function () {
var currentPage = $("#csrList").getGridParam("page");
var currentUnit = $('.ui-pg-selbox option:selected').val();
var newPostData = $('#csrList').jqGrid("getGridParam", "postData");
newPostData.pageIndex = currentPage;
newPostData.pageUnit = currentUnit;
},
onSortCol: function(columnName, columnIndex, sortOrder) {
$('#columnName').val(columnName);
$('#sortOrder').val(sortOrder);
$('#csrList').jqGrid().trigger("reloadGrid");
},
});
grid.jqGrid('filterToolbar',filterOption);
},
|
cs |
이상태로 실행을 하게되면 첫번째 행에 input text는 추가되었지만 값이 전달되지 않습니다.
filterToolbar의 값은 postData의 filters object내에 존재하게 됩니다.
그럼 어떤 형태로 존재하는지 보도록 하죠.
기존의 beforeRequest 옵션에 console로 확인해보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
|
beforeRequest: function () {
var currentPage = $("#csrList").getGridParam("page");
var currentUnit = $('.ui-pg-selbox option:selected').val();
var newPostData = $('#csrList').jqGrid("getGridParam", "postData");
filters = newPostData.filters;
console.log(filters);
newPostData.pageIndex = currentPage;
newPostData.pageUnit = currentUnit;
},
|
cs |
이렇게 콘솔을 찍고 csrDn filterToolbar에 2001이라는 값을 넣고 엔터를 쳐보겠습니다.
{"groupOp":"AND","rules":[{"field":"csrDn","op":"bw","data":"2001"}]}
이런 결과가 나옵니다. jsonObject 이네요.
조건 값을 추가할 수록 rules jsonArray의 object로 추가가 되게 됩니다.(csrPhone에 01값 입력)
{"groupOp":"AND","rules":[{"field":"csrDn","op":"bw","data":"2001"},{"field":"csrPhone","op":"bw","data":"01"}]}
이제 형태를 알았으니 서버로 넘겨줄 postData의 값에 추가를 해줍니다.
|
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
|
beforeRequest: function () {
var currentPage = $("#csrList").getGridParam("page");
var currentUnit = $('.ui-pg-selbox option:selected').val();
var newPostData = $('#csrList').jqGrid("getGridParam", "postData");
filters = newPostData.filters;
if (filters!=undefined){
var obj = JSON.parse(filters);
var data = obj.rules;
var size = data.length;
if (size>0){
for(var i=0; i<size; i++){
if (data[i].field=="csrTenant"){
newPostData.csrTenant = data[i].data;
}else if (data[i].field=="csrId"){
newPostData.csrId = data[i].data;
}else if (data[i].field=="csrName"){
newPostData.csrName = data[i].data;
}else if (data[i].field=="csrDn"){
newPostData.csrDn = data[i].data;
}else if (data[i].field=="csrPhone"){
newPostData.csrPhone = data[i].data;
}else if (data[i].field=="regDtm"){
newPostData.regDtm = data[i].data;
}else if (data[i].field=="recentLoginTime"){
newPostData.recentLoginTime = data[i].data;
}
}
}
}
newPostData.pageIndex = currentPage;
newPostData.pageUnit = currentUnit;
},
|
cs |
이제 filterToolbar에 값을 입력하면 멀티 조회가 되는것을 확인하실 수 있습니다.
다음 포스팅은 jqGrid에 dateRangePickter 적용입니다.
기간 조회의 경우 하나의 날짜가 아닌 기간으로 입력 받아야 하기 때문에
dateRangePicker를 적용하였습니다.
그럼 다음 포스팅에서 봐요~
아 그리고 행에 버튼 추가와 기능 설정은 아래의 Link를 참고하세요~
Link : jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정
댓글