Type:"Button"은 열(Column)을 버튼 형태로 표시하는 방식입니다.

 

1. 주요 특징

  • 버튼 클릭 시 onClick 이벤트에서 클릭에 대한 업무 로직을 구성하실 수 있습니다.(onButtonClick 이벤트 아님)
  • 조회 된 문자(데이터)가 버튼으로  표시됩니다.
  • 조회 된 문자(데이터)가 null, undefined, Name로 설정한 값이 없는 경우, 또는 공백("") 일 경우 버튼 표시되지 않습니다. (onClick이벤트는 발생)
  • 조회 된 문자(데이터)가 null, undefined, Name로 설정한 값이 없는 경우나 행 추가시 기본적인 데이터를 표시하려면 DefaultValue 속성을 설정합니다.
  • 데이터와 관계없이 동일한 버튼을 생성하고자 할 경우 ButtonText 속성으로 설정할 수 있습니다.
  • 실제 <button> 태그가 아닌 <u> 태그를 통해 버튼이 렌더링되며, <button> 태그를 사용하고자 하는 경우에는 UseButton 속성을 사용합니다.
  • 기본적으로 버튼은 셀에 꽉 찬 너비를 가지며, ButtonWidth 속성으로 너비를 조정할 수 있습니다.
  • <button>이나 <u>태그 대신 별도의 html로 표시하고자 하는 경우에는 Button 속성 값을 "Html" 로 설정하시면 됩니다.
  • Button 속성 값을 "Html" 설정하여 버튼 디자인 변경으로 행(Row) 높이가 변경된 경우, 반드시 Row.Height에 변경된 높이 값을 지정해야 세로 스크롤 계산이 정확히 이루어집니다.
  • Disabled 속성을 통해 일부 버튼을 비활성화 시킬 수 있습니다. (비 활성화 된 상태에서는 onClick 이벤트도 발생하지 않습니다.)


다음 예제를 참고해 주세요.

// 버튼 열(Column) 설정
initSheet.Cols =  [
 {"Header": "버튼1","Type": "Button","Name": "btn1","Width": 100, "DefaultValue": "확인"},
 {"Header": "버튼2","Type": "Button","Name": "btn2","Width": 100, "Align":"Center", "ButtonText":"진행중", 
  "ButtonWidth": 60},
  {"Header": "버튼3","Type": "Button","Name": "btn3","Width": 100, "Button":"Html"},
];


// 조회 데이터 참고
Data = [
{"btn1":"보류", "btn2":"보류", "btn3":"<div class='myBtn1'>진행중</div>"},
{"btn1":"완료", "btn1Disabled":1, "btn2":"완료", "btn2Disabled":1, "btn3":""},
{"btn1":"", "btn2":"승인", "btn3":"<div class='myBtn2'>오류</div>"}, //btn1 컬럼의 데이터가 빈값
{"btn1":"승인", "btn1Class":"myBtn3" ,"btn2":"대기", "btn3":""},
{"btn1":null,"btn2":null,"btn3":null}, //조회 데이터가 null
{"btn1":undefined,"btn2":undefined,"btn3":undefined}, // 조회 데이터가 undefined
{"btn2":undefined,"btn3":undefined} //btn1 컬럼의 데이터를 조회하지 않음
];


다양한 버튼 형식 예제


2. 버튼(Button) 디자인 변경 방법

  • main.css 파일에서 .IBDialogButton,u.IBSheetButton(Default 테마) 클래스를 수정하면 IBSheet 전체 버튼의 디자인을 변경 할 수 있습니다.


다음 예제를 참고해 주세요.

/* 버튼 관련 디자인 */
.IBDialogButton,
u.IBSheetButton {
    /*css로 display를 설정할 경우 ButtonWidth 동작하지 않음*/
    display: inline-block;
    background: #e7f0ff;
    border: 1px solid #b6ccff;
    color: #2f5fd0;
    border-radius: 6px;
    padding: 4px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;   
}

/*Button 에 마우스 hover 시(main.css에는 없는 class)*/
.IBDialogButton:hover,
u.IBSheetButton:hover {
    background: #93afe5;
    color: #ffffff;                 
    border-color: #7096d1;
}

/* 버튼 클릭시 */
.IBDialogButton:active,u.IBToolButtonButton1,u.IBToolSpaceButton1,u.IBToolButtonButton1:active,u.IBToolSpaceButton1:active {
    background: #041422;
}

/*값을 없을 경우 border 표시방지*/
u.IBSheetButton:empty {
    border: none !important;
    background: transparent !important;
}

디자인 변경 예제



3. 특정 컬럼만 버튼(Button) 디자인 변경 방법

  • 특정 컬럼의 버튼에 적용할 CSS 클래스를 (Col) AddClass 속성으로 설정할 수 있습니다.


다음 예제를 참고해 주세요.

nitSheet.Cols =  [
 {"Header": "기본 디자인","Type": "Button","Name": "btn1","Width": 100},
 {"Header": "변경 디자인","Type": "Button","Name": "btn2","Width": 100,"AddClass":"myButtonDesign","ButtonWidth":"60"},
   
];

//css
.myButtonDesign {background-color: rgb(12, 46, 97) !important;}

.myButtonDesign:hover
{
    background: #93afe5 !important;
    color: #ffffff;                  
    border-color: #7096d1;
}

.myButtonDesign:active {
    background: #ce2180 !important;
    border: 0px solid #1a364e
}

특정 컬럼 버튼 디자인 변경 예제


3. 데이터 값에 따라 버튼의 텍스트 변경 및 디자인 변경

  • 셀 버튼에 적용할 CSS 클래스를 (cell) AddClass 속성으로 설정할 수 있습니다.
  • AddClass 속성과 Formula(attribute+Formula) 기능을 조합하면, 데이터 값에 따라 버튼의 텍스트와 디자인을 동적으로 변경할 수 있습니다.

 

다음 예제를 참고해 주세요.


initSheet.Def.Row = {
"CanFormula":1,    //Formula 사용하겠다고 선언
"CalcOrder":"btn3AddClass" //Formula설정한 컬럼이름+attribute(AddClass)
}

//열(Column) 생성 부
initSheet.Cols = [
 {"Header": "데이터","Type": "Enum","Name": "enumData","Width": 100,Enum:"|대기|진행중|완료|표시안함",EnumKeys:"|01|02|03|04"},
 {"Header": "버튼","Type": "Button","Name": "btn3","Width": 100, ButtonWidth :"70"
  , AddClassFormula:function(fr) {
      //enum에 설정한 데이터를 Button 의 Text로 설정한다.
      fr.Row["btn3"] = fr.Sheet.getString(fr.Row,"enumData");
      let ButtonDesing = "";
      if(fr.Row["enumData"] =="01"){
        ButtonDesing = "myBtn1";
      }else if(fr.Row["enumData"] =="02"){
        ButtonDesing = "myBtn2";
      }else  if(fr.Row["enumData"] =="03"){
        ButtonDesing = "myBtn3";
      }else{
        fr.Row["btn3"] = ""; //값을 빈값으로 설정하면 버튼 표시하지 않음
        fr.Row["btn3Cursor"] = "default"; //포인터 모양을 바꿈
        ButtonDesing = "";
      }

      return ButtonDesing;
    }}
];

//데이터 참고
data = [
{"enumData":"01"},
{"enumData":"02"},
{"enumData":"03"},
{"enumData":"04"}
];


AddClassFormula 사용 예제