반응형
1. 정렬 제대로 안될때
* 가끔 formatter:fn_setFunction 사용시 정렬할 때 데이터가 이상하게 나오는 경우가 발생
$(document).ready(function() {
// jqGrid 설정
$("#jqGrid").jqGrid({
...
...
colModel:[
// 없는 컬럼명으로 설정
{name:'fmt1' ,label:'이름' ,width:160, align:'center', formatter:fn_detailLinkSet, sorttype:'int'}
...
],
...
});
});
// 상세 링크 설정
function fn_detailLinkSet(cellValue, options, rowdata, action){
if(cellValue != null && cellValue != "") { // 해당 코드 추가
return cellValue;
}
var tag = '<a herf="#" data-index="'+rowdata.usrNm+'" onclick="fn_openDetail(\'' + rowdata.usrNm + '\')" >' + rowdata.usrNm + '</a>';
return tag;
}
2. 동적 처리
* 컬럼이 동적으로 늘어나야 할 경우
ex) 원하는 데이터 모양
| 번호 | 이름 | 정보 | 책상 | 의자 | ....... | ||
| 물품번호 | 금액 | 물품번호 | 금액 | ....... | |||
| 1 | 고길동 | ....... | 22113 | 123,000원 | 17764 | 62,000원 | ....... |
| 2 | 홍길동 | ...... | 231521 | 37,000원 | ....... | ||
// 그리드 생성
function fn_createJqGrid(colList, headerList) {
if(colList == null || colList == "") {
colList = [
{name:'num' ,label:'번호' ,width:80 ,align:'center' ,frozen:true},
{name:'userNm' ,label:'이름' ,width:80 ,align:'center' ,frozen:true},
{name:'info' ,label:'정보' ,width:80 ,align:'center'}
];
}
if(headerList == null || headerList == "") {
headerList = [];
}
/**Draw a jqGrid*/
$("#jqGrid").jqGrid({
type : "POST",
datatype : 'local',
colModel:colList,
height: 260,
sortable: false,
multiSort: true,
multiselect:false,
autowidth:true,
shrinkToFit:false,
guiStyle:"bootstrap",
sortClickChk:true,
loadComplete : function(data){
if($("#jqGrid").getGridParam("sortClickChk")){
initPage("jqGrid", "jqGridPager", true, "fn_search");
}
$("#jqGrid_nodata").remove();
if(data.rows.length == 0){ // 데이터가 없을 경우
$("#jqGrid").after("<p id='jqGrid_nodata'>검색 결과가 없습니다.</p>"); // 문구 추가
}
}
});
// 헤더 그룹
$("#jqGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: headerList
});
// 틀 고정
$("#jqGrid").jqGrid('setFrozenColumns');
}
// 조회
function fn_search(currPage) {
// 동적 컬럼 조회
$.ajax({
url : "/searchColumn.do",
type : "POST",
dataType : "json",
data: $("#dataForm").serialize(),
success: function(response, statusTxt, xhr) {
if(response.value.jsonData != null) {
// 헤더 컬럼 세팅
var array = {};
var colList = [
{name:'num' ,label:'번호' ,width:80 ,align:'center' ,frozen:true},
{name:'userNm' ,label:'이름' ,width:80 ,align:'center' ,frozen:true},
{name:'info' ,label:'정보' ,width:80 ,align:'center'}
];
for(var i=0; i<response.value.jsonData.dataList.length; i++) {
var obj = response.value.jsonData.dataList[i];
// 물품번호 컬럼 추가
array = {
name:'itemNum_' + i
,id:'itemNum_' + obj.itemNum
,label:'물품번호'
,width:90
,align:'center'
,formatter: function(cellValue, option, rowObject, action) {
var id = option.colModel.id;
for(var j=0; j<rowObject.item.length; j++) { // 데이터가 리스트 안에 리스트일 경우
var obj = rowObject.item[j];
// 헤더의 물품번호가 해당 사용자의 구매 목록에 있을 경우 데이터 출력
if(id.indexOf(obj.item) > 0) {
return obj.item;
}
}
return '';
}
};
colList.push(array); // 헤더에 추가
// 금액 컬럼 추가
array = {
name:'money' + i
,id:'money' + obj.money
,label:'금액'
,width:90
,align:'center'
,formatter: function(cellValue, option, rowObject, action) {
var id = option.colModel.id;
for(var j=0; j<rowObject.item.length; j++) { // 데이터가 리스트 안에 리스트일 경우
var obj = rowObject.item[j];
// 헤더의 물품번호가 해당 사용자의 구매 목록에 있을 경우 데이터 출력
if(id.indexOf(obj.item) > 0) {
return obj.money;
}
}
return '';
}
};
colList.push(array);
}
// 그롭 헤더 세팅
var headerList = [];
for(var i=0; i<response.value.jsonData.dataList.length; i++) {
var obj = response.value.jsonData.dataList[i];
array = {
startColumnName: 'itemNum_'+i
,numberOfColumns: 2 // 두개씩 묶음
,titleText: obj.itemNm // 물품명
};
headerList.push(array);
}
// 그리드 컬럼이 계속 바뀔 경우, 초기화를 한 후 다시 그려야함
$("#jqGrid").jqGrid('GridUnload'); // 그리드 초기화
fn_createJqGrid(colList, headerList); // 그리드 그리기
// 그리드 데이터 검색
$("#jqGrid").setGridParam({
url: "/searchList.do",
postData: $("#dataForm").serialize(),
sortable: false,
datatype: "json",
frozenStaticCols : true,
loadComplete : function(data) {
$("#jqGrid_nodata").remove();
if(data.rows.length == 0){ // 데이터가 없을 경우
$("#jqGrid").after("<p id='jqGrid_nodata'>검색 결과가 없습니다.</p>"); // 문구 추가
}
}
}).trigger("reloadGrid");
}
else {
alert(response.value.failJsonData);
return false;
}
},
error : function(response, status, error) {
opSysErrorMsg(response.responseText);
return;
}
});
}
반응형