본문 바로가기

grid3

AX5UI - GRID 6 (페이징) 그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다. 그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다. 테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다. 1. 필요한 스크립트들을 로드합니다. 2. 그리드 변수를 선언합니다. 그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다. 3. 그리드 설정에 페이징 정보를 추가합니다. page: { navigationItemCount: 9, height: 30, display: true, firstIcon: '||', onChan.. 2018. 4. 9.
AX5UI - GRID 3 (Row 와 Column 다루기) 이번에는 AX5UI 그리드에서 행과 열을 추가, 수정, 삭제 하는 방법을 알아 봅니다. "AX5UI - GRID 1 (기본 사용법)" 에서 사용된 예제에 기능을 추가해서 테스트 했습니다. 다음 내용들이 테스트 소스에 수정 및 추가된 내용들 입니다. 행을 추가하는 addRow 메소드 실행시 오류가 #31 번 패치로 수정되었는데, ax5ui-kernel에는 아직 반영되지 않은것 같습니다. ax5grid.min.js 를 직접 사용합니다. 이때는 ax5core.min.js도 함께 포함해야 합니다. 버튼을 추가합니다. 행 추가 행 삭제 행 업데이트 열 추가 열 삭제 열 수정 이벤트 핸들러를 추가합니다. 실행화면입니다. 1. 행 추가 행의 추가는 그리드의 addRow 메소드를 사용합니다. ax5grid.addRow.. 2018. 4. 4.
AX5UI - GRID 1 (기본 사용법) 업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다. 초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다. 다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다. 업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 .. 2018. 4. 3.