본문으로 건너뛰기

OpenGrid

이 컨트롤은 무엇인가요?​

OpenGrid.js는 오픈소스 그리드 라이브러리 open-grid(MIT License, v1.3.1)를 감싼 HandStack 그리드 엔진 브리지입니다. syn.uicontrols.$opengrid 싱글턴 객체로 노출되며, <syn_opengrid> 커스텀 태그로 사용합니다.

open-grid는 ESM 전용 라이브러리라서 OpenGrid.js는 동적 import()로 /js/open-grid/open-grid.js를 비동기 로드해 window.OpenGrid에 바인딩합니다. 가상 스크롤·렌더링·정렬/필터·인라인 편집 등 그리드 엔진 자체의 구현은 전부 vendor 번들에 위임하고, OpenGrid.js는 HandStack uicontrol 관례(columns 축약 배열 정의, Flag(R/C/U/D) 기반 변경 추적, codehelp 팝업 연동 등)를 open-grid의 공개 API 위에 재배선하는 래퍼 역할만 담당합니다.

가장 큰 특징은 상용 라이선스가 필요 없다는 점입니다. AUIGrid/AUIPivot는 상용 벤더 라이브러리가 필요하고 WebGrid(Handsontable)도 상용 환경에서는 라이선스 정책을 확인해야 하지만, OpenGrid는 MIT 라이선스 오픈소스라 별도 계약 없이 자유롭게 사용할 수 있습니다.

언제 사용하나요?​

  • 상용 그리드 라이선스 없이 CRUD 그리드, 대용량 데이터, 차트 연동, 트리/그룹핑 등 업무용 기능이 폭넓게 필요할 때
  • 신규 화면에서 라이선스 비용 없이 AUIGrid 수준의 기능(고정 컬럼, 코드헬프 팝업, 필터, 내보내기 등)을 사용하고 싶을 때
  • 이미 실무 표준으로 굳어진 화면을 유지보수하는 경우라면 AUIGrid를 그대로 사용하는 편이 더 간단합니다. OpenGrid는 신규 화면이나 라이선스 제약이 있는 프로젝트에 적합합니다.

빠른 시작​

<div class="demo-toolbar">
    <button type="button" id="grdBasic_load">데이터 조회</button>
    <button type="button" id="grdBasic_insert">행 추가</button>
    <button type="button" id="grdBasic_remove">행 삭제</button>
    <button type="button" id="grdBasic_export" class="secondary">CSV 내보내기</button>
</div>

<syn_opengrid id="grdBasic" syn-options="{
    editable: true,
    columns: [
        ['MemberNo', '번호', 70, false, 'number', true, 'center'],
        ['MemberName', '이름', 120, false, 'text'],
        ['Email', '이메일', 200, false, 'text'],
        ['Department', '부서', 110, false, 'text'],
        ['Point', '포인트', 90, false, 'number']
    ]
}"></syn_opengrid>

<script src="/js/syn.js"></script>
<script src="/uicontrols/OpenGrid/OpenGrid.js"></script>
syn.uicontrols.$opengrid.setValue('grdBasic', sampleMembers(50));
syn.uicontrols.$opengrid.insertRow('grdBasic', { MemberNo: 51, MemberName: '신규 사용자' });
syn.uicontrols.$opengrid.removeRow('grdBasic');
syn.uicontrols.$opengrid.exportFile('grdBasic', { fileName: 'basic.csv' });

예제 모아보기​

example/index.html이 이미 19개 카테고리로 잘 정리된 예제 갤러리입니다. 각 카테고리 안의 파일명/레이블은 아래 표를 참고하세요.

시작하기 (start)​

예제설명
start/basic.html기본 그리드(조회·추가·삭제·정렬·CSV 내보내기)
start/columnConfig.html컬럼 설정
start/gridOptions.html그리드 옵션

데이터 & 컬럼 (dataColumns)​

예제설명
dataColumns/sorting.html정렬
dataColumns/filtering.html필터
dataColumns/fixedColumns.html고정 컬럼
dataColumns/columnReorder.html컬럼 리오더
dataColumns/multiHeader.html다단(줄바꿈) 헤더
dataColumns/changeTracking.html변경 추적
dataColumns/variableRowHeight.html가변 행 높이

행 & 선택 (rowsSelection)​

예제설명
rowsSelection/rowSelection.html행 선택
rowsSelection/checkbox.html체크박스
rowsSelection/rowState.html행 상태
rowsSelection/rowDrag.html행 드래그

셀 & 편집 (cellsEditing)​

예제설명
cellsEditing/cellEdit.html셀 편집
cellsEditing/cellTypes.html셀 타입
cellsEditing/cellMerge.html셀 병합
cellsEditing/masking.html데이터 마스킹
cellsEditing/cascadingFilter.html캐스케이딩 필터
cellsEditing/wrapTooltip.html줄바꿈 & 툴팁
cellsEditing/currencyFormat.html통화 포맷

이벤트 (events)​

예제설명
events/basicEvents.html기본 이벤트
events/extendedEvents.html이벤트 확장
events/triggers.html트리거

그룹 & 트리 (groupingTrees)​

예제설명
groupingTrees/grouping.html그룹핑
groupingTrees/treeStructure.html트리 구조
groupingTrees/subtotal.html합계/소계

페이지 & 검색 (paginationSearch)​

예제설명
paginationSearch/pagination.html페이지네이션
paginationSearch/findSearch.html검색
paginationSearch/keyboardShortcuts.html키보드 단축키

위젯 렌더러 (widgetRenderers)​

예제설명
widgetRenderers/imageButton.html이미지 / 버튼
widgetRenderers/link.html링크
widgetRenderers/media.html미디어
widgetRenderers/mapLink.html지도 연동

특수 기능 (specialFeatures)​

예제설명
specialFeatures/contextMenu.html컨텍스트 메뉴
specialFeatures/worksheet.html워크시트
specialFeatures/formula.html수식 계산
specialFeatures/i18n.html다국어 (i18n)
specialFeatures/pivotTable.html피벗 테이블
specialFeatures/orgChart.html조직도(그래픽)
specialFeatures/sapVoucher.htmlSAP 전표
specialFeatures/xmlIntegration.htmlXML 연동
specialFeatures/formIntegration.html폼 연동
specialFeatures/crossGridMove.html그리드 간 이동
specialFeatures/bigData.html대용량 데이터
specialFeatures/extendOverride.html확장·오버라이드

내보내기 (exportCat)​

예제설명
exportCat/excelExport.html엑셀 내보내기
exportCat/csvJson.htmlCSV/JSON
exportCat/print.html인쇄

스타일 & 테마 (stylingThemes)​

예제설명
stylingThemes/themeChange.html테마 변경
stylingThemes/customCss.html커스텀 CSS
stylingThemes/rowHeaderHeight.html행높이 · 헤더높이
stylingThemes/fontChange.html폰트 변경
stylingThemes/skin.html스킨
stylingThemes/icon.html아이콘
stylingThemes/textureMatrix.html재질 매트릭스

접근성 (accessibility)​

예제설명
accessibility/wcag.html웹접근성 WCAG 2.2
accessibility/keyboardScreenReader.html키보드 · 낭독 · 텍스트 등가

조건부서식 (conditionalFormat)​

예제설명
conditionalFormat/cfDataBar.html데이터바
conditionalFormat/cfHeatmap.html히트맵
conditionalFormat/cfIconDelta.html아이콘셋·델타
conditionalFormat/cfRuleStack.html규칙 스택

실시간 데이터 (realtimeData)​

예제설명
realtimeData/streaming.html스트리밍
realtimeData/polling.html폴링
realtimeData/realtimeChart.html실시간 차트

값 타입·포맷 (valueTypesFormat)​

예제설명
valueTypesFormat/currencyPercent.html통화·증감률·백분율
valueTypesFormat/missingState.html결측 4-state

차트 연동, ECharts (chartEcharts)​

예제설명
chartEcharts/regionBar.html지역별 매출(막대)
chartEcharts/kpiLineZoom.htmlKPI 추이(라인·줌)
chartEcharts/categoryDonut.html구성비(도넛)
chartEcharts/priceQtyScatter.html단가-물량(산점·회귀)
chartEcharts/goalGauge.html목표 달성(게이지)
chartEcharts/densityHeatmap.html밀도(히트맵)
chartEcharts/budgetTreemap.html예산(트리맵)
chartEcharts/flowSankey.html흐름(생키)
chartEcharts/stockCandle.html종목(캔들+거래량)
chartEcharts/scorecardRadar.html스코어카드(레이더)
chartEcharts/conversionFunnel.html전환(퍼널)
chartEcharts/responseBoxplot.html응답분포(박스플롯)
chartEcharts/streamComposition.html실시간 구성(스트림)
chartEcharts/parallelMulti.html다차원(평행좌표)
chartEcharts/geoRegion.html지역(지도)
chartEcharts/networkGraph.html관계망(그래프)
chartEcharts/calendarHeatmap.html캘린더(히트맵)
chartEcharts/infiniteScrollChart.html무한 스크롤(누적 차트)
chartEcharts/masterDetailIndent.html마스터/디테일(들여쓰기)

Override (override)​

내부 API를 확장/오버라이드하는 32개의 실무형 시나리오 모음입니다(ov01~ov32).

예제설명예제설명
override/ov01.html표시값 꾸미기override/ov17.html컬럼 너비 설정·자동계산
override/ov02.html데이터 넣기 전 검사override/ov18.html상단 행 고정
override/ov03.html셀 입력 막기·고치기override/ov19.html트리 행 추가
override/ov04.html행 지우기 전 확인·권한override/ov20.html특정 컬럼 가로 스크롤
override/ov05.html행 추가 시 자동값override/ov21.html나만의 정렬 규칙
override/ov06.html엑셀 내보내기 파일명·권한override/ov22.htmlOR/커스텀 필터
override/ov07.html컬럼 적용 전후 가공override/ov23.html공유 표시 포맷터
override/ov08.html옵션 마이그레이션override/ov24.html엑셀 직렬화 커스터마이즈
override/ov09.html리사이즈 쓰로틀override/ov25.html그룹 키 만들기
override/ov10.html출력·배열변환 후처리override/ov26.html새 집계 함수
override/ov11.html행 선택·해제 가로채기override/ov27.html여러 겹 합성 순서
override/ov12.html컨텍스트 메뉴 커스터마이즈override/ov28.html떼어내기(restore)
override/ov13.html특정 행으로 점프 보정override/ov29.htmlstrict 에러 전파
override/ov14.htmlID로 행 삭제override/ov30.htmldestroy 자동 정리
override/ov15.html되돌리기·다시하기override/ov31.html전역 기본 오버라이드
override/ov16.htmlID로 체크 켜기·끄기override/ov32.html프레임워크 정리

업무용 기능 (businessFeatures)​

드래그 채우기/서브그리드/견적서 자동 합계 같은 실무 시나리오와, 그리드-차트 통합 데모(chart01~chart08)를 함께 묶어둔 카테고리입니다.

예제설명예제설명
businessFeatures/f101.html드래그로 범위 선택businessFeatures/f301.html견적서 자동 합계
businessFeatures/f102.htmlShift로 범위 확장businessFeatures/f302.html필드명 참조 방식
businessFeatures/f103.html채우기 핸들businessFeatures/f303.html필터를 아는 범위 함수
businessFeatures/f104.html키보드 채우기businessFeatures/f304.html부동소수점 정밀도
businessFeatures/f105.html엑셀과 복사/붙여넣기businessFeatures/f305.html채우기와 참조
businessFeatures/f106.html수식 셀 보존businessFeatures/f306.html에러 갤러리
businessFeatures/f107.html정렬해도 살아있는 선택businessFeatures/f307.html대량 재계산 진행 신호
businessFeatures/f108.html터치로 선택하고 채우기businessFeatures/f308.html정렬해도 안 움직이는 참조
businessFeatures/f201.html주문 상세 펼치기businessFeatures/f309.html모바일 수식 완성
businessFeatures/f202.html평가이력 서브그리드businessFeatures/chart01.html통합차트-01 컬럼 차트 기본
businessFeatures/f203.html중첩 한계businessFeatures/chart03.html통합차트-03 체크 행 비교
businessFeatures/f204.html정렬해도 안 풀림businessFeatures/chart04.html통합차트-04 수식 연동 라이브
businessFeatures/f205.html트리+상세 글리프 대비businessFeatures/chart05.html통합차트-05 대용량 샘플링 배지
businessFeatures/f206.html스크롤해도 입력값 유지businessFeatures/chart07.html통합차트-07 접근성 하드게이트
businessFeatures/f207.html키보드로만 펼치기businessFeatures/chart08.html통합차트-08 모바일 배치
businessFeatures/f208.html모바일 44pxbusinessFeatures/chartDistortion.html차트 값 왜곡 방지
businessFeatures/chartProvenance.htmlprovenance(변환 이력 배지)

더 알아보기​

  • 이 문서는 OpenGrid.js 소스 코드와 example/index.html 예제 갤러리를 근거로 작성되었습니다.
  • 실제 소스: wwwroot/uicontrols/OpenGrid/OpenGrid.js, OpenGrid.css
  • 내부 라이브러리: open-grid (MIT License, v1.3.1) — /js/open-grid/open-grid.js에서 동적 import()로 로드됨
  • 다른 그리드 엔진: WebGrid, AUIGrid, AUIPivot

실전 예제 페이지​

/uicontrols/OpenGrid/example/ 경로의 예제를 아래 iframe에서 바로 확인할 수 있습니다. 전체 갤러리(index.html)는 카테고리별로 정리된 링크 목록이며, 클릭하면 iframe 안에서 바로 해당 예제로 이동합니다.

index.html (전체 예제 갤러리)​

start/basic.html (대표 예제)​

소스와 로드 파일​

항목내용
컨트롤OpenGrid
전역 별칭syn.uicontrols.$opengrid
버전v2026.7.5
소스uicontrols/OpenGrid/OpenGrid.js
스타일uicontrols/OpenGrid/OpenGrid.css

API 참조​

싱글턴 객체: syn.uicontrols.$opengrid 소스 파일: wwwroot/uicontrols/OpenGrid/OpenGrid.js, wwwroot/uicontrols/OpenGrid/OpenGrid.css 내부 라이브러리: open-grid (MIT License)

마크업​

<syn_opengrid id="grdGrid" syn-options="{
    editable: true,
    height: 400,
    columns: [
        ['ProdID', '제품코드', 120, true, 'text', false, 'left'],
        ['ProdName', '제품명', 200, false, 'text', false, 'left'],
        ['UseYN', '사용여부', 80, false, 'checkbox', false, 'center'],
        ['CategoryID', '분류', 120, false, 'dropdown', false, 'center', null, { dataSourceID: 'CategoryID', local: true }]
    ]
}" syn-events="['selectionChange', 'cellEditEnd']"></syn_opengrid>
  • id는 페이지 내에서 유일해야 하며 각 메서드에서 elID로 사용됩니다.
  • columns 축약 배열은 다른 그리드 컨트롤과 유사하게 [columnID, columnText, width, isHidden, columnType, readOnly, alignConstants, belongID, options, children] 순서를 가집니다. columnType은 'text'/'number'/'checkbox'/'dropdown'/'codehelp'로 매핑됩니다.
  • open-grid 엔진 모듈이 비동기로 로드되므로, controlLoad/setValue/clear 등은 로드가 끝날 때까지 syn.$w.addReadyCount()로 페이지 준비 상태를 잡아 둔 채 대기했다가 자동으로 재호출됩니다. 조회성 메서드(getGridControl(elID)가 null을 반환하는 경우)는 조용히 아무 동작도 하지 않습니다.

Options (defaultSetting)​

속성기본값설명
width / height'100%' / '360px'그리드 크기
columnsnull컬럼 축약 배열(필수)
editabletrue그리드 전체 편집 가능 여부
rowHeight35행 높이(px)
dynamicRowHeightfalse내용에 따라 행 높이 자동 조정
selectionMode'single'셀/행 선택 모드
contextMenutrue우클릭 컨텍스트 메뉴 사용 여부
contextMenuTitle / contextMenuOptionsnull컨텍스트 메뉴 커스터마이즈
exportFileNamenull내보내기 기본 파일명
loadMoreDataFunctionnull무한 스크롤/추가 로딩 콜백
messagesnull안내 문구(데이터 없음 등) 커스터마이즈
paginationnull페이지네이션 설정
localenull로케일 설정
dataType'list'다른 컨트롤과 형식을 맞추기 위한 공통 속성
belongID / getter / setter / controlText / validators / transactConfig / triggerConfignull/falsesyn.uicontrols 공통 옵션(값 바인딩·유효성검사·트랜잭션 연동용)

메서드​

syn.uicontrols.$opengrid.<메서드명>(...) 형태로 호출합니다. (전체 목록은 OpenGrid.js 참고, 아래는 실무에서 자주 쓰는 메서드 위주)

메서드설명
getValue(elID, requestType, metaColumns) / setValue(elID, value, metaColumns)변경분 조회 / 원본 데이터 채우기(Flag는 자동 'R')
clear(elID, isControlLoad)데이터 초기화
getGridData(elID)그리드의 전체 원본 데이터(Flag 포함) 조회
getUpdateItems(elID) / isUpdateData(elID)변경된 행만 조회 / 변경 여부 확인
insertRow(elID, values, options) / removeRow(elID, dataField, rowIndex, callback) / removeRowByRowId(elID, rowIDs)행 추가/삭제
updateRow(elID, values, rowRef) / updateRows(elID, values, rowIndexs) / updateRowsById(elID, values) / updateAllToValue(elID, dataField, value)다양한 단위의 값 일괄 갱신
getFlag(elID, rowRef) / setFlag(elID, rowRef, flag)CRUD 상태(R/C/U/D) 조회/설정
getCellValue(elID, rowIndex, dataField) / setCellValue(elID, rowIndex, dataField, value)셀 값 조회/설정
getDataAtCell / setDataAtCell / getDataAtCol / setDataAtRow셀/열/행 단위 값 조회·설정
getSourceDataAtRow(elID, rowIndex) / getItemByRowIndex / getItemByRowID행 데이터 조회
getRowIndexByValue / getRowIndexesByValue / getRowsByValue값 기준 행 검색
selectRow(elID, rowIndex) / selectCell(elID, rowIndex, dataField) / clearSelection(elID)행/셀 선택·해제
getSelected(elID) / getSelectedItem(elID) / getSelectedItems(elID) / getSelectedText(elID)선택 범위/항목 조회
setSorting(elID, dataField, sortDirection) / clearSorting(elID)정렬 적용/해제
searchAll(elID, term) / search(elID, dataField, term, options)텍스트 검색
setFilter(elID, dataField, func) / addCondition / removeCondition / clearConditions / clearFilter(elID)필터 조건 조작
visibleColumns(elID, columns, isShow) / unHiddenColumns(elID) / isColumnHidden(elID, dataField)컬럼 숨김/표시
setColumnWidth(elID, dataField, width) / setColumnWidths / getColumnWidth(s) / setFitColumnSize컬럼 너비 조정
setCellMerge(elID, isMerged) / getMergeItems / hasMerge셀 병합
setFixedColumnCount(elID, fixedCount) / setFixedRowCount(elID, fixedCount)고정 열/행 개수
setFooter(elID, footerLayout, isChangeFooter)하단 합계 영역 구성
exportFile(elID, options) / exportToObject / exportAsString / importFile(elID, callback) / exportExcel / exportJson / printGrid내보내기/가져오기/인쇄
checkEditValue(elID) / checkUniqueValueCol / checkValueCountCol / checkEmptyValueCol(s) / validateGridData유효성 검사
showCodeHelpPopup(elID, rowIndex, dataField, item, searchText)codehelp 컬럼 타입의 코드도움 팝업을 여는 내부 진입점(CodePicker와 유사한 역할)
dataRefresh(elID, setting, callback)dropdown/codehelp 컬럼의 코드 목록을 DataSource/코드 서비스에서 다시 조회
groupBy(elID, fields) / clearGroup(elID) / expandAllGroups / collapseAllGroups그룹핑
enableTree(elID) / disableTree(elID) / expandAllNodes / collapseAllNodes트리 모드
setTheme(elID, theme) / setSkin(elID, skin) / setDensity(elID, name) / setTexture(elID, name)테마/스킨/밀도/재질
addWorksheet / switchWorksheet / removeWorksheet / getWorksheetNames다중 워크시트
setCellFormula(elID, rowIndex, dataField, formula) / getCellFormula / clearCellFormula / getCellError수식 계산
setControlSize(elID, size) / render(elID) / destroy(elID)크기 조정/강제 렌더링/컨트롤 제거

이벤트 (syn-events)​

OpenGrid.js는 eventHooks 배열(rowClick, rowDoubleClick, selectionChange, cellEditEnd, sortChange, filterChange, dataChange)에 정의된 이벤트만 syn-events로 연결합니다. 핸들러 이름은 {elID}_{이벤트명} 규칙입니다.

open-grid 원본 이벤트 옵션(onXxx)과 이름·콜백 인자 구성이 다르기 때문에, OpenGrid.js는 훅 이름 → 실제 옵션명 매핑과 인자 어댑터를 내부에 두고 핸들러를 아래 위치 인자로 호출합니다.

이벤트명발생 시점핸들러 인자
rowClick / rowDoubleClick행 클릭/더블클릭 시(elID, rowIndex, row, undefined)
selectionChange셀/행 선택이 바뀌었을 때(elID, rowIndex, row) — rowIndex는 선택 범위의 첫 행 인덱스(없으면 -1), row는 해당 행 데이터
cellEditEnd셀 편집이 끝났을 때(Flag 갱신에도 사용됨)(elID, rowIndex, dataField, oldValue, newValue, row)
sortChange정렬이 바뀌었을 때(elID, dataField, sortDirection)
filterChange필터 조건이 바뀌었을 때(elID, dataField, filterItems)
dataChange데이터가 변경되었을 때(elID, data)

핸들러 등록 예:

let $samplePage = {
    event: {
        grdGrid_selectionChange(elID, rowIndex, row) {
            syn.$l.eventLog('grdGrid_selectionChange', '{0},{1}'.format(rowIndex, JSON.stringify(row)));
        },
        grdGrid_cellEditEnd(elID, rowIndex, dataField, oldValue, newValue, row) {
            syn.$l.eventLog('grdGrid_cellEditEnd', '{0}.{1}: {2} -> {3}'.format(rowIndex, dataField, oldValue, newValue));
        }
    }
}

참고​