[Nexacro + Spring Boot] 넥사크로(3/3) - 페이징

마지막으로 페이징을 만들어보자.

 

 

Paging_Form 디자인

 

우선 Paging_Form은 Form_Work 내 Div01 영역에 들어갈 예정이다.

고로 Div01의 사이즈에 맞아야 하므로, 우선 Div01의 사이즈를 확인한다.

 

별 건 없고 Div00 우클릭 후 Position Editor를 눌러 사이즈를 확인하면 된다.

 

310*60으로 확인됐다.

그러면 이제 Paging_Form도 동일한 사이즈로 만들어놓자.

 

그리고 양 쪽 끝에 각각 두 개의 버튼과, 가운데에는 Grid를 추가한다.

 

그리고 아래 작업을 수행한다.

1. 첫 번째 버튼
   1. id를 pprev으로 수정
   2. text를 "<<"로 수정
2. 두 번째 버튼
   1. id를 prev로 수정
   2. text를 "<"로 수정
3. 세 번째 버튼
   1. id를 next로 수정
   2. text를 ">"로 수정
4. 네 번째 버튼
   1. id를 nnext로 수정
   2. text를 ">>"로 수정
5. 데이터셋 추가
   1. 이름을 pageDs로 변경
   2. 컬럼에 no1, no2, no3, no4, no5 추가 (String)
   3. grid에 바인딩

 

위 작업을 마쳤다면 아마 아래와 같은 그림이 나올 것이다.

 

페이징 부분이 너무 꼴보기 싫으니, grid를 더블클릭해서 디자인을 고쳐주자.

 

우선 사이즈를 조정해주었다.

 

그리고 페이징에서는 헤더가 필요하지 않으니, 삭제해준다.

 

마지막으로 row 높이를 조금 조정해준 후 OK버튼을 눌러 종료한다.

 

다만 지금은 괜찮아보일지 몰라도, 실제로 실행시키면 저 grid 안에 스크롤이 생겨서 페이지가 잘 안보인다.

이렇게됨

 

고로 grid의 스크롤이 보이지 않도록 옵션을 꺼주자.

scrollbartype을 "none none"으로 바꿔주기만 하면 된다.

여기까지만 하면 디자인은 끝이다.

 

 

스크립트 만들기

 

만들어야할 스크립트는 크게 여섯 가지이다.

1. grid내에 페이지를 동적으로 로딩하는 함수
2. 페이지 클릭 시 동작할 함수
3. pprev 버튼 클릭 시 동작 함수
4. prev 버튼 클릭 시 동작 함수
5. nnext 버튼 클릭 시 동작 함수
6. next 버튼 클릭 시 동작 함수

 

우선 1번인 grid내 페이지를 동적으로 로딩하는 함수를 만들어보자.

 

이미 이전 포스팅의 코딩에서 GET API는 최대 페이지 수를 return하도록 해놓았다.

 

고로 GET API를 사용할 떄마다 저 maxPage를 가져와서 이를 토대로 1~5, 6~10 처럼 5페이지 기준으로 페이지를 만들어주면 된다.

 

다음과 같이 코딩을 해보자.

var page_now = 1;
var max = 1;

this.load_page = function(page, maxPage) {

	// 최대 페이지수 설정
	page_now = page;
	max = maxPage;

	// start 설정 (1, 6, 11 ...)
	var start = page - (page%5) + 1;
	if(page%5 == 0) {
		start = page - 4;
	}
	
	// end 설정 (5, 10, 15 ...)
	var end = start + 4;
	if(maxPage < end) {
		end = maxPage;
	}
	
	// 데이터셋 초기화 후 삽입
	this.pageDs.clearData();
	var row = this.pageDs.addRow();
	
	this.pageDs.setColumn(row, "no1", start);
	if(start+1 <= end) {
		this.pageDs.setColumn(row, "no2", start+1);
		if(start+2 <= end) {
			this.pageDs.setColumn(row, "no3", start+2);
			if(start+3 <= end) {
				this.pageDs.setColumn(row, "no4", start+3);
				if(start+4 <= end) {
					this.pageDs.setColumn(row, "no5", start+4);
				}
			}
		}
	}
}

 

코딩이 완료됐다면 이제 Form_Work로 돌아가자.

 

우선 비어있는 Div01에 Paging_Form을 할당한다.

 

 

그리고 데이터를 불러오는 함수인 loadUserGrid 함수를 수정한다.

 

별 건 없고, 위에서 말한 maxPage을 파라미터로 해서 Paging_Form 내의 load_page를 실행하기만 하면 된다.

아래 코드를 데이터를 불러오는 부분에 추가하자.

// Div01(Paging_Form) 내 load_page 함수 호출
// (내부 함수 안에 있어서 this가 아니라 that이니 혼동하지 말자.)
that.Div01.form.load_page(response.page, response.maxPage);

 

Form_Work 내 loadUserGrid에 추가

 

이제 한 번 실행을 시켜보자.

가능하면 align 설정도 하자.

 

 

페이지가 잘 출력되었으니, 이제 다음으로 넘어가 각 페이지를 눌렀을 떄의 액션 함수를 짜보자.

 

우선 메인 프레임에서 데이터를 로드하는 함수은 loadUserGrid를 호출하는 함수를 짠다.

this.move_page = function(page) {
	this.getOwnerFrame().form.loadUserGrid(page);
}

 

그리고 그리드 내 페이지를 누를 떄마다 방금 짠 코드를 호출하는 함수를 생성하자.

 

그리드이기 때문에 이전과 마찬가지로 oncellclick을 더블클릭해서 함수를 자동으로 생성한다.

 

자동으로 만들어진 함수를 채워넣어주자.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
    var rowIndex = e.row;
    var colIndex = e.col;
	
	// 클릭한 셀의 value 추출
	var colInfo = this.pageDs.getColumnInfo(colIndex);
	var colId = colInfo.id;
	var value = this.pageDs.getColumn(rowIndex, colId);
	
	// valu가 
	if(value != null && typeof value !== 'undefined' && value != 0) {
		this.move_page(value);
	}
};

 

그리고 하는 김에 prev, pprev, next, nnext 함수도 채워보자.

각각 버튼을 더블클릭해서 onclick 함수를 만들고, 그 안을 채워넣으면 된다.

this.pprev_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.move_page(1);
};

this.prev_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(page_now != 1) {
		this.move_page(page_now - 1);
	}
	else {
		this.move_page(1);
	}
};

this.next_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(page_now != max) {
		this.move_page(page_now + 1);
	}
	else {
		this.move_page(max);
	}
};

this.nnext_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.move_page(max);
};

 

 

 

테스트

 

이제 테스트를 한 번 해보자.

 

테스트에 앞서 데이터를 조금 채워넣기 위해 ApiController의 @PostConstruct를 일부 수정했다.

@PostConstruct
public void init() {
    String[] names = {
        "Kim", "Lee", "Park", "Choi", "Jung",
        "Kang", "Cho", "Yoon", "Jang", "Lim",
        "Oh", "Han", "Shin", "Seo", "Kwon",
        "Hwang", "Ahn", "Song", "Ryu", "Hong"
    };
    Random random = new Random();

    for(int i=0; i<70; i++) {
        Map<String, Object> user = new HashMap<>();

        user.put("idx", cnt.incrementAndGet());
        user.put("name", names[random.nextInt(names.length)]);
        user.put("age", random.nextInt(100) + 1);

        userList.add(user);
    }

}

 

이제 테스트를 해보면 페이징도 정상적으로 동작함을 확인할 수 있다.

 

마지막으로 Paging_Form의 모든 Script를 공개하며 넥사크로 포스팅을 마치겠다.

var page_now = 1;
var max = 1;

this.load_page = function(page, maxPage) {

	// 최대 페이지수 설정
	page_now = page;
	max = maxPage;

	// start 설정 (1, 6, 11 ...)
	var start = page - (page%5) + 1;
	if(page%5 == 0) {
		start = page - 4;
	}
	
	// end 설정 (5, 10, 15 ...)
	var end = start + 4;
	if(maxPage < end) {
		end = maxPage;
	}
	
	// 데이터셋 초기화 후 삽입
	this.pageDs.clearData();
	var row = this.pageDs.addRow();
	
	this.pageDs.setColumn(row, "no1", start);
	if(start+1 <= end) {
		this.pageDs.setColumn(row, "no2", start+1);
		if(start+2 <= end) {
			this.pageDs.setColumn(row, "no3", start+2);
			if(start+3 <= end) {
				this.pageDs.setColumn(row, "no4", start+3);
				if(start+4 <= end) {
					this.pageDs.setColumn(row, "no5", start+4);
				}
			}
		}
	}
}



this.move_page = function(page) {
	this.getOwnerFrame().form.loadUserGrid(page);
}

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
    var rowIndex = e.row;
    var colIndex = e.col;
	
	// 클릭한 셀의 value 추출
	var colInfo = this.pageDs.getColumnInfo(colIndex);
	var colId = colInfo.id;
	var value = this.pageDs.getColumn(rowIndex, colId);
	
	// valu가 
	if(value != null && typeof value !== 'undefined' && value != 0) {
		this.move_page(value);
	}
};

this.pprev_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.move_page(1);
};

this.prev_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(page_now != 1) {
		this.move_page(page_now - 1);
	}
	else {
		this.move_page(1);
	}
};

this.next_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(page_now != max) {
		this.move_page(page_now + 1);
	}
	else {
		this.move_page(max);
	}
};

this.nnext_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.move_page(max);
};