[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

상태 표시줄

SpreadJS는 워크시트 하단에 표시되는 상태 표시줄(Status Bar) 을 제공하여, 현재 셀 모드, 선택된 셀들의 평균, 개수, 숫자 개수, 최소값, 최대값, 합계, 줌 슬라이더, 줌 비율 등의 정보를 사용자에게 보여줍니다.

아래 표는 상태 표시줄에 사용할 수 있는 모든 옵션과 그에 대한 간략한 설명을 포함하고 있습니다:

옵션

설명

Cell Mode

선택된 셀의 현재 셀 모드를 표시합니다.

Average

숫자 값을 포함하는 선택된 셀들의 평균값을 표시합니다.

Count

선택된 셀의 총 개수를 표시합니다.

Numerical Count

숫자 값을 포함하는 선택된 셀의 개수를 표시합니다.

Minimum

선택된 셀 중 숫자 값의 최소값을 표시합니다.

Maximum

선택된 셀 중 숫자 값의 최대값을 표시합니다.

Sum

선택된 셀 중 숫자 값의 총합을 표시합니다.

Zoom Slider

확대/축소를 위한 플러스(+) 및 마이너스(-) 버튼이 있는 슬라이더를 표시합니다.

Zoom (100%)

현재 줌 비율을 표시합니다. 줌 퍼센트를 클릭하면 추가 확대 설정이 가능한 대화 상자가 표시됩니다.

상태 표시줄은 아래의 6가지 테마뿐 아니라 SpreadJS 워크북 테마도 지원합니다:

  1. Spread JS

  2. Excel 2013 White

  3. Excel 2013 Light Gray

  4. Excel 2013 Dark Gray

  5. Excel 2016 Colorful

  6. Excel 2016 Dark Gray

코드 사용 예

다음 코드를 참고하여 워크시트에 상태 표시줄(Status Bar) 을 표시할 수 있습니다:

// 상태 표시줄 생성, 호스트에 추가하고, 컨텍스트 내에서 바인딩
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);

아래 이미지와 같이, 사용자 정의 옵션(예: Span test) 을 추가하여 상태 표시줄을 커스터마이징할 수도 있습니다.


상태 표시줄을 마우스 오른쪽 버튼으로 클릭하면 상태 표시줄 컨텍스트 메뉴가 나타납니다.

해당 메뉴에서 아래 이미지와 같이, 사용자 정의 옵션(예: 현재 병합 - Span test) 이 기본 옵션 목록에 추가된 것을 확인할 수 있습니다.


코드 사용 예

워크시트에서 상태 표시줄을 사용자 정의하려면 아래 코드를 참고하시기 바랍니다

// GC.Spread.Sheets.StatusBar.StatusItem 통해 상태 항목 사용자 정의
var spanItem = new GC.Spread.Sheets.StatusBar.StatusItem("spanItem", {
  menuContent: "Current span",
  value: "Span test",
});
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
  document.getElementById("statusBar"),
  { items: [spanItem] }
);
statusBar.bind(spread);

// gc.spread.sheets.statusbar.statusitem 확장하여 상태 항목 사용자 정의
var statusbar = new gc.spread.sheets.statusbar.statusbar(
  document.getelementbyid("statusbar")
);
statusbar.bind(spread);
var statusitem = gc.spread.sheets.statusbar.statusitem;
function labelitem(name, options) {
  statusitem.call(this, name, options);
}
labelitem.prototype = new statusitem();
labelitem.prototype.oncreateitemview = function (container) {
  var item = document.createelement("div");
  item.innertext = this.value;
  item.style.background = "blue";
  container.addeventlistener("click", function (e) {
    //클릭 
  });
  container.appendchild(item);
};
labelitem.prototype.onupdate = function () {
  // 컨텍스트 메뉴 항목 체크가 변할 때 동작 
};
statusbar.add(
  new labelitem("labelitem", {
    menucontent: "test label",
    value: "test option",
  })
);

코드 사용 예

워크시트에서 상태 표시줄을 제거하려면 아래 코드를 참고하시기 바랍니다.

// 상태 표시줄 삭제 
statusBar.dispose();