환경: jqGrid v4.7.1 이하 (무료버전)
아래 모습에서 페이지를 이동 및 페이지 갯수 설정을 위한 액션을 취할 때 발생하는 이벤트를 호출하는 Pager의 초기화 로직을 알아본다.
jqGrid 가 초기화 될 때 다음과 같은 로직이 수행된다.
1004lucifer
https://github.com/tonytomov/jqGrid/blob/v4.7.1/js/jquery.jqGrid.js#L2136
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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가 초기화 될 때 한번만 수행되는 로직이다보니 개발자가 직접 호출할일이 없다.
댓글
댓글 쓰기