환경: jqGrid v4.7.1 이하 (무료버전)
아래 모습에서 페이지를 이동 및 페이지 갯수 설정을 위한 액션을 취할 때 발생하는 이벤트를 호출하는 Pager의 초기화 로직을 알아본다.
jqGrid 가 초기화 될 때 다음과 같은 로직이 수행된다.
1004lucifer
https://github.com/tonytomov/jqGrid/blob/v4.7.1/js/jquery.jqGrid.js#L2136
// Pager 초기화 로직
setPager = function (pgid, tp) {
var sep = "<td class='ui-pg-button ui-state-disabled' style='width:4px;'><span class='ui-separator'></span></td>",
pginp = "",
pgl = "<table cellspacing='0' cellpadding='0' border='0' style='table-layout:auto;' class='ui-pg-table'><tbody><tr>",
str = "", pgcnt, lft, cent, rgt, twd, tdw, i,
clearVals = function (onpaging) {
var ret;
// (문서에서 공식적으로 제공하는) onPaging 이벤트 함수를 호출
if ($.isFunction(ts.p.onPaging)) { ret = ts.p.onPaging.call(ts, onpaging); }
if (ret === 'stop') { return false; }
ts.p.selrow = null;
if (ts.p.multiselect) { ts.p.selarrrow = []; setHeadCheckBox(false); }
ts.p.savedRow = [];
return true;
};
pgid = pgid.substr(1);
tp += "_" + pgid;
pgcnt = "pg_" + pgid;
lft = pgid + "_left"; cent = pgid + "_center"; rgt = pgid + "_right";
$("#" + $.jgrid.jqID(pgid))
.append("<div id='" + pgcnt + "' class='ui-pager-control' role='group'><table cellspacing='0' cellpadding='0' border='0' class='ui-pg-table' style='width:100%;table-layout:fixed;height:100%;' role='row'><tbody><tr><td id='" + lft + "' align='left'></td><td id='" + cent + "' align='center' style='white-space:pre;'></td><td id='" + rgt + "' align='right'></td></tr></tbody></table></div>")
.attr("dir", "ltr");
if (ts.p.rowList.length > 0) {
str = "<td dir='" + dir + "'>";
str += "<select class='ui-pg-selbox' role='listbox' " + (ts.p.pgrecs ? "title='" + ts.p.pgrecs + "'" : "") + ">";
var strnm;
for (i = 0; i < ts.p.rowList.length; i++) {
strnm = ts.p.rowList[i].toString().split(":");
if (strnm.length === 1) {
strnm[1] = strnm[0];
}
str += "<option role=\"option\" value=\"" + strnm[0] + "\"" + ((intNum(ts.p.rowNum, 0) === intNum(strnm[0], 0)) ? " selected=\"selected\"" : "") + ">" + strnm[1] + "</option>";
}
str += "</select></td>";
}
if (dir === "rtl") { pgl += str; }
if (ts.p.pginput === true) { pginp = "<td dir='" + dir + "'>" + $.jgrid.format(ts.p.pgtext || "", "<input class='ui-pg-input' type='text' size='2' maxlength='7' value='0' role='textbox'/>", "<span id='sp_1_" + $.jgrid.jqID(pgid) + "'></span>") + "</td>"; }
if (ts.p.pgbuttons === true) {
var po = ["first" + tp, "prev" + tp, "next" + tp, "last" + tp]; if (dir === "rtl") { po.reverse(); }
pgl += "<td id='" + po[0] + "' class='ui-pg-button ui-corner-all' " + (ts.p.pgfirst ? "title='" + ts.p.pgfirst + "'" : "") + "><span class='ui-icon ui-icon-seek-first'></span></td>";
pgl += "<td id='" + po[1] + "' class='ui-pg-button ui-corner-all' " + (ts.p.pgprev ? "title='" + ts.p.pgprev + "'" : "") + "><span class='ui-icon ui-icon-seek-prev'></span></td>";
pgl += pginp !== "" ? sep + pginp + sep : "";
pgl += "<td id='" + po[2] + "' class='ui-pg-button ui-corner-all' " + (ts.p.pgnext ? "title='" + ts.p.pgnext + "'" : "") + "><span class='ui-icon ui-icon-seek-next'></span></td>";
pgl += "<td id='" + po[3] + "' class='ui-pg-button ui-corner-all' " + (ts.p.pglast ? "title='" + ts.p.pglast + "'" : "") + "><span class='ui-icon ui-icon-seek-end'></span></td>";
} else if (pginp !== "") { pgl += pginp; }
if (dir === "ltr") { pgl += str; }
pgl += "</tr></tbody></table>";
if (ts.p.viewrecords === true) { $("td#" + pgid + "_" + ts.p.recordpos, "#" + pgcnt).append("<div dir='" + dir + "' style='text-align:" + ts.p.recordpos + "' class='ui-paging-info'></div>"); }
$("td#" + pgid + "_" + ts.p.pagerpos, "#" + pgcnt).append(pgl);
tdw = $(".ui-jqgrid").css("font-size") || "11px";
$(document.body).append("<div id='testpg' class='ui-jqgrid ui-widget ui-widget-content' style='font-size:" + tdw + ";visibility:hidden;' ></div>");
twd = $(pgl).clone().appendTo("#testpg").width();
$("#testpg").remove();
if (twd > 0) {
if (pginp !== "") { twd += 50; }
$("td#" + pgid + "_" + ts.p.pagerpos, "#" + pgcnt).width(twd);
}
ts.p._nvtd = [];
ts.p._nvtd[0] = twd ? Math.floor((ts.p.width - twd) / 2) : Math.floor(ts.p.width / 3);
ts.p._nvtd[1] = 0;
pgl = null;
// SelectBox(노출갯수) 변경 시 발생하는 이벤트
$('.ui-pg-selbox', "#" + pgcnt).bind('change', function () {
if (!clearVals('records')) { return false; }
ts.p.page = Math.round(ts.p.rowNum * (ts.p.page - 1) / this.value - 0.5) + 1;
ts.p.rowNum = this.value;
if (ts.p.pager) { $('.ui-pg-selbox', ts.p.pager).val(this.value); }
if (ts.p.toppager) { $('.ui-pg-selbox', ts.p.toppager).val(this.value); }
populate();
return false;
});
if (ts.p.pgbuttons === true) {
// Pager 버튼에 마우스 오버 했을 때 발생하는 이벤트
$(".ui-pg-button", "#" + pgcnt).hover(function () {
if ($(this).hasClass('ui-state-disabled')) {
this.style.cursor = 'default';
} else {
$(this).addClass('ui-state-hover');
this.style.cursor = 'pointer';
}
}, function () {
if (!$(this).hasClass('ui-state-disabled')) {
$(this).removeClass('ui-state-hover');
this.style.cursor = "default";
}
});
// 처음, 이전, 다음, 마지막 버튼 클릭 시 발생하는 이벤트
$("#first" + $.jgrid.jqID(tp) + ", #prev" + $.jgrid.jqID(tp) + ", #next" + $.jgrid.jqID(tp) + ", #last" + $.jgrid.jqID(tp)).click(function () {
if ($(this).hasClass("ui-state-disabled")) {
return false;
}
var cp = intNum(ts.p.page, 1),
last = intNum(ts.p.lastpage, 1), selclick = false,
fp = true, pp = true, np = true, lp = true;
if (last === 0 || last === 1) { fp = false; pp = false; np = false; lp = false; }
else if (last > 1 && cp >= 1) {
if (cp === 1) { fp = false; pp = false; }
else if (cp === last) { np = false; lp = false; }
} else if (last > 1 && cp === 0) { np = false; lp = false; cp = last - 1; }
if (!clearVals(this.id)) { return false; }
if (this.id === 'first' + tp && fp) { ts.p.page = 1; selclick = true; }
if (this.id === 'prev' + tp && pp) { ts.p.page = (cp - 1); selclick = true; }
if (this.id === 'next' + tp && np) { ts.p.page = (cp + 1); selclick = true; }
if (this.id === 'last' + tp && lp) { ts.p.page = last; selclick = true; }
if (selclick) {
populate();
}
return false;
});
}
if (ts.p.pginput === true) {
// input 요소에서 엔터 클릭 시 이벤트 발생
$('input.ui-pg-input', "#" + pgcnt).keypress(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key === 13) {
if (!clearVals('user')) { return false; }
$(this).val(intNum($(this).val(), 1));
ts.p.page = ($(this).val() > 0) ? $(this).val() : ts.p.page;
populate();
return false;
}
return this;
});
}
}
위와 같이 모든 Pager 액션에 대한 이벤트는 결과적으로 onPaging 이벤트 함수를 호출하게되며, onPaging 에서 문자열 'stop' 반환 시 paging 로직은 중단된다.
setPager는 jqGrid가 초기화 될 때 한번만 수행되는 로직이다보니 개발자가 직접 호출할일이 없다.
댓글
댓글 쓰기