자바스크립트 그리드4 AX5UI - GRID 6 (페이징) 그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다. 그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다. 테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다. 1. 필요한 스크립트들을 로드합니다. 2. 그리드 변수를 선언합니다. 그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다. 3. 그리드 설정에 페이징 정보를 추가합니다. page: { navigationItemCount: 9, height: 30, display: true, firstIcon: '||', onChan.. 2018. 4. 9. AX5UI - GRID 5 (인라인 에디트) 그리드의 내용을 바로 수정할 수 있는 inline edit 를 테스트 해 보았습니다. 인라인 에디터는 다음과 같은 7가지 타입이 있습니다. - text 타입 : 한줄 입력 필드입니다. - money 타입 : money포맷 숫자 입니다. - number 타입 : 숫자만 입력됩니다. - date 타입 : 캘린더로 날짜를 입력할 수 있습니다. 날짜 포맷은 yyyy-mm-dd 입니다. - select 타입 : 셀렉트 박스로 아이템을 선택할 수 있습니다. - checkbox 타입 : 체크박스로 선택 할 수 있습니다. 값은 문자열 "true" 또는 "false" 입니다. - textarea 타입 : 여러행의 글을 입력할 수 있습니다. 사용방법을 보도록 하겠습니다. 1. 필요한 스트일시트와 js 파일을 불러 들입니다.. 2018. 4. 9. AX5UI - GRID 1 (기본 사용법) 업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다. 초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다. 다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다. 업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 .. 2018. 4. 3. AX5UI - 소개(JavaScript UI Component) 웹으로 업무용 프로그램을 개발 하면서 사용자 인터페이스로 사용되는 컴포넌트들 중 가장 복잡한 것은 GRID 인것 같습니다. 그래서 기능도 좋고 사용하기 편리한 제품이 있는지 종종 찾아보게 됩니다. ActiveX, Flash, JavaScript 등으로 만들어진 많은 제품 들이 있습니다만, 요즘은 웹표준과 크로스 브라우저를 원하는 경우가 많아서 ActiveX 나 플래시 제품보다는 HTML5를 지원하는 JavaScript 제품에 대한 선호가 높아지고 있습니다. 이러한 웹용 UI 컴포넌트들은 아주 고가이거나, 오픈소스이면 GPL 로 배포되므로 상업용으로 사용할 수 없는 경우가 대부분입니다. 그러던 중, MIT 라이센스 이면서 국내 개발자들에 의해 개발되고 있는 JavaScript UI 컴포넌트인 AX5UI 를.. 2018. 4. 3. 이전 1 다음
