웹시트(WebSheet)

안낭하세요. 웹시트 관리자 입니다.

저희 웹시트가 엑셀처럼 입력이 간편하다고 강조 하고 있는데요.

이번 글에서는 그리드 편집 기능에 대하여 설명하면서 얼마나 엑셀과 입력 방식이 비슷한지 알아보셨으면 합니다.

위 화면은 각 기업에서 이해를 돕기 위해서 데모사이트에 구현된 제품 관리 화면입니다.

해당 화면에서 데이터 부분을 보시면 노란색 배경색으로 이루어진 셀이 있고 그렇지 않은 셀이 있는데요.

노란색 배경부분이 수정가능한 셀이고 그 나머지는 수정 불가능한 셀입니다.

* 수정

한 셀을 선택해서 엔터를 누르시거나 마우스 더블 클릭을 해보시면 수정 화면이 뜨게 됩니다.

엑셀을 아시는 분이라면 누구나 어떤 상황인지 이해하실수 있을겁니다.

해당 셀을 수정하기 위한 상태입니다.

해당 상태에서 내용을 입력하고 마우스로 다른 위치에 셀을 클릭해보세요

수정을 한 후에는 왼쪽에 수정을 했다는 표시의 아이콘이 표현되고 오른쪽 수정한 부분에 수정된 내용이 표현됩니다.

사용자 입력이 엑셀과 비슷하다는 걸 아실수 있습니다. 물론 셀을 선택하고 바로 입력하더라도 같은 결과를 보실수 있습니다.

* 추가

우측 상단에 (+) 버튼을 클릭하면 아래쪽에 빈행을 확인 하실수 있습니다.

해당 데이터 왼쪽에는 + 아이콘이 표현되어 행이 추가 되었음을 확인 하실 수 있습니다.

행이 추가되면 편집방법을 이용하여 내용을 편집하여 저장 하실수 있습니다.

* 삭제

왼쪽의 이미지 처럼 삭제하고자 하는 대상을 체크박스에 체크 처리합니다.

이후 (-) 버튼을 클릭하면 아래 X표시가 되는데요. 삭제를 할 대상으로 표시됩니다.

이후 저장 버튼을 이용하여 저장을 하면 최종 삭제 처리 됩니다.

* 복사 붙여 넣기

위 이미지 처럼 복사할 대상을 마우스 클릭 후 이용하여 블록을 설정한 후 컨트롤 + C 키입력을 하여 내용을 복사합니다.

붙여넣기 할 위치에 셀위치를 옮기고 컨트롤 + V 키를 입력하여 붙여넣기를 합니다.

보시는 것과 같이 엑셀에서 데이터를 복사하여 다른 위치에 붙여넣기를 아무 간편하게 하실 수 있습니다.

데이터 왼쪽부분에 수정 한 행에 대하여 표시가 되어 수정했는지 여부를 바로 확인 하실 수 있습니다.

* 엑셀 복사 붙여 넣기

엑셀에서 복사 할 내용을 컨트롤 + C를 이용하여 복사합니다.

그리드에 붙여넣기 할 셀을 선택 후 컨트롤 + V를 이용하여 붙여넣기합니다.

위 이미지처럼 간단하게 엑셀에 있는 내용을 복사 붙여넣기 할 수 있습니다.

반대로 그리드에 있는 내용을 복사하여 엑셀에 붙여도기 또한 가능하여 그리드내용을 엑셀로 가져와

작업 한 후 다시 그리드로 복사붙여넣기하는 등의 응용이 가능합니다.

보기에는 별거 아닌거 같지만 게시판 형태로 된 등록 화면과 비교한다면 정말 편하게 작업이 가능하고 프로그래밍된 화면이여서 데이터 정합성에도 효율적입니다.

한번 여러분도 테스트 해보십시요.

테스트 URL은 왼쪽 상단에 링크가 있으니 참고 부탁드립니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

이번 글에서는 프로필 화면에 대하여 설명드리겠습니다.

프로필 화면은 로그인한 유저의 개인 정보 및 즐겨찾기 정보를 수정 할수 있는 화면입니다.

프로필 화면에서는 일반, 암호 즐겨찾기 이렇게 3가지 탭 메뉴를 제공하고 있습니다.

일반 탭의 경우 유저 정보를 확인 및 수정 가능합니다.

기본적으로 이름이나 이메일 같은 항목을 제공하지만 업체별로 요청되는 항목을 추가 시켜 드릴 수 있습니다.

암호 탭에서는 로그인 사용자의 비밀번호를 변경 하실 수 있습니다.

즐겨찾기 탭은 기존에 설명드린 즐겨찾기 기능과 관련이 있는데요.

이곳에서 조회 및 삭제, 순서 조정을 할 수 있습니다.

프로필 화면에 필요로 하는 기능은 얼마든지 추가가 가능합니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

지난 글은 그리드 자체 기능에 대하여 설명을 드렸는데요.

이번 글은 그리드와 연계되어 작동하는 버튼들에 대하여 설명 드리겠습니다.

위 이미지 중 붉은색 박스 부분을 보시면 버튼들이 보이는 데요.

각종 버튼들과 각 업체별 필요로 하는 버튼을이 추가될 화면 들입니다.

이번글은 기본적으로 제공되는 버튼들만 설명드릴 것입니다.

왼쪽부터 차례대로 간단하게 설명드리겠습니다.

1. 조회 : 조회버튼은 클린시 데이터를 조회가 되고 그리드에 표현됩니다.

               조회 버튼 왼쪽 부분에 조회 조건이 표현되는데 조건은 사용하여 필요한 정보를 조회 하 실 수 있습니다.

2. 추가(+) : 추가 버튼은 클릭 시 그리드에 행이 하나 추가되면서 필요한 정보를 추가로 등록 하실수 있습니다.

                   이때 중요한건은 추가버튼을 클릭해서 데이터를 입력했다면 반듯이 저장 버튼을 클릭 하여 저장을 

                   하셔야 합니다.

3. 삭제(-) : 삭제 버튼은 클릭 시 그리드에 선택된 데이터가 삭제 대상으로 표시하게 되고 저장 시 해당 데이터가 삭제

                  됩니다.

                   이때 중요한 것은 삭제 대상 데이터의 왼쪽 부분에 체크 박스를 클릭하고 삭제 버튼을 클릭하셔야 삭제

                   대상이 됩니다.

4. 저장 : 삭제 버튼은 클릭 시 수정한 정보, 추가, 삭제 대상을 모두 한번에 저장합니다.

              그리드 왼쪽에 수정, 추가, 삭제 대상을 아이콘으로 표현이 됩니다. 

5. 엑셀 다운로드 : 다운로드 버튼 클릭 시 그리드에 조회된 데이터가 엑셀파일 형태로 다운로드 됩니다.

6. 엑셀 업로드 : 업로드 버튼 클릭 시 그리드에 대상 데이터가 표현되고 저장 버튼 클릭 시 저장이 됩니다.

7. 개인화 : 개인화 버튼 클릭 시 그리드 상태를 설정하고 저장 할 수 있는 팝업이 뜹니다.

개인화 란?

  - 개인화는 그리드의 헤더의 순서, 가로 사이즈, 숨김여부 틀고정 여부의 정보를 각 유저별로 설정하여 저장하고 저장 후에는 개인화 적용한 화면은 다시 들어갔을때 내가 설정한 형태를 그대로 유지하여 보여주는 걸 말합니다.

위 개인화 팝업의 경우 넓이, 숨김 여부, 틀고정여부, 순서를 설정하고 저장 할 수 있습니다.

1. 초기화 : 초기화 버튼 클릭 시 개발자가 최초 세팅항 방식으로 되돌아 갑니다. 초기화 시 기존 개인화 정보는 삭제 됩니다.

2. 적용 : 적용 버튼 클릭 시 설정한 개인화를 현재 화면의 그리드에 적용합니다. 저장은 되지안기 때문에 1회성으로 처리 됩니다.

3. 저장 : 저장 버튼 클릭 시 설정한 개인화가 저장됩니다. 이후 해당 메뉴를 재방문 하여도 설정이 그대로 유지 됩니다.

4. 닫기 : 닫기 버튼 클릭 시 아무런 작업 없이 팝업이 닫힙니다.

지금까지 말씀 드린 기능들은 웹시트에서 기본적으로 제공되어지는 기능들로 업체별 특별한 기능은 얼마든지 추가 가능합니다.

단 중요한 것은 그리드 시스템의 틀을 변경하여 기존에 게시판 같은 형태로 만든다면 그리드에서 제공되어지는 모든 기능은 작동되지 않음을 알아주셨으면 합니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

웹시트는 기본적으로 엑셀과 비슷한 화면을 제공하고 있습니다.

저희는 이걸 Data Grid라고 부고 있습니다. 개발쪽 분양에서는 대부분 그렇게 부르고 있지요.

이 Data Grid와 Data Grid에 추가된 기능들에 대해서 이야기 드리겠습니다.

간단하게 Data Grid를 그리드라고 부르도록 하겠습니다.

기본적인 그리드는 위 이미지의 붉은 테두리 부분을 말합니다.

이곳에서 방향키나 입력, 수정등 엑셀과 비슷한 느낀으로 자유자제로 처리 가능합니다.

아쉽게도 엑셀과 비슷하다고 하여 수식, 서식 같은 기능은 포함되어 있지 않습니다.

하지만 그리드만에 다양한 기능들이 제공 됩니다.

1. 정렬 기능

해더의 이름 부분을 클릭하면 위 이미지와 같은 화살표가 표시되면서 조회한 데이터를 정렬 할수 있습니다.

2. 컬럼 이동

이동 하려는 컬럼을 클릭하여 끌어와 원하는 위치로 이동하면 헤더 위아래에 화살표가 표가 표시됩니다.

해당 화살표가 이동 될 위치를 표시해주시니 원하는 위치가 된다고 하면 마우스 클릭을 풀면 해당 위치로 컬럼이 이동 되는걸 아실수 있습니다.

3. 컬럼 숨기기 / 숨기기 취소, 개인화 저장, 개인화삭제

헤더를 우클릭하면 4가지 기능을 제공합니다.

- 컬럼 숨기기 : 선택 한 컬럼을 숨기는 역할을 합니다.

- 컬럼 숨기기 취소 : 숨긴 컬럼 모두를 다시 보이게 합니다.

- 개인화 저장 : 컬럼을 숨기거나 보이게, 컬럼 사이즈 조정, 컬럼 정렬등을 저장하고 이후에 해당 메뉴로 돌아 왔을때 그대로 유지되도록 저장 합니다.

- 개인화 삭제 : 저장해 놓은 값을 삭제하고 처음 시스템이 제공하던 형태로 변경합니다.

4. 그리드 최대화

붉은색 부분의 버튼을 클리하면 해당 그리드가 최대화가 되어 큰 화면에서 작업 하실수 있습니다.

그리드에서 제공하는 기본 기능들이 다양합니다.

추후에도 고객의 니즈를 받아 계속적으로 업데이트 할 예정입니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

웹시트에서는 회사마다의 로고나 문구를 조정 할 수 있도록 준비되어져 있습니다.

그럼 사이트 관리 화면에서 무엇을 어떻게 수정 할 수 있는지 알아보도록 하겠습니다.

사이트 관리 메뉴는 시스템 관리 > 화면 관리 > 사이트 관리 에 위치해 있습니다.

사이트 관리에는 크게 3가지 기능을 제공합니다.(계속 적으로 업데이트 예정입니다.)

① 이름 : 이름 항목은 메인 화면 왼쪽 상단에 보여지는 화면입니다. 변경 시 해당 위치의 문구를 변경 할 수 있습니다.

② 로고 : 로고 항목은 이미지를 등록 하게 되어 있습니다. 등록 된 이미지는 로그인 화면 상단에 로그가 변경됩니다.

③ 룰DATA : 룰DATA 여러가지를 설정 할 수 있도록 기능을 확장한 상태인데요. 현재는 로그인 후 최초 화면을 어디로 

                    할 지를 설정하는 기능이 있습니다.(추후 기능을 추가할 예정 입니다.)

                   * [JSON] 버튼을 클릭하면 팝업이 열립니다.

                   * 열린 팝업에서 FIRST_PAGE 항목에 특정 화면에 이동하면 주소창에 표신된 URL을 복사해서 넣습니다.

                      (주위 : URL을 넣을때 도메인은 빼고 넣어주셔야 합니다.)

                   * 저장 후 로그인 할때 지정한 화면으로 최초 접속이 됩니다.

이렇게 사이트 관리 메뉴에 대해서 이야기 해보았는데요.

고객분을의 니즈를 수령하여 추후에도 계속 적으로 업데이트가 이루어질것 참고해주십시요.

감사합니다.