IBSheet8의 버튼은 크게 3가지로 나눌 수 있습니다.
| Type:"Button" 형식 | Button 속성을 이용한 셀 우측 버튼 | Icon 속성을 이용한 셀 좌측 버튼 |
 |  |  |
각 버튼의 세부 설정에 관해 아래를 참고해 주세요.
1. Type:"Button" 형식
- 버튼 클릭 시 onClick 이벤트에서 클릭에 대한 업무 로직을 구성하실 수 있습니다. (onButtonClick 이벤트 아님)
- 조회 된 문자(데이터)가 버튼으로 표시됩니다.
- 조회 된 데이터가 없는 경우 버튼도 표시되지 않습니다. (onClick이벤트는 발생)
- 조회 데이터 없이 열(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},
{"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:""},
];
2. 셀 우측 버튼 사용
- Text타입이나 Date,Int 등의 타입 열(Column) 우측에 버튼을 표시하려면 Button 속성을 설정합니다.
- 우측 버튼을 클릭 시 onButtonClick 이벤트가 호출됩니다.
[셀이 편집불가(CanEdit:0) 한 경우에는 셀(Cell) 내에 어디를 클릭해도 이벤트 발생] - Button 속성 값을 공백("")으로 설정하면 우측 버튼이 표시되지 않고, onButtonClick 이벤트도 발생하지 않습니다.
- 셀에서 우측 버튼이 차지하는 너비는 WidthPad 속성으로 설정할 수 있습니다.
- 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 속성을 통해 설정할 수 있습니다.
- 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},
];