AX5UI GRID3 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 4 (총계와 소계) 이번에는 그리드에서 총계와 소계를 표현하는 방법을 알아 봅니다. 1. 그리드에 계산열 추가 - 그리드내의 다른 컬럼 값으로 계산된 값을 가지는 컬럼을 추가 합니다. - "unitPrice"는 그리드의 데이터에는 없는 값이지만, 금액을 주유량으로 나눈값으로 리터당 단가를 표시합니다. columns: [ { key: "unitPrice", label: "단가", formatter: function() { return ax5.util.number(this.item.price / this.item.amount, {"money": true}); }, align:"center" } ] 2. 그리드내의 소계 - 소계는 지정된 기준 컬럼에 대해 오름차순으로 정렬할 후 동일한 값끼리 그룹핑하여 소계를 보여줍니다.(처음 .. 2018. 4. 4. AX5UI - GRID 1 (기본 사용법) 업무용 웹 프로그램에서 데이터를 표현하는데 테이블 형식을 많이 사용합니다. 초기 웹 프로그래밍에서는 지금도 많이 사용되는 게시판 프로그래밍처럼 데이터는 태그를 사용해서 보여주고, 내용의 입력 또는 수정 작업을 위해서는 다른 페이지로 이동하여 작업을 하는 형태를 사용했습니다. 이러한 형태는 화면전환이 계속 발생하게 됩니다. 다음으로 사용하던 형태는 테이블의 각 셀에 입력 필드(inut tag)를 사용해서 데이터를 보여주고, 입력/수정할 수도 있게 하고, 실제 데이터를 서버로 전송해서 처리하는 작업은 JavaScript를 이용해서 숨겨진 iframe을 통해 처리하는 방식을 사용했습니다. 화면 전환 없이 한 화면에서 모두 처리할 수 있었습니다. 업무용 C/S 프로그램들이 웹프로그램으로 점점 더 많이 전환되기 .. 2018. 4. 3. 이전 1 다음
