화면과 내부로직(DB연동)은 jsp로 되어 있으며, DB는 오라클 10g를 사용하고 있다.
이전 회사에서는 가우스 프레임워크를 구매해사 사용하였다. 덕분에, 그리드 상에서 손쉽게 추가, 수정, 삭제를 처리할 수 있었다.
그런데 지금은 매우 로우한 단계에서 개발이 되어 있는 시스템이다 보니 그리드 상에서 멀티 로우 컨트롤이 불가능하다.
현재까지 사용하는 방식은 html 상에서 목록을 보여주고 그 목록 중에서 하나를 선택하여 html 폼을 만들어서 한 건의 데이터만 추가/수정/삭제가 가능한 상태이다.
그리드 상에서 여러 건의 데이터를 처리하는 부분을 직접 만들어 보고자 한다.
매우 간단하게 기능만 되도록 구현한 후에 필요에 따라서 조금씩 업그레이드 시켜 나가도록 해 볼 것이다.
가장 최상의 경우는 프레임워크처럼 개발자가 헤더를 설정하면 그 상태 그대로 만들어 주면서 추가/수정/삭제 기능을 수행하면 가장 베스트한 경우이지만 맨 땅에서 헤딩을 해야 하기 때문에 좀 힘들었고 일단 화면이 빨리 나와야 해서...^^;
우선, html을 이런 식으로 꾸몄다. 이것이 1row이다.
DB를 읽어와서 DB에 있는 레코드만큼 반복문으로 수행하면서 1개의 ROW를 이런 식으로 설정하였다. 그러면서 컬럼명과 몇번째 row인지를 표현하도록 하였다. 로우 아이디 형태는 row+줄번호
삭제 같은 경우는 1row로 수행하기로 하였다. 그래서 매 줄마다 삭제 버튼이 생성되도록 하였다. 그리고 이런 식으로 DB에서 가져온 데이터의 경우에는 row_stat 값을 -로 설정해 주었다.
이 부분까지가 기본적인 html 그리드 기본구성이다.
row_stat 칼럼의 값은 -이며, 각 로우마다 삭제 버튼을 통해서 삭제를 수행하는 함수를 호출한다.
이제, 새로운 로우를 추가하는 부분을 구현해 보기로 한다.
잠시 빼 먹은 부분이 있는데 html 상의 table의 id는 oTable이라고 명명하였다.
table 위에 부분에 추가 버튼을 만들어 두었고 추가 버튼을 클릭할 때마다 이 함수가 실행되면서 html 상에서 로우를 추가해 나간다.
우선 insertRow함수를 통해서 맨 아래 부분에 1 로우를 생성한다.
그리고 그 로우의 아이디를 지어준다. 이렇게 해야 해당 로우를 바로 삭제할 수 있다.
그리고 기존에 있는 로우와 동일한 구성이되, 값 빈 값으로 해서 만들어 준다.
그리고 기억할 점은 text와 1:1로 대응되는 hidden input을 만들어 준다는 점이다.
row_stat은 +로 처리한다.
이렇게 하는 이유는 +로 되어 있는 경우는 사용자가 화면 상에서만 추가한 로우이기 때문에 html 상에서만 삭제해 주면 되기 때문이다. DB에 갖다오려면 화면을 리로드해야 하고 다른 로우의 수정사항이 다 사라져 버리니깐..ㅜㅜ
그 다음은 삭제 부분이다.
row_stat에 따라서 수행되는 작업이 달라진다.
+라면 그것은 화면 단에서만 생성된 로우이기 때문에 row.parentNode.removeChild(row ID)를 실행하여 가볍게 화면 단에서만 처리한다.
-라면 이것은 DB에 저장되어 있는 로우이기 때문에 삭제할 것인지 물어본 다음에 submit으로 폼을 넘겨서 오라클에서 삭제처리하고 화면을 다시 로딩한다.
이 부분이 업그레이드가 필요한 부분이다. 나중에는 그리드 상에서 삭제 표시를 하고 저장 버튼으로 한번에 추가, 수정, 삭제를 처리하도록 할 예정이다.
다음으로 추가/수정 건에 대한 저장 기능이다.
DB에서 값이 가져오거나 add_row함수를 통해서 화면 단에서만 새롭게 만들어주는 로우에도 각 칼럼당 두 개의 input을 만들었던 것을 기억할 것이다.
그렇게 한 이유는 추가/수정 여부를 확인하고 변경되거나 추가된 내용이 없을 시에 불필요한 submit를 제한하기 위함이다.
text input과 hidden input값을 비교하여 서로 달라진 내용이 있다면 그 값을 list에 넣는다.
하지만 그리드 전체적으로 그러한 내용이 없다면 변경된 내용이 없음을 알리고 함수는 종료된다.
list에 넣을 때에 여러 로우를 한번에 변경하거나 추가하는 경우가 있을 수 있는데 그것을 분류하기 위해서
칼럼들은 ☏로 구분하였고 각 로우는 ☎으로 구분하였다.
그렇기 때문에 위에서 ☎와 ☏는 사용할 수 없는 특수문자로 정하였다.
이렇게 하면서 그리드 상에서 멀티 추가/수정 및 삭제 기능이 기본적으로 작동이 되도록 하였다.
하지만 이렇게 만들어 놓고 나니 문제가 조금 있었다.
- 테이블의 성격에 따라서 숫자만 입력되어야 하는 input도 있었다.
- 특수문자로 인해서 생기는 문제가 있었다. html상에서 바로 폼을 전송하지 않고 javascript상에서 html input에 값을 넣
어주는데 그로 인해서 html 상에서 자동적으로 처리해 주는 작업을 하지 않았다. html에 태그로 사용할 수 있는 특수문자가 입력되면 html상에서 정해진 규칙대로 변형을 해 주는데 그것이 자동으로 이루어지지 않았다.
그리고 그렇게 변형되지 않는 특수문자는 오라클 DB에서도 문제가 발생하였다.
문제가 되는 특수문자 : < > " ' & %
- 그리고, 한글 사용으로 인항 인코딩 문제가 있었다.
앞으로 하나씩 정리해 보겠다.
'나의 하루 > JSP' 카테고리의 다른 글
| html request 값 목록 확인하기 (0) | 2017.04.07 |
|---|