Translate

[jqGrid] setPager 로직 설명 (Pager 초기화)







환경: 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가 초기화 될 때 한번만 수행되는 로직이다보니 개발자가 직접 호출할일이 없다.

댓글