Button (cell)

셀의 우측에 원하는 아이콘이미지, 체크박스 혹은 버튼을 표시하는 기능입니다.

열의 Type이 Date거나 Enum인 경우에는 설정과 상관없이 달력이나 드롭다운 모양의 버튼이 표시됩니다.

열의 타입이 Button인 경우에는 셀 버튼에 대한 기능으로 동작하게 됩니다.

셀의 좌측에 버튼을 설정하고자 할때는 Icon속성을 확인하세요.

Button속성
[그림1]

Button속성
[그림2]

Button속성
[그림3]

Type

string

Options

열의 Type이 Button이 아닌 경우

Value Description
Clear 셀 우측에 셀 내용을 지우기위한 버튼이 표시됩니다. [그림1] 참고
Check 셀 우측에 체크박스를 표시합니다. [그림2] 참고
Html ButtonText 속성으로 원하는 HTML태그를 넣으면 셀 우측에 표시됩니다.
공백 원래 보여져야 하는 버튼 이미지를 감춥니다.
가령 Date 타입 열은 기본적으로 달력버튼이 표시되는데 이 속성을 이용하여 버튼을 감출수 있습니다.
기타 이미지 파일에 대한 url을 넣으면 버튼의 배경으로 이미지가 표시됩니다. [그림3] 참고
(이미지는 gif, png, jpg만 가능 / 클릭시 onButtonClick이벤트가 호출)

주의: Button 속성에는 위 표의 정해진 키워드(Clear / Check / Html / 공백) 또는 이미지 파일 URL만 지정해야 합니다.
그 외의 문자열(예: <u>...</u> 같은 HTML 마크업)을 지정하면 해당 문자열을 이미지 URL로 간주하여, 그 경로로 불필요한 요청(대개 404)이 렌더마다 발생합니다.
조건에 따라 HTML을 표시하려면 마크업을 Button 속성이 아니라 ButtonText에 넣으세요.

열의 Type이 Button인 경우

value desc
Button 일반적인 버튼 형태로 보여줍니다.
UseButton속성의 값에 따라 ButtonText에 설정한 값을 <u>태그 또는 <button>태그로 만들어 줍니다.
Html 속성을 Html로 설정하면 ButtonText에 설정한 값을 HTML로 해석해 표시합니다. (ex: <div class="button">버튼</div>)
HTML 콘텐츠는 ButtonText에 넣으며, Button 속성 자체에는 HTML 마크업을 넣지 마세요.

Example

//1. 메소드를 통해 특정 셀에 속성 적용 (열이름 :CLS)
sheet.setAttribute(sheet.getRowById("AR99"), "CLS", "Button", "Clear");


//2. 객체에 직접 접근해서 속성 적용 (열이름 :CLS)
var ROW = sheet.getRowById("AR10");
ROW["CLSButton"] = "/images/alBtn.gif";
//변경내용 확인
sheet.refreshCell({row:ROW, col:"CLS"});


//3. 조회 데이터 내에서 속성 적용  (열이름 :CLS)
{
    data:[
        {..., "CLSButton":"Check", ...}
    ]
}

Read More

Since

product version desc
core 8.0.0.0 기능 추가