New

1. 브라우저 너비에 따라 컬럼을 자동으로 숨기고 sub-row로 확인할 수 있는 반응형 컬럼 (Cfg) ResponsiveCol 기능 추가 

시트 너비가 좁아지면 우선순위가 낮은 컬럼이 자동으로 숨겨지고, 숨겨진 데이터는 확장 가능한 sub-row에서 확인할 수 있는 Cfg.ResponsiveCol 기능이 추가되었습니다.


SearchMode:2 조회 전용이며, 서브옵션 HeaderColor/HeaderWidth/Expanded를 지원합니다.


valuedescription
true/false반응형 컬럼 사용 여부
Object반응형 컬럼 관련 상세 설정

[Object 설정]

valuetype(defalut)description
HeaderColorColor String(#f0f2f5)서브 로우 헤더 색상
HeaderWidthInt(100)서브 로우 헤더 텍스트 영역 너비
Expandedboolean(false)서브 로우 표출 시 기본 펼침 여부


제약 사항은 아래와 같습니다.

[제약사항]

  • SearchMode:2인 단순 조회용 시트에서만 사용 가능
  • sub-row 편집 불가
  • ResponsiveCol 설정 시 DataMerge:0 자동 설정, setMergeRange 사용 불가
  • FitWidth, RelWidth 사용 불가
  • 소계, 합계, Solid, Foot, Head 행 사용 불가
  • 멀티레코드, 그룹시트, 트리시트 사용 불가



[사용 예시]

options.Cfg = {

    ResponsiveCol: true

    // 또는 상세 설정

    // ResponsiveCol: {

    //    HeaderColor: '#f0f2f5',

    //    HeaderWidth: 100,

    //    Expanded: false

    // }

};


[사용 화면]


[CSS 추가]

각 테마별 css에 다음 규칙이 추가되었습니다.

.IBResponsiveToggleIcon {
display: inline-block !important;
width: 16px !important;
height: 16px !important;
min-width: 16px;
min-height: 16px;
cursor: pointer;
vertical-align: middle;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 12px 12px !important;
user-select: none;
}

.IBMain .IBResponsiveSubRow { background: #f7f8fa; }
.IBMain .IBResponsiveSubRow > td { padding: 0 !important; border-bottom: 1px solid #ddd; }
.IBMain .IBResponsiveSubRowContent { padding: 0; width: 100%; box-sizing: border-box; }

.IBMain .IBResponsiveSubGrid { border-collapse: collapse; font-size: 12px; table-layout: fixed; width: 100%; }
.IBMain .IBResponsiveSubGrid > tbody > tr > td, .IBMain .IBResponsiveSubGrid > tr > td { border-bottom: 1px solid #ddd; }
.IBMain .IBResponsiveSubGridLabel { background: #f0f2f5; font-weight: 600; color: #333; white-space: nowrap; width: 80px; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; border-right: 1px solid #ddd; }
.IBMain .IBResponsiveSubGridValue { background: #fff; color: #555; text-align: left; padding: 5px 10px !important; border-right: 0 !important; }
.IBMain .IBResponsiveSubGridValue > * { text-align: left !important; }
.IBMain .IBResponsiveSubGridValue table { margin: 0 !important; }
.IBMain .IBResponsiveSubGridValue .IBCellBase { border: 0 !important; }
.IBMain .IBResponsiveSubGridValue u.IBSheetButton, .IBMain .IBResponsiveSubGridValue button.IBSheetButton, .IBMain .IBResponsiveSubGridValue button.IBRightButton { display: inline-block !important; width: auto !important; min-width: 60px; height: 16px; max-height: 16px; padding: 0 12px !important; margin: 0 !important; vertical-align: middle !important; text-align: center !important; line-height: 16px !important; }
.IBMain .IBResponsiveSubGridValue u { display: inline-block !important; max-height: 16px !important; line-height: 16px !important; margin: 0 !important; vertical-align: middle !important; }


Fixed

1. FitWidth가 설정된 시트에서 fitColWidth 호출 시 FitWidth 컬럼이 너비 계산에 포함되지 않도록 개선 


2. SearchMode:0에서 스크롤 초과 높이가 1행 미만일 때 마우스 휠로 위쪽 스크롤이 되지 않던 현상 수정 


3. Date 타입 컬럼에 Col.EditMask 설정 후 붙여넣기 시 값이 변환되어 정상 동작하지 않던 현상 수정 


4. Col.EditMask 컬럼에 오류 문자 붙여넣기 시 표시되던 오류 메시지 내용 정정 


Dialog Fix

ibsheet-dialog.js 1.0.50-20260716-13 버전에서 해당 릴리즈가 이루어졌습니다.

1. 다운로드 다이얼로그의 헤더 체크박스가 표시되지 않던 오류 수정