메뉴바로가기
본문바로가기
하단바로가기
맨위로가기
통합데모
바로가기
기술문의
영업문의
조달쇼핑몰 등록 제품
[구매링크]
그리드 시장 점유율 1위
facebook
blog
softbowl
SBGRID
SBGrid 가이드
SBGrid 가이드
API 목록
Code Generator
Release Note
적용예시
적용예시
UI Template
구매
제품구매정보
고객사
고객지원
FAQ
기술지원/제품구매/데모문의
전체메뉴보기
닫기
SBGrid 가이드
SBGrid 가이드
SBGrid 시작하기
- 그리드 라이브러리 IMPORT
- 그리드 생성하기
SBGrid 테마
- 테마 적용하기
SBGrid 전역함수
- 버전 정보 확인
- 그리드 객체 생성
- 그리드 객체 제거
- 전체 그리드 제거
- 그리드 객체반환
- 전체 그리드 ID반환
- 현재 선택된 그리드 ID반환
그리드 기능 속성
그리드 기본 속성
조회 데이터 형태 설정
포커스 최상단/최하단 이동 설정
xml 데이터 레퍼런스 설정
원본 데이터를 저장하는 속성
xml 노드경로 설정
말줄임 기능
짝수행 배경색 설정
rowheader 배경색 설정
배경색 주기 설정
empty 문구 설정
empty 문구 스타일 설정
empty 이미지 설정
empty 이미지 스타일 설정
데이터 공백 제거
다중 행 선택
데이터 선택방법 설정
선택한 셀 표시 여부
enter 이동 방향 속성
enter 행 이동 시 셀 활성화 여부 설정
셀 편집방법 설정
oneclickedit시 콤보 활성화 설정
브라우저 스크롤 셀 활성화 여부
그리드 활성화/비활성화 설정
셀의 툴팁 설정
셀의 툴팁에 표시될 값 설정
- 툴팁 출력 지연 설정
행의 상태 표시
행의 상태 표시 열 너비 설정
행의 상태 표시 열 캡션 설정
행의 상태 표시 클릭 시 콜백함수
다중 정렬 설정
정렬 초기화 속성
셀의 복사
셀에 붙여넣기
전체 그리드 선택
데이터 붙여넣기 시 행 추가 설정
label 값 복사하기 설정
label 값 붙여넣기 설정
그리드 필터링 설정
그리드 필터링 타이틀 설정
필터링 리스트UI 숨김처리 여부
데이터의 치환
치환된 데이터의 원본 적용 여부
해당 인덱스 하이라이트 설정
그리드 데이터 검색 UI 설정
붙여넣기 사용시 상태정보 설정
hidden 열 포함 여부 설정
그리드 하단 셀 정보 설정
그리드 하단 전체 행 표시
데이터 붙여넣기 형식 설정
데이터 붙여넣기 시 행 추가 설정
그리드 사용자조작 설정
그리드 컬럼 설정 UI 표시 여부
고정 열 정렬 포함 여부
그리드 실행취소/재실행
행/열 인덱스 초기화 여부
그리드 마지막 행 포커싱 여부
- 행 상태 아이콘 클릭 초기화
- 스크롤 버튼 이동 개수 설정
- 스크롤 트랙 이동 지연
- 스크롤 트랙 클릭 이동 행 개수
- 캡션 클릭시 하이라이트 초기화
- 체크박스 이미지
- 라디오 이미지
- 멀티라디오 이미지
그리드 크기 속성
- 그리드 전체 너비 설정
- 그리드 전체 높이 설정
- 그리드 Resize 대기 시간 설정
- 행 높이 설정
- 열 너비 조절 설정
- 지정한 열 확장 설정
- 마지막 열 확장 설정
그리드 다국어 설정
Locale 설정
Locale 변경
열 속성
- 열 기본속성 설정
- 열 헤더 스타일지정
- 열 데이터 타입 설정
- 필터링 설정
- 열 포멧
- 데이터 소수점 처리
- 열 숨기기
- 열 병합 설정
- 열 건너뛰기
- 열 Disable 설정
- 열 정렬 가능 여부 설정
- 열내 inner HTML 사용
- 데이터 유효성 검사
- 데이터 계산
- 사용자 정의 속성 설정
- 붙여넣기 제외 설정
- 한 열에 다중 캡션 설정
- 열 도움말 설정
열 타입
- Input
- Output
- Textarea
- Combo
- Inputcombo
- Datepicker
- InputDate
- Spinner
- Checkbox
- Radio
- Multiradio
- Inputbutton
- Outputbutton
- Image
- Button
스크롤
- 세로 스크롤 행 위치 표시
- 세로 스크롤 유무 확인
- 가로 스크롤 유무 확인
- 스크롤 상단 행 확인
- 스크롤 왼쪽 열 확인
- 세로 스크롤 상단 행 위치 지정
- 세로 스크롤 하단 행 위치 지정
- 가로 스크롤 좌측 열 위치 지정
- 가로 스크롤 우측 열 위치 지정
- 브라우저 스크롤 동작여부 설정
- 스크롤 적용 중 행 연동
- 스크롤 이동 후 그리드 표시
- 스크롤 트랙 이동 후 그리드 표시
- 스크롤시 그리드 표시 UI 설정
헤더
- 헤더 높이 설정
- 헤더의 개수
- 정렬 및 열의 이동 설정(속성)
- 정렬 및 열의 이동 설정(메소드)
- 헤더의 설정된 속성 상태 확인
- 전체 체크박스 삽입
- 전체 체크박스 체크
- 전체 체크박스 체크 여부 확인
전체 체크박스 체크 해제
- 캡션 명 설정
- 캡션 명 확인
- 그리드 잠김 UI 표시 여부 설정
- 행 포커스 캡션영역 포함여부
틀고정
- 상단 행 고정(속성)
- 상단 행 고정(메소드)
- 상단 고정행 개수
- 하단 행 고정(속성)
- 하단 행 고정(메소드)
- 하단 고정행 개수
- 좌측 열 고정
- 고정 열 틀 색상 설정
- 좌측 열 고정 개수 설정
- 좌측 고정 열 개수 반환
병합
- 헤더의 병합방법 설정(속성)
- 헤더의 병합방법 설정(메소드)
- 헤더의 병합방법 확인
- 셀의 병합방법 설정(속성)
- 셀의 병합방법 설정(메소드)
- 열 병합 제외 설정
- 열의 병합 여부 확인
- 공백 셀의 병합 처리
- 셀 단위 병합처리
- 데이터의 병합 방법 확인
- 셀의 병합 여부 확인
- 그리드 병합 해제
그리드 초기화
- 그리드 전체 초기화
- 그리드 데이터 초기
- 그리드 사이즈 초기화
스타일
- 열의 너비 설정
- 열의 너비 확인
- 셀의 스타일 설정
- 셀의 스타일 확인
- 셀의 스타일 제거
- 셀의 복수 스타일 설정
- 다중 셀의 복수 스타일 설정
- 다중 셀의 스타일 제거
- 행의 스타일 설정
- 행의 스타일 확인
- 행의 스타일 제거
- 행의 복수 스타일 설정
- 행의 전체 스타일 확인
- 다중 행의 스타일 설정
- 다중 행의 스타일 제거
- 열의 스타일 설정
- 열의 스타일 확인
- 열의 스타일 제거
- 열의 복수 스타일 설정
- 열의 전체 스타일 확인
- 다중 열의 복수 스타일 설정
- 다중 열의 스타일 제거
- 짝수행 배경색 확인
- 짝수행 배경색 설정
- 행의 높이 확인
- empty 문구 설정
- empty 문구 반환
- empty 문구 스타일 설정
- empty 문구 스타일 확인
행 데이터
- 행 인덱스 설정
- 행 인덱스 확인
- 행 선택
- 다중 행 선택
- 행 선택 해제
- 선택행 인덱스 확인
- 그리드 선택 모드 설정
- 그리드 선택 모드 확인
- 전체 행의 선택 해제
- 이전 선택된 셀의 행 인덱스
- 전체 행 수
- 마지막 선택된 행 인덱스
- 선택행의 데이터 입력
- 선택행의 데이터 확인
- 체크된 행 인덱스
- 체크된 행의 데이터
- 지정된 행의 이벤트 실행
- 행 추가(마지막 행)
- 행 추가(선택된 행)
- 행 추가(데이터 포함)
- 행 삭제(마지막 행)
- 행 삭제(선택된 행)
- RowHeader 설정 여부
- RowHeader 설정 확인
- 마우스가 위치한 행 인덱스
- 행 데이터 이동
- 검색 데이터의 행 인덱스
- 그리드 전체 데이터 반환
- 합계 열 제외한 전체 데이터 반환
- 전체 행 개수 표시 설정
- 전체 행 개수 표시 설정 여부
- 조건에 해당하는 행 인덱스
- undo 정보 초기화
- redo 정보 초기화
- undo 정보 반환 확인
- 붙여넣기 제외 설정
- 붙여넣기 제외 설정 확인
열 데이터
- 열 인덱스 설정
- 열 인덱스 확인
- 이전 선택된 셀의 열 인덱스
- 전체 열 수
- 선택된 열의 Ref
- 지정된 Ref의 인덱스
- 선택된 열의 타입
- 마우스가 위치한 열 인덱스
- 선택된 열의 ID 확인
- 선택된 열의 ID의 인덱스
- 열 데이터 이동
- 선택된 열의 포멧 설정 확인
- 선택 열 인덱스 확인
- 지정된 열의 disabled 설정
- 지정된 열의 disabled 확인
- Ref/Caption에 의한 열 인덱스
- 열 콤보 데이터 설정
- 열 콤보 데이터 확인
-지정된 열의 사용자 속성 설정
-지정된 열의 사용자 속성 확인
- 열 추가(마지막 열)
- 열 추가(선택한 열)
- 열 삭제(마지막 열)
- 열 삭제(선택한 열)
- 지정한 열 확장 설정
- 지정한 열 확장 설정값 확인
- 지정한 열 확장 속성 제거
- 마지막 열 확장 타입 설정
- 마지막 열 확장 타입 확인
- 붙여넣기 제외 설정
- 붙여넣기 제외 설정 확인
- 지정한 열의 다중 캡션 설정
- 지정한 열의 다중 캡션 설정 확인
- 지정한 열의 typeinfo 확인
-지정한 열의 도움말 설정
-지정한 열의 도움말 확인
- 지정한 열의 자동완성 데이터 변경
- 지정한 열 최소날짜 설정
- 지정한 열 최소날짜 반환
- 지정한 열 최대날짜 설정
- 지정한 열 최대날짜 반환
- 현재 시점 기준 컬럼들의 설정 정보 확인
- 지정한 열 최대문자수 설정
- 지정한 열 최대문자수 반환
셀 데이터
- 셀에 데이터 입력
- 셀의 데이터 확인
- 콤보의 라벨 데이터 확인
- 셀의 비활성화 설정
- 셀의 비활성화 확인
- 셀의 툴팁 설정
- 셀의 툴팁 확인
- 셀 선택
- 셀 선택 해제
- 다중 셀의 선택
- 다중 셀의 선택해제
- 지정된 셀의 이벤트 실행
- 지정된 라디오 버튼 선택
- 편집모드 활성화
- 편집모드 종료
- 편집모드 여부 확인
- 셀 데이터 검색
- 데이터 변경 전 셀 데이터 반환
- 그리드 하단 셀 정보 설정
- 그리드 하단 셀 정보 반환
- 그리드 하단 셀 값 반환
- 데이터 붙여넣기 형식 설정
- 데이터 붙여넣기 형식 설정 반환
- 복사된 데이터 갱신
- 갱신된 데이터 반환
- 셀 포맷 설정
- 셀 포맷 반환
- 셀 단위 붙여넣기 제외 설정
- 셀 단위 붙여넣기 제외 여부
파일 다운로드
- 지정한 형식파일로 다운로드
숨기기
- 셀 숨기기 설정
- 열 숨기기 설정
- 열 숨기기 설정 확인
- 셀 UI 숨기기 설정 확인
- 열 UI 숨기기 설정 확인
- 개선된 열 숨기기
상태정보
- 행의 상태정보 추가
- 행의 상태정보 삭제
- 행의 상태정보를 설정
- 행의 상태정보를 확인
- 지정된 상태정보의 데이터
- 그리드 전채 행 데이터
- 열의 상태값 적용 설정
- 열의 상태값 적용 확인
- 상태정보가 추가된 행 반환
- 행 상태정보 초기화
- 그리드 상태정보 초기화
- 행 데이터 및 상태값 초기화
정렬
열 정렬 설정
열 정렬 초기화
열 정렬 아이콘 생성
열 정렬 설정 제거
열 다중정렬 설정
열 다중정렬 아이콘 생성
열 다중정렬 설정 제거
- 열 정렬 가능 여부 설정
- 열 정렬 가능 여부 확인
- 열 정렬 정보 확인
필터링
필터링 조건 설정
필터링 여부 설정
필터링 여부 반환
필터링 초기화
필터링 정보 재생성
열 필터링 설정
필터링 조건 반환
필터링 정보 삭제
필터링 리스트 닫기
페이징
Front Paging
jQuery ajax DB 페이징
페이징 정보 반환
지정한 페이지로 이동
페이징 행 개수 설정
페이징 이동 여부
소계 및 합계
- 소계 및 합계 설정
- 소계 및 합계 동적으로 적용
- 소계 및 합계 영역 여부
- 소계 및 합계 전체 행 반환
- 소계 및 합계 초기화
- 소계 및 합계 적용 여부 확인
- 그룹소계 설정
- 동적 그룹소계 설정
- 그룹소계 초기화
- 그룹소계 행 인덱스 반환
트리
- 그리드 트리
- 전체 노드 인덱스 반환
- 지정한 노드 정보 반환
- 지정한 노드 펼침 여부 반환
- 트리 체크박스 체크여부 반환
- 트리 전체 체크 설정
- 트리 체크박스 체크여부 설정
- 지정한 노드 펼치기
- 지정한 노드 접기
- 전체 노드 펼치기
- 전체 노드 접기
- 트리 자식 인덱스 반환
- 트리 실제 인덱스 반환
그룹핑
- 그리드 그룹핑
- 모든 노드 접기/펼치기 설정
- 그룹 열의 ID 반환
- 펼쳐진 그룹 열의 ID 반환
- 입력한 행의 자식 노드 수 반환
그리드 추가 기능
그리드 jsonref 값 반환
컨텍스트 메뉴 UI 숨기기
컨텍스트 메뉴 UI 표시하기
그리드 parentid 값 반환
원본 데이터를 반환
원본 데이터로 변경
선택된 행을 원본 데이터를 변경
그리드 잠금 설정
그리드 실행취소
그리드 실행취소 후 재실행
그리드 숨김
그리드 보여주기
드래그 앤 드롭
hidden 열 포함 여부 설정
hidden 열 포함 여부 확인
툴팁 지연 속도 설정
툴팁 지연 속도 반환
스크롤 트랙 이동 지연 설정
스크롤 트랙 이동 지연 반환
스크롤 트랙 클릭 이동 개수 설정
스크롤 트랙 클릭 이동 개수 반환
선택한 셀 데이터 복사
선택한 셀 데이터 붙여넣기
그리드 스타일 상태 삭제
이벤트
- 이벤트바인드
- 이벤트바인드 해제
- 바인드 된 이벤트 실행
- 마우스 휠 동작 이벤트
- 마우스 버튼 Down 이벤트
- 마우스 버튼 Up 이벤트
- 마우스 동작 이벤트
- 마우스 그리드 Enter 이벤트
- 마우스 그리드 Leave 이벤트
- 마우스 클릭 이벤트
- 마우스 더블클릭 이벤트
- 키보드 키 Down 이벤트
- 키보드 키 Press 이벤트
- 키보드 키 Up 이벤트
커스텀 이벤트
복사 이벤트
붙여넣기 이벤트
데이터 변경 이벤트
데이터 입력 이벤트
checkbox 이벤트
버튼 클릭 이벤트
스크롤 이벤트
refresh() 함수 실행전 이벤트
refresh() 함수 실행후 이벤트
rebuild() 함수 실행전 이벤트
rebuild() 함수 실행후 이벤트
resize() 실행 전 이벤트
resize() 실행 후 이벤트
행의 포커스 이동시 이벤트
열의 포커스 이동시 이벤트
셀 영역 마우스 포커스 이벤트
정렬 이벤트
필터링 실행전 이벤트
필터링 실행후 이벤트
페이징 이벤트
Drag&Drop 이벤트
열 너비 조절 후 이벤트
- 드래그를 통한 열 이동 시 이벤트
- 트리 이벤트
API 목록
Code Generator
Release Note
적용예시
적용예시
서버연동
엑셀
- 다운로드
- 업로드
합계 구하기
컨텍스트 메뉴
개인화
그리드 개인화 설정(속성)
그리드 개인화 설정(메소드)
lazy loading
SBChart 연동
차트 라이브러리 IMPORT
선형 차트
막대형 차트
원형 및 기타 차트
보고서(Report) 연동
UI Template
구매
제품구매정보
고객사
고객지원
FAQ
기술지원/제품구매/데모문의
SBGRID
2.5
SBGrid 기능 가이드 바로가기
높은성능,빠른속도,안정적지원
배우기 쉽고 사용하기 편리합니다.
국내 경쟁제품에 비해 기술지원이 뛰어납니다.
현재 국내 외 200여 기업 및 기관이 사용하고 있습니다.
모든브라우저
지원
모든OS
지원
모든디바이스
지원
굿 소프트웨어
인증 제품
Angular Demo
React Demo
Vue Demo
HTML5 웹 표준 준수
HTML, CSS, Javascript 사용
No-plugin, N-Screen
JSON/Array 데이터 표현
국제표준화기구 W3C 가입 활동
높은 성능 제공
데이터 분할 표현 처리를 통한 성능 향상
경쟁 제품대비 빠른 성능 제공
Active-X 제품에 준하는 성능 및 기능 제공
국내최고 기술 지원서비스 제공
자체 기술로 개발되어 기술지원 용이
커스트마이징 지원
방문지원 및 유선 지원
GS 인증 제품
생산성/업무환경 특화
별도의 코딩없이 간단한 설정으로 다양한 기능 사용
엑셀연동, 정렬, 머지 ,누계, 합계, 사용자 수식 등
레포팅 등 3rd-party 제품군 연계
FEATURES
사이트 개발에 꼭 필요한 기능 뿐만 아니라 다양한 기능들을 쉬운 인터페이스로 제공하고 있습니다.
편리한 CRUD 사용자
다양한 편집 콘트롤 제공 및 CRUD 개발용 API 제공
필터링
데이터 sorting, filtering 기능 제공
정렬/다중정렬
싱글 컬럼, 멀티 컬럼 정렬 기능
서버 페이징 방식 개발 관련 이벤트 및 파라메터값 제공
페이징
그리드 자체 페이징 제공, 서버 페이징 방식 개발 지원
스크롤 이벤트를 통한 Lazy Loading 구현
행/컬럼 고정
옵션처리를 통한 행/컬럼 고정 처리
셀 자동 병합
행/컬럼 값에 따른 셀 자동 병합
열 병합 후 행 병합, 행 병합 후 열 병합 등 다양한 옵션 제공
엑셀 내보내기/가져오기
엑셀 파일 저장 및 엑셀파일을 그리드로 로딩 기능
데이터 압축으로 고성능 제공
그룹핑/트리
지정한 행들을 그룹화 하는 그리드 Grouping 기능 제공
별도 트리기능 제공
개인화 기능
Local Storage 를 통한 컬럼 정보 등 개인화 기능 제공
컨텍스트 메뉴
마우스 우 클릭을 통해 오픈 되는 컨텍스트 메뉴 제공
시작하기
직관적이고 간단한 소스코드만으로도 높은 품질의 UI를 제공합니다.
쉽게 여러분의 웹사이트에 적용할 수 있습니다.
스크립트 태그 추가만으로도 SBGrid를 시작할 수 있습니다.
<script
src
=
"/SBGrid/SBGrid_Lib.js"
type
=
"text/javascript"
>
</script>
<script
src
=
"/SBGrid/SBGrid_min.js"
type
=
"text/javascript"
>
</script>
고객사
공공기관
기업
금융/교육