[jqGrid] updatepager 메소드 설명

 [ jqGrid 한글 API 문서 링크 ]

환경: jqGrid v4.7.1 이하 (무료버전)



개별적으로 사용도 가능하며, jqGrid 내부에서 빈번하게 사용이 이루어지는 updatepager 메소드에 대해서 알아본다.
1004lucifer
https://github.com/tonytomov/jqGrid/blob/v4.7.1/js/jquery.jqGrid.js#L1903

updatepager = function (rn, dnd) {
  var cp, last, base, from, to, tot, fmt, pgboxes = "", sppg,
    tspg = ts.p.pager ? "_" + $.jgrid.jqID(ts.p.pager.substr(1)) : "",
    tspg_t = ts.p.toppager ? "_" + ts.p.toppager.substr(1) : "";
  base = parseInt(ts.p.page, 10) - 1;
  if (base < 0) { base = 0; }
  base = base * parseInt(ts.p.rowNum, 10);
  to = base + ts.p.reccount;

  // 동적 그리드 스크롤 사용시 로직
  if (ts.p.scroll) {
    var rows = $("tbody:first > tr:gt(0)", ts.grid.bDiv);
    base = to - rows.length;
    ts.p.reccount = rows.length;
    var rh = rows.outerHeight() || ts.grid.prevRowHeight;
    if (rh) {
      var top = base * rh;
      var height = parseInt(ts.p.records, 10) * rh;
      $(">div:first", ts.grid.bDiv).css({ height: height }).children("div:first").css({ height: top, display: top ? "" : "none" });
      if (ts.grid.bDiv.scrollTop == 0 && ts.p.page > 1) {
        ts.grid.bDiv.scrollTop = ts.p.rowNum * (ts.p.page - 1) * rh;
      }
    }
    ts.grid.bDiv.scrollLeft = ts.grid.hDiv.scrollLeft;
  }

  // Pager가 있는경우
  pgboxes = ts.p.pager || "";
  pgboxes += ts.p.toppager ? (pgboxes ? "," + ts.p.toppager : ts.p.toppager) : "";
  if (pgboxes) {
    fmt = $.jgrid.formatter.integer || {};
    cp = intNum(ts.p.page);
    last = intNum(ts.p.lastpage);
    $(".selbox", pgboxes)[this.p.useProp ? 'prop' : 'attr']("disabled", false);

    // 페이지 input 항목이 있는경우 해당 값 업데이트
    if (ts.p.pginput === true) {
      $('.ui-pg-input', pgboxes).val(ts.p.page);
      sppg = ts.p.toppager ? '#sp_1' + tspg + ",#sp_1" + tspg_t : '#sp_1' + tspg;
      $(sppg).html($.fmatter ? $.fmatter.util.NumberFormat(ts.p.lastpage, fmt) : ts.p.lastpage);

    }

    // (시작/끝 레코드번호) viewrecords 항목이 있는경우 해당 값 업데이트
    if (ts.p.viewrecords) {
      if (ts.p.reccount === 0) {
        $(".ui-paging-info", pgboxes).html(ts.p.emptyrecords);
      } else {
        from = base + 1;
        tot = ts.p.records;
        if ($.fmatter) {
          from = $.fmatter.util.NumberFormat(from, fmt);
          to = $.fmatter.util.NumberFormat(to, fmt);
          tot = $.fmatter.util.NumberFormat(tot, fmt);
        }
        $(".ui-paging-info", pgboxes).html($.jgrid.format(ts.p.recordtext, from, to, tot));
      }
    }

    // Pager 버튼 (기본값:true)사용하면 모습 업데이트
    if (ts.p.pgbuttons === true) {
      if (cp <= 0) { cp = last = 0; }
      if (cp === 1 || cp === 0) {
        $("#first" + tspg + ", #prev" + tspg).addClass('ui-state-disabled').removeClass('ui-state-hover');
        if (ts.p.toppager) { $("#first_t" + tspg_t + ", #prev_t" + tspg_t).addClass('ui-state-disabled').removeClass('ui-state-hover'); }
      } else {
        $("#first" + tspg + ", #prev" + tspg).removeClass('ui-state-disabled');
        if (ts.p.toppager) { $("#first_t" + tspg_t + ", #prev_t" + tspg_t).removeClass('ui-state-disabled'); }
      }
      if (cp === last || cp === 0) {
        $("#next" + tspg + ", #last" + tspg).addClass('ui-state-disabled').removeClass('ui-state-hover');
        if (ts.p.toppager) { $("#next_t" + tspg_t + ", #last_t" + tspg_t).addClass('ui-state-disabled').removeClass('ui-state-hover'); }
      } else {
        $("#next" + tspg + ", #last" + tspg).removeClass('ui-state-disabled');
        if (ts.p.toppager) { $("#next_t" + tspg_t + ", #last_t" + tspg_t).removeClass('ui-state-disabled'); }
      }
    }
  }

  // rownumbers 값 업데이트
  if (rn === true && ts.p.rownumbers === true) {
    $(">td.jqgrid-rownum", ts.rows).each(function (i) {
      $(this).html(base + 1 + i);
    });
  }

  // (그리드간 row 드래그&드롭) gridDnD 업데이트
  if (dnd && ts.p.jqgdnd) { $(ts).jqGrid('gridDnD', 'updateDnD'); }

  // jqGridGridComplete 이벤트함수 호출
  $(ts).triggerHandler("jqGridGridComplete");

  // gridComplete 이벤트 함수가 구현된경우 해당 함수를 호출 - 그리드 body(Table)을 this로 넘겨줌
  if ($.isFunction(ts.p.gridComplete)) { ts.p.gridComplete.call(ts); }

  // jqGridAfterGridComplete 이벤트함수 호출
  $(ts).triggerHandler("jqGridAfterGridComplete");
}

소스를 보니 왜 공식 문서에서 updatepager 를 포함시키지 않았는지 이해가 갔다.


jqGridGridComplete / gridComplete / jqGridAfterGridComplete

위 이벤트함수가 호출되기 때문에 무분별하게 사용하면 위 함수의 사용목적에 맞지 않는 상황에서 호출이 될 수 있기 때문에 사용하지 말라고 공식문서에 포함 시키지 않은것으로 생각이 된다.