Flexigrid

Flexigrid는 웹 2.0 기반의 데이터 시트 작성 스크립트입니다. jQuery 자바스크립트 라이브러리를 사용하며, XML이나 JSON과 같은 Ajax 데이터를 별도로 취급하여 저장, 조회 할 수도 있습니다. 주요 기능은 다음과 같습니다.

• 컬럼 사이즈 조절
• 테이블의 높이와 너비 조절
• 컬럼 헤더의 정렬
• 헤더 종류별 보기와 감추기
• Ajax(XML, JSON)과의 데이터 연결
• 검색 기능
• 페이징 기능
• 데이터의 추가 삭제
• 토글 기능

이 스크립트는 IE6에서 정상적으로 작동하지 않을 수 있습니다.

예제보기

다운로드

Flexigrid를 XE에서 사용하기

Flexigrid 공식 웹 사이트에서 받은 자료를 XE에 사용하기 좋도록 하기 위해서는 소스 코드 일부를 수정해야 할 필요가 있습니다. 아래 파일은 PXE 사이트에서 레이아웃 스펙 리스트용으로 사용하기 위해 새로 패킹한 것입니다. 수정 된 내용은 다음과 같습니다.

• XE에서 인클루드하여 게시판이나 내부, 외부 등 모든 모듈에서 제한없이 작동하도록 샘플화
  
  
• 복잡한 데이터 입/출력 보다는 비쥬얼적인 부분을 강조하기 위해 추가 CSS 디자인 추가 및 테이블 구조 변경
  
  
• 테이블을 보이고 감추는 토글 버튼이 단방향으로만 작동하던 것을 양방향으로 변경. 닫겨 있는 것을 열거나 열려 있는 것을 닫는 두가지 중 선택 가능.
  

1. 다운로드

V.I.P 메뉴에서 다운로드 받은 압축 파일을 풀고 나온 plugins 디렉토리를 XE가 설치된 폴더에 넣고 서버에 업로드 합니다.

2. 스크립트 삽입

Flexigrid를 사용하고자 하는 모듈에 스크립트를 삽입합니다. 게시판의 경우 해당 게시판의 게시판 정보 탭에서 상단 내용 부분에 스크립트를 넣습니다. 레이아웃의 경우는 레이아웃 설정 화면의 헤더 스크립트 부분에 넣습니다.

삽입 할 스크립트는 plugins/flexigrid/헤더삽입용스크립트.html 파일을 열어 코드를 복사하여 붙입니다. 스크립트가 작동 안할 경우에는 코드의 경로 부분을 살펴서 자신의 서버와 맞춰줍니다.

3. 테이블 코드 삽입해 보기

plugins/flexigrid/specs/spec_clio.html 파일을 열어 코드를 복사 한 후, 게시판의 에디터에서 우측 상단의 HTML 버튼을 눌러 HTML 편집 모드에서 붙여 넣은 후 게시물을 등록 해 보세요. 테이블이 제대로 나온다면 성공입니다.