셀 버튼

셀 버튼(Cell buttons)은 시트 셀에 추가하여 부가적인 기능을 구성할 수 있는 미리 정의된 버튼 집합입니다. 셀 버튼은 사용자가 셀 버튼을 클릭하거나, 셀을 편집하거나, 셀 위에 마우스를 올리는 등의 작업에 대해 특정 동작을 구성할 수 있도록 합니다.

cellbuttons 유형은 Style 클래스에 속하므로, 선택적으로 적용할 수 있는 이름이 지정된 스타일(named style)을 생성하여 셀에 쉽게 적용할 수 있습니다.

예를 들어, 셀에 색상 선택기 드롭다운이 있는 버튼을 만들기 위해 사용자 정의 색상 선택기 스타일을 정의하고 이를 사용하여 셀에 적용할 수 있습니다. 스타일은 재사용 가능하며 다른 셀에도 쉽게 적용할 수 있습니다.

아래 GIF는 원하는 사용자 정의 작업을 달성하기 위해 일부 셀 버튼 명령 및 속성을 사용하는 예시를 보여줍니다.

• 'Insert' 캡션이 있는 셀 버튼

  
  

  // Workbook과 Worksheet 구성
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  // 캡션이 있는 기본 버튼 추가
  var basicButttonStyle = new GC.Spread.Sheets.Style();
  basicButttonStyle.cellButtons = 
  [
      {
          caption: "Insert"
      }
  ];
  activeSheet.setText(2, 3, "Basic button with caption");
  activeSheet.setStyle(2, 4, basicButttonStyle);

• 'enabled' 속성이 true 및 false로 설정된 셀 버튼

  
  

  // Workbook과 Worksheet 구성
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  // 버튼을 추가할 때 위치, 스타일, 사용 가능 여부(활성/비활성) 등 다양한 구성 설정을 지정 가능
  var customButtonStyle = new GC.Spread.Sheets.Style();
  customButtonStyle.cellButtons = 
  [
      {
          caption: "enable",
          useButtonStyle: true,
          // enabled: true,
          hoverBackColor: "#3390FF",          
          position: GC.Spread.Sheets.ButtonPosition.left
      },
      {
          caption: "disabled",
          useButtonStyle: false,
          enabled: false,
          position: GC.Spread.Sheets.ButtonPosition.right
      }
  ];
  activeSheet.setText(4, 3, "enabled/disabled buttons");
  activeSheet.setStyle(4, 4, customButtonStyle);

• 선택된 셀에 셀 버튼이 표시되도록 설정

  
  

  // Workbook과 Worksheet 구성 
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  // 버튼 visibility 속성 추가
  var onScreenstyle = new GC.Spread.Sheets.Style();
  onScreenstyle.cellButtons = [
       {
          caption: "On Select",
          buttonBackColor:"#ffdc9d",
          visibility: GC.Spread.Sheets.ButtonVisibility.onSelected
     }
  ];
  activeSheet.setStyle(10, 10, onScreenstyle);
  activeSheet.getCell(10,10).value("Select cell..").vAlign(GC.Spread.Sheets.VerticalAlign.bottom);

• 내장된 이미지와 사용자 지정 이미지가 있는 셀 버튼

  
  

  // Workbook과 Worksheet 구성 
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  //내장된 이미지와 사용자 지정 이미지가 있는 셀 버튼 추가 
  var ImageStyle = new GC.Spread.Sheets.Style();
  ImageStyle.cellButtons =
  [
      {
          useButtonStyle: true,
          imageSize: {
                  height: 8,
                  width: 8
          },
          imageType: GC.Spread.Sheets.ButtonImageType.ellipsis
      },
      {
          useButtonStyle: true,
          imageType: GC.Spread.Sheets.ButtonImageType.custom,
          imageSrc:"data:image/bmp;base64, Qk1eAAAAAAAAAD4AAAAoAAAACAAAAAgAAAABAAEAAAAAACAAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP///wB+AAAApQAAANsAAAClAAAApQAAANsAAAClAAAAfgAAAA=="
      }
  ];
  activeSheet.setText(6, 3, "Image Buttons");
  activeSheet.setStyle(6, 4, ImageStyle);

• 워크시트에서 확대 및 축소 작업을 수행하도록 command 함수가 설정된 셀 버튼

  Ask ChatGPT

  
  

  //Workbook과 Worksheet 구성 
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  // 명령 함수가 있는 버튼 추가
   명령 var buttonCommandfunction = new GC.Spread.Sheets.Style();
  buttonCommandfunction.cellButtons =
  [
      {
          imageType: GC.Spread.Sheets.ButtonImageType.search,
          command: (sheet, row, col, option) =>
          {
              if (sheet.zoom() === 1) {
                  sheet.zoom(1.5);
              } else {
                  sheet.zoom(1);
              }
          }
      }
  ];
  activeSheet.setText(10, 3, "Button with command function");
  activeSheet.setStyle(10, 4, buttonCommandfunction);

• 알림 메시지를 트리거하도록 command 함수가 설정된 셀 버튼

  
  

  // Workbook과 Worksheet 구성
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  // 경고 명령 동작이 있는 버튼 추가
  var visibleStyle = new GC.Spread.Sheets.Style();
  visibleStyle.cellButtons = 
  [
      {
          caption:"Alert",
          buttonBackColor: "#00C2D6",
          command: (sheet, row, col, option) => {
              alert("This is an alert.");
          }
      }
  ];
  activeSheet.setStyle(7, 10, visibleStyle);

• ButtonImageType 열거형에서 dropdown 값으로 설정되고 opencolorpicker 명령을 수행하도록 설정된 셀 버튼

  
  

  //Workbook과 Worksheet 구
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var activeSheet = spread.getActiveSheet();
  
  //명령 동작이 있는 드롭다운 버튼 추가
  var dropdownStylecommand = new GC.Spread.Sheets.Style();
  dropdownStylecommand.cellButtons =
  [
      {
          imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
          useButtonStyle: true,
          command: "openColorPicker"
      }
  ];
  activeSheet.setText(8, 3, "Dropdown button with command");
  activeSheet.setStyle(8, 4, dropdownStylecommand);        

셀 버튼 구성

다음 표에 설명된 다양한 속성을 사용하여 셀 버튼을 구성할 수 있습니다:

버튼 명령 정의

셀 버튼을 생성한 후, 아래 표에 나열된 옵션에 따라 다양한 기능을 버튼에 연결할 수 있습니다: