2025년 4분기 신규기능(Ver 8.3.0.33 ~ Ver 8.3.0.49)



Ver 8.3.0.33-20251002-16

1. StyleRowConfig에 버튼을 설정할 수 있는 Layout 옵션 추가 

시트 상단 혹은 하단에 별도의 행을 통해 시트의 스타일을 설정 할 수 있는 StyleRowConfig 속성에 스타일 행의 버튼 순서와 종류를 설정할 수 있는 Layout 옵션이 추가되었습니다.

ValueTypeDescription
LayoutArray스타일 행에 버튼의 순서와 종류를 설정합니다.
default: ["Init", "Save", "Load", "ApplyAll"]
Init: 초기화 버튼
Save: 저장 버튼
Load: 불러오기 버튼
ApplyAll: 전체 적용 버튼
InitAll: 전체 초기화 버튼


[사용 예시]

options.Cfg = {

  StyleRowConfig: {

    Visible: true,

    StorageType: 2,

    ServerUrl: "./ibsheet/styleInfo.jsp",

    AutoLoad: true,

    Themes: {

      Mono: "./assets/ibsheet/css/mono/main.css", // css 파일 내의 클래스를 key와 일치되도록 수정 필요

      IBGY: "./assets/ibsheet/css/gray/main.css"

    },

    Layout: ["Init", "Save", "Load", "InitAll"] // 초기화, 저장, 불러오기, 전체 초기화 버튼 추가

  }

};


[예시 소스 실행 결과]


Ver 8.3.0.34-20251016-16

1. Formula의 계산이 발생하기 전 시점의 onBeforeRowFormula 이벤트 추가 

각 행에서 Formula가 실행되기 전 호출되는 이벤트인 onBeforeRowFormula 이벤트가 추가되었습니다.

리턴을 통해 Formula의 실행을 제어할 수 있습니다.

> 1(true)리턴 시 각 행에서 실행되는 실행되는 Formula 동작을 막습니다. 

**주의 : 해당 이벤트는 Formula 설정이 많을 수록 많이 호출되기 때문에 성능에 문제가 발생할 수 있습니다.


NameTypeDescription
sheetobject시트 객체
rowobjectFormula가 실행되는 데이터 로우 객체
colstringFormula가 실행되는 열이름
formulaNamestring실행되는 Formula이름
eventNamestring해당 이벤트 이름(onBeforeRowFormula)


options.Events = {

    onBeforeRowFormula:function(evtParam){

        // 첫번째 행이 아닐 때 Formula를 실행하지 않습니다.

        var sheet = evtParam.sheet;

        var datas = sheet.getDataRows();

        if (datas.length > 0) {

            var firstRow = sheet.getFirstRow();

            if (evtParam.row != firstRow) {

                return true;

            }

        }

    }

}


2. Filter행의 Defaults의 최대 너비를 설정할 수 있는 (Cfg) FilterDefaultsMaxWidth 추가

필터 행에서 Defaults 를 사용할 때 생성되는 필터 메뉴의 MaxWidth 를 설정합니다.

생성될 필터 메뉴의 width 가 설정하는 값보다 작은 경우에는 기존의 생성될 width 가 우선되고, 설정하는 값보다 큰 경우에 필터 메뉴의 너비 축소 및 가로 스크롤이 생성됩니다.


options.Cfg = {

    FilterDefaultsMaxWidth: 500

};


3. getSaveJson 사용 시 null값을 ""이 아닌 null로 추출할 수 있는 (Cfg)PreserveNull 옵션 추가 

사용자가 데이터를 null로 기입한 경우 시트 객체에 null 값 그대로 바인딩하고, getSaveJson으로 데이터 추출시 데이터를 ""이 아닌 null 값 그대로 추출합니다.

ValueDescription
0사용자가 데이터를 null로 기입해도 getSaveJson으로 데이터 추출할 때는 데이터가 ""으로 추출됨 (default)
1사용자가 데이터를 null로 기입한 경우 getSaveJson으로 데이터 추출할 때 데이터가 null 값 그대로 추출됨

options = {

    Cfg :{

        PreserveNull: 1, // 사용자가 데이터를 null로 기입한 경우 getSaveJson으로 데이터를 추출할 때 데이터가 null 값 그대로 추출됨

        ...

    }

};



Ver 8.3.0.35-20251023-16

1. Group시 정렬 여부를 제어할 수 있는 (Cfg) GroupSort 옵션 추가 

기본적으로 ibsheet8은 Group 시 자동으로 데이터가 정렬이 되도록 동작합니다.

Group 시에 데이터를 자동으로 정렬하지 않도록 설정하는 옵션인 Cfg.GroupSort 옵션이 추가되었습니다.

GroupSort:false 로 설정 시 자동 정렬이 이뤄지지 않습니다.


[사용 예시]

options.Cfg:{

     GroupSort:false // 그룹 시 정렬하지 않음

}


2. (Cfg) UseFilterDialog 설정 시 세부 사항을 설정할 수 있는 옵션 제공 

UseFilterDialog 설정 시 최상단 입력 필터를 숨길지 여부, 높이, ZIndex를 조절할 수 있도록 인자 값으로 object를 설정할 수 있게 추가 되었습니다.

object 설정 시 자동으로 UseFilterDialog 는 기능을 사용한다고 인식합니다.


[options 로 설정할 수 있는 값]

ValueDescription
HideInputFilter
UseFilterDialogInputFilterArea

데이터 필터 다이얼로그 최상단의 입력 필터를 숨길지 여부를 설정합니다.
true: 데이터 필터 다이얼로그를 오픈할 때, 다이얼로그 최상단에 입력 필터를 숨깁니다.
false: 데이터 필터 다이얼로그를 오픈할 때, 다이얼로그 최상단에 입력 필터를 포함합니다. (default: false)
Height
UseFilterDialogItemArea

데이터 필터 다이얼로그 아이템 영역의 높이를 조정합니다. (default: 180)
ZIndex시트의 (Cfg) ZIndex와 무관하게 필터 다이얼로그의 Zindex를 조정합니다.

[사용 예시]

UseFilterDialog: {

   HideInputFilter: true, // 데이터 필터 다이얼로그 내부의 텍스트 필터 다이얼로그 태그를 표시하지 않는 옵션

   Height: 150, // 데이터 필터 다이얼로그 오픈 시점의 높이를 조정하는 옵션

   ZIndex: 9999, // 데이터 필터 다이얼로그의 ZIndex 값을 조정하는 옵션

},


Ver 8.3.0.37-20251030-14

1. 시트의 넓이가 css 클래스에 설정된 height나 width로 설정되는 (Cfg) UseClassStyle 추가 

시트에 class 속성이 설정되어 있는 경우, 해당 class에 지정된 CSS에서 height와 width 값을 읽어 시트 생성 시 너비와 높이에 적용하는 UseClassStyle이 추가되었습니다.

너비와 높이가 적용되는 우선순위는 style속성 > class속성 > 기본 값 순으로 적용됩니다.

각 항목에 설정된 값이 없을 경우, 다음 순서로 우선순위가 넘어갑니다.

너비는 100%, 높이는 800px를 기본값으로 갖습니다.


주의 : 이 기능은 단일 Class 정보만을 대상으로 동작합니다.


[사용 예시]

options.Cfg = {

    UseClassStyle: true, // 시트 div에 style 정보가 없을 경우, class에 선언된 css 클래스들을 확인하여 width와 height를 시트 너비와 높이에 적용

};


2. (Method)showFilterDialog에 필터다이얼로그을 설정할 수 있는 opt인자 추가 

showFilterDialog에 필터 다이얼로그의 상세 설정을 설정할 수 있는 opt 인자가 추가되었습니다.

지정 가능한 옵션은 상단 input 검색창 표현 여부, 높이, z-index 값이 있습니다.


[사용 예시]

sheet.showFilterDialog({

    opt: {

      HideInputFilter: true,

      Height: 50,

      ZIndex: 9999,

    }

});



Ver 8.3.0.40-20251113-17

1. UseFilterDialog의 데이터 목록을 표시 방법을 설정하는 Mode 옵션 추가
데이터 필터 목록에 포함될 데이터를 결정합니다.
디폴트는 1이며 2 를 설정할 경우 현재 적용된 필터에 해당하는 데이터를 포함하여 목록을 표시합니다. 

ValueDescription
Mode
데이터 필터 목록에 포함될 데이터를 결정합니다.

1: 현재 보여지는 데이터를 포함하여 목록을 표시합니다. (default)
2: 현재 적용된 필터에 해당하는 데이터를 포함하여 목록을 표시합니다.


[사용 예시]

//헤더행에 필터 다이얼로그를 띄우는 필터 다이얼로그 아이콘을 생성합니다.

options.Cfg = {

    UseFilterDialog: true

};


options.Cfg = {

    // 필터 다이얼로그를 띄울 때, 어떻게 띄울지 변경합니다.

    UseFilterDialog: {

      HideInputFilter: true, // 데이터 필터 다이얼로그를 띄울 때, 다이얼로 최상단의 입력 필터를 띄우지 않습니다.

      Height: 150, // 데이터 필터 다이얼로그를 띄울 때, 아이템 영역의 높이를 150px로 조정합니다.

      ZIndex: 1000, // 필터 다이얼로그의 `ZIndex`를 1000으로 설정합니다.

      Mode: 2 //현재 적용된 필터에 해당하는 데이터를 포함하여 목록을 표시

    },

};






Ver 8.3.0.42-20251120-16

1. 새로운 행을 추가하지 않고 그룹 행에 소계를 표시하는 (Cfg) UseGroupSubTotal: 2 기능 추가 

기존에는 UseGroupSubTotal:1 속성만 제공하여 소계행이 그룹행 이외에 따로 생성되었습니다.

[UseGroupSubTotal:1 사용]


소계행을 따로 만들고 싶지 않고, 그룹행에 함께 표시하고자 할 때 UseGroupSubTotal:2 를 사용할 수 있습니다.

[UseGroupSubTotal:2 사용]



[사용 예시]

options.Cfg = {

    UseGroupSubTotal:2 // 그룹행에 소계를 함께 표시

};


optons.Col =[

     ...

    {"Header": "추천수","Name": "sRcmn","Type": "Int","Format": "#,###","MinWidth": 140,"Width": 140

          ,GroupSubTotal: { Type: "Sum", Format: "#,###", TextColor: "#FFB2F5" }

     },

     ...

];


2. 셀 단위로 설정할 수 있는 (Cell) SpinnerVisible, (Cell) SpinnerMax, (Cell) SpinnerMin, (Cell) SpinnerStep 옵션 추가 

Type:Int, Float 인 컬럼에 적용 가능한 (Col)Spinner 관련 속성들을 Cell 개별적으로 설정할 수 있도록 속성이 추가되었습니다.


[사용 예시]

var data = [

     {"aa":123, "bb":222, "bbSpinnerVisible":1},

     .....

];



Ver 8.3.0.43-20251127-14

1. MaxSort 이상 정렬 시, 가장 이전의 정렬이 취소되면서 정렬의 우선 순위는 유지되는 (Cfg) HeaderSortMode: 4 추가 

(Cfg)HeaderSortMode: 0(default)은 클릭하여 순서대로 대분류/중분류/소분류가 되며,

MaxSort 이상 정렬 시도 시 정렬 시도를 무시했습니다.


사용의 다양성을 위해 HeaderSortMode:0 과 동일하게 클릭 순서대로 대분류/중분류/소분류가 되지만,

MaxSort 이상 정렬 시도 시 가장 이전의 정렬을 취소시키고 우선순위를 유지하는 옵션인 HeaderSortMode:4 가 추가되었습니다.


[동작 예시]

아래와 같은 상황의 시트에서 "실수" 컬럼을 클릭 시


"콤보" 컬럼의 sort가 취소되고 "실수" 컬럼이 3순위 sort 컬럼이 됨



[사용 예시]

options.Cfg = {

    HeaderSortMode :4

};




Ver 8.3.0.45-20251204-15

1. loadExcel로 엑셀 파일 업로드 시 SEQ 포함 여부를 결정할 수 있는 skipSEQ 인자 추가 

해당 인자 사용을 위해 servermodule: 2.0.13, excel: 1.1.31-20251204-15 이상 버전이 필요합니다.

loadExcel 시 mode:NoHeader,HeaderSkip 의 경우 원치 않는 엑셀의 SEQ 컬럼이 업로드 되어 한 칸씩 밀리는 상황이 있습니다.

사용의 다양성을 제공하고자, loadExcel 인자로 엑셀의 SEQ를 포함하여 업로드할 지 여부를 결정할 수 있는 skipSEQ 인자가 추가되었습니다.


[사용 예시]

sheet.loadExcel({

     mode:"HeaderSkip",

     skipSEQ:true // 엑셀의 SEQ 컬럼은 업로드하지 않는다.

})



2. setRowValue 시 시트 랜더링 여부를 선택 할 수 있는 render 인자 추가, 시트 계산 여부를 선택 할 수 있는 noCalc 인자 추가 

행 단위별 데이터를 설정하는 setRowValue 의 경우 셀 단위 데이터를 설정하는 setValue 와는 다르게 렌더링 여부와 시트 계산 여부를 지정할 수 없었습니다.

데이터 설정 시 동작의 일관성을 유지하기 위해 setRowValue 에 렌더링 여부와 시트 계산 여부를 컨트롤 할 수 있는 render, noCalc 인자가 추가되었습니다.

해당 인자를 false 로 사용 시에는 rerender() 와 calculate() 를 호출하여 수동으로 해당 작업을 해야합니다.


[사용 예시]

var row = sheet.getRowById("AR5"); // ID가 AR5인 행

var data = sheet.getRowValue(row); 

var targetRow = sheet.getRowById("AR1"); 

sheet.setRowValue({

     row : targetRow, 

     data : data,

     render : false, // 호출 후 즉시 반영하지 않음

     noCalc : false // 호출 후 즉시 포뮬러 계산하지 않음

}); 


sheet.rerender(); // 시트 렌더링

sheet.calculate(); // 시트 포뮬러 계산




Ver 8.3.0.47-20251218-15

1. Format에 설정한 자릿수만큼 출력 되는 (Cfg) FloatCalcMode 추가 

Float Type 인 컬럼에서 계산 시 (col)Format과 설정한 소수점 길이보다 짧게 출력되거나 예상했던 결과 값보다 소수점 자릿수가 길게 출력되는 경우 보정치 값을 변경하도록 설정합니다.

기본적으로 설정된 소수점 계산의 보정치는 1e5 즉, 1 * 10의 5승인 100000을 기본 값으로 설정하여 계산합니다. 

Format으로 소수점부를 길게 설정하는 경우 FloatCalcMode:1 로 설정하면 Format에 설정된 소수점 길이에 맞춰 자동으로 계산이 되어 JavaScript에서 필연적으로 발생하는 부동소수점 현상을 최대한 방지할 수 있습니다.


[사용 예시]

options.Cfg :{

    FloatCalcMode: true

};



2. Hint가 표시되는 최대 너비를 설정할 수 있는 (Cfg) HintMaxWidth 추가 

기존에는 Hint 가 데이터 길이에 맞춰서 출력이 되었습니다. 그러다보니 긴 데이터의 Hint를 확인할 때 Hint가 의도치않게 길어지는 상황이 발생합니다.

추가된 (Cfg)HintMaxWidth 를 사용하면 Hint가 표시되는 최대 너비를 지정할 수 있습니다.


[사용 예시]

options.Cfg :{

    HintMaxWidth : 200 // Hint 의 너비가 200px 가 넘어가지 않도록 설정

};




3. Tip이 표시되는 최대 너비를 설정할 수 있는 (Cfg) TipMaxWidth 추가 

기존에는 Tip이 데이터 길이에 맞춰서 출력이 되었습니다. 그러다보니 긴 데이터의 Tip를 확인할 때 Tip이 의도치않게 길어지는 상황이 발생합니다.

추가된 (Cfg)TipMaxWidth 를 사용하면 Tip이 표시되는 최대 너비를 지정할 수 있습니다.


[사용 예시]

options.Cfg :{

    TipMaxWidth : 100 // Tip 의 너비가 100px 가 넘어가지 않도록 설정

};



Ver 8.3.0.48-20251224-16

1. 마우스 호버 시 열, 행단위로 강조를 표시하는(Cfg) Hover: 3 추가 

마우스 호버 시에 열에는 .IBHoverColBackground, 행에는 .IBHoverRowBackground 클래스가 지정되게 만들 수 있는 (Cfg)Hover:3 속성이 추가되었습니다.

호버 시 열, 행단위 색상을 표시하려면 각 .IBHoverColBackground, .IBHoverRowBackground 에 backgound-color css 지정이 필요합니다. 


[Hover:3, css 적용 후 호버 시 시트]

[사용 예시]

options.Cfg :{

    Hover: 3

};


/*css 설정*/

.IBHoverColBackground{

  background-color:#ff00003d;

}


.IBHoverRowBackground{

  background-color:#ff00003d;

}



2. Enum 타입 셀의 편집 메뉴에 메뉴의 항목들을 필터링 할 수 있는 (Col) EnumFilter 옵션 추가 

Type:Enum 컬럼에 Enum값이 많은 경우, 사용자가 검색을 할 수 있도록 keyword 영역이 만들어지는 EnumFilter 옵션이 추가되었습니다. Enum에서 사용하는 suggest 기능으로 이해하시면 됩니다.

사용을 위해서는 추가된 css 추가가 필요합니다.


[EnumFilter:true 설정 컬럼]

[EnumFilter:true 설정 후 값 필터링]


[사용 예시]

options.Cols:[

      {"Header": "콤보(Enum)",

      "Type": "Enum",

      "Name": "ComboData",

      "Enum": "|대기|진행중|완료",

      "EnumKeys": "|01|02|03",

      EnumFilter:1},

];