[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");
	}

view raw jquery.jqGrid.js hosted with ❤ by GitHub

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


jqGridGridComplete / gridComplete / jqGridAfterGridComplete

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