[IBSHEET] 테이블 UI 라이브러리

어드민 개발 서버에서 테이블을 IBSheet로 꾸리고 있어서 알아보게 되었다.

 

=> 해당 서버는 jsp로 되어 있고, java 기반으로 된 페이지였다. (상단에 적힌 아래 코드를 보고 알 수 있었다.)

=> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

=> java 기반이지만 spring을 사용할 수도 있다

구분법👇

java 코드 사용	<h2>안녕하세요, <%= name %>님!</h2> <!-- Java 변수 출력 -->
spring 코드 사용	<h2>안녕하세요, ${name}님!</h2> <!-- Controller에서 받은 데이터 출력 -->

=> 근데 내가 보는 jsp 페이지의 html에선 위와 같은 코드를 사용하고 있지 않았다.

=> 그런데 <spring:message code="btn.InvGenerate"/> 이걸 발견!

=> Spring의 국제화(i18n) 기능을 사용 중이며, messages.properties 파일에서 값을 가져온다고 한다.

 

==> 결과: java와 spring을 함께 사용하는 프로젝트

 

 

**현재 프로젝트에서는 IBSheet7 사용중

https://www.ibsheet.com/v7/ibproducts_2.html

IB Sheet

---

IBSheet란?

- 유료 라이브러리이므로, 상업용으로 사용하려면 라이선스가 필요

- 웹 기반의 엑셀과 유사한 그리드(테이블) UI 라이브러리로, 대량의 데이터를 효율적으로 관리하고 편집할 수 있도록 도와주는 도구

- 웹 애플리케이션에서 엑셀처럼 표 데이터를 쉽게 추가, 수정, 삭제할 수 있게 해주며, HTML, JavaScript, JSP, Spring 등 다양한 환경에서 사용

 

 

1️⃣ 기본적인 IBSheet 설정 구조

var options = {
    HeaderMode: { Sort: 1, Filter: 1 }, // 헤더에서 정렬, 필터 기능 활성화
    Cols: [
        { Header: ["번호"], Type: "Seq", Width: 50 },  
        { Header: ["이름", "번호"], Type: "Text", Width: 150, RelWidth: 1 },  // 여러줄 헤더 설정
        { Header: ["나이"], Type: "Int", Width: 80, CanEdit: 1 },  
        { Header: ["직업"], Type: "Combo", Width: 120, ComboCode: "1:개발자;2:디자이너;3:기획자" }  
    ]
};

 

✅ Cols 배열 안에서 컬럼별 설정을 JSON 형식으로 지정
✅ Type, Width, CanEdit 등의 속성을 사용하여 열(컬럼) 속성 설정 가능

 

2️⃣ Cols 옵션 상세 설명

Cols 배열 안에서 개별 컬럼을 설정할 때 사용되는 주요 옵션

속성명	설명	예제
Header	컬럼 제목 설정	["이름"]
Type	데이터 타입 (Text, Int, Date, Combo 등)	"Text", "Int"
Width	컬럼 너비 (픽셀 단위)	150
RelWidth	상대적 너비 (비율 설정)	1
CanEdit	편집 가능 여부 (1: 가능, 0: 불가능)	1
Align	정렬 방식 (Left, Center, Right)	"Center"
Format	숫자, 날짜 포맷 설정	"#,###"
Hidden	컬럼 숨기기 여부	1 (숨김)
ComboCode	콤보박스 값 설정	"1:개발자;2:디자이너"
Sort	정렬 기능 활성화	1

 

3️⃣  Cfg 옵션 (ex. 행(row) 높이 등)

참고 공식 문서 : https://docs.ibsheet.com/ibsheet/v7/manual/#docs/intro/feature

IB Sheet7 Manual

var options = {
    Cfg: {
        RowHeight: 30  // 전체 행 높이를 30px로 설정
        MinRowHeight: 25  // 최소 행 높이를 25px로 설정
        AutoRowHeight: 1  // 자동 행 높이 활성화
        CanEdit: 0,        // 전체 편집 불가능
        SelectColor: "#DFF0D8",  // 선택한 행의 배경색 연두색 계열로 설정
        Paging: 1,         // 페이징 기능 활성화
        EnterMode: "next"  // Enter 키 입력 시 다음 셀로 이동
    }
};

동작	속성명	설명	예제
전체 행 높이 설정	RowHeight	모든 행의 높이 고정	Cfg: { RowHeight: 30 }
최소 행 높이 지정	MinRowHeight	최소 높이 지정 (줄어들지 않음)	Cfg: { MinRowHeight: 25 }
자동 행 높이 조절 ** MergeSheet가 0이 아니면 충돌나서 적용이 안 될 수 있음 **	AutoRowHeight	내용이 많을 경우 자동 증가	Cfg: { AutoRowHeight: 1 }
특정 행 높이 변경	SetRowHeight(row, height)	특정 행만 높이 변경	SetRowHeight(3, 50);
전체 Sheet 편집 가능 여부	CanEdit	1: 가능, 0: 불가능	CanEdit: 0
페이징 기능 활성화 여부	Paging	1: 활성화, 0: 비활성화	Paging: 1
선택한 행의 배경색 변경	SelectColor	배경색 변경	SelectColor: "#DFF0D8"
엔터(Enter) 키 입력 시 이동 방식 설정	EnterMode		EnterMode: "next"
데이터를 불러오는 방식	SearchMode	0: 모든 데이터 로드, 2: 스크롤 시점 로드	SearchMode: 2