IBSheet8의 버튼은 크게 3가지로 나눌 수 있습니다.


Type:"Button" 형식Button 속성을 이용한
셀 우측 버튼		Icon 속성을 이용한
셀 좌측 버튼
 

 


각 버튼의 세부 설정에 관해 아래를 참고해 주세요.


1. Type:"Button" 형식


 

  • 버튼 클릭 시 onClick 이벤트에서 클릭에 대한 업무 로직을 구성하실 수 있습니다. (onButtonClick 이벤트 아님)
  • 조회 된 문자(데이터)가 버튼으로  표시됩니다.
  • 조회 된 문자(데이터)가 없는 경우( "" 또는 null ) 버튼 표시되지 않습니다. (onClick이벤트는 발생)
  • 조회 된 문자(데이터)가 없거나( null ) 행을 추가시 기본적인 데이터를 표시하려면 DefaultValue 속성을 설정합니다.
  • 열조회 데이터 없이 (Column) 전체에 동일한 버튼을 생성하고자 할 때에는 ButtonText 속성으로 설정할 수 있습니다.
  • 실제 <button> 테그가 아닌 <u> 테그를 통해 되며, <button> 테그를 사용하고자 하는 경우에는 UseButton 속성을 사용합니다.
  • 기본적으로 버튼은 셀에 꽉 찬 너비를 갖게 되고 ButtonWidth 속성을 통해 변경할 수 있습니다.
  • <button>이나 <u>테그 대신 <img>같은 별도의 html로 표시하고자 하는 경우에는 Button 속성 값을 "Html" 로 설정하시면 됩니다.
  • 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":"승인", "btn1Class":"myBtn3" ,"btn2":"대기", "btn3":""},
 {"btn1":null,"btn2":null,"btn3":null}
];


다양한 버튼 형식 예제



2. 셀 우측 버튼 사용



  • Text타입이나 Date,Int 등의 타입 열(Column) 우측에 버튼을 표시하려면 Button 속성을 설정합니다.
  • 우측 버튼을 클릭 시 onButtonClick 이벤트가 호출됩니다.
    [셀이 편집불가(CanEdit:0) 한 경우에는 셀(Cell) 내에 어디를 클릭해도 이벤트 발생]
  • Button 속성 값을 공백("")으로 설정하면 우측 버튼이 표시되지 않고, onButtonClick 이벤트도 발생하지 않습니다.
  • 우측 버튼 영역에 대한 너비는  WidthPad 속성을 통해 설정할 수 있습니다.
  • "Button" : "Check" 의 check/uncheck 값은 Checked 속성으로 확인 가능 합니다.
  • json Event OnClickSide  사용할 수 있습니다.


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

// 열(Column) 생성 부
initSheet.Cols =  [
  {"Header": "버튼1","Type": "Text","Name": "btn1","Width": 120, Button:"Button", 
     ButtonText:"확인", WidthPad:50},
  {"Header": "버튼2","Type": "Int","Name": "btn2","Width": 100, Button:"Clear"},
  {"Header": "버튼3","Type": "Text","Name": "btn3","Width": 120, WidthPad: 50}
];

//조회 데이터 참고
data = [
  {btn1:"SM8201", btn2:98001,btn3:"XZ2482", btn3Button:"Check"},
  {btn1:"KC3942",btn1Button:"",btn2:12345,btn3:"ZIO5621",
     btn3Button:"Html", btn3ButtonText:"<button class='myBtn1'>찾기</button>"},
  {btn1:"MT1020",btn2:0,btn3:"KI7291", btn3Button:"/assets/img/search.gif" },
  {btn1:"JX888", btn2:-3921,btn3:""}
];


우측 버튼 예제



3. 셀 좌측 버튼(Icon) 사용



  • Icon 속성을 통해 셀 좌측에 버튼을 표시할 수 있습니다.
  • 좌측 버튼을 클릭시 onIconClick 이벤트가 발생합니다.
  • Icon속성 값이  "Check"나 "Clear" 인 경우에는 onIconClick 이벤트가 발생하지 않습니다.
  • Icon의 위치는 IconAlign속성을 통해 변경 할 수 있습니다.
  • 좌측 버튼 영역에 대한 너비는 IconWidth 속성을 통해 설정할 수 있습니다.
  • "Icon" : "Check" 의 check/uncheck 값은 Checked 속성으로 확인 가능 합니다.
  • json Event OnClickSide  사용할 수 있습니다.


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


//열(Column) 생성 부
initSheet.Cols = [
  {"Header": "버튼1","Type": "Text","Name": "btn1","Width": 120, Icon:"Check"},
  {"Header": "버튼2","Type": "Int","Name": "btn2","Width": 100, Icon:"Clear"},
  {"Header": "버튼3","Type": "Text","Name": "btn3","Width": 120, Icon: plus_icon},   
];

//데이터 참고
data = [
  {btn1:"SM8201", btn2:98001,btn3:"XZ2482"},
  {btn1:"KC3942",btn2:12345,btn3:"ZIO5621"},
  {btn1:"MT1020",btn2:0,btn3:"KI7291",btn3Icon: minus_icon},
  {btn1:"JX888", btn2:-3921,btn3:"",btn3Icon: minus_icon},
];

좌측 버튼 예제