[]
        
(Showing Draft Content)

이름 상자

SpreadJS는 Excel과 유사한 이름 상자 컴포넌트를 제공하여, 선택된 셀 범위, 항목, 명명된 범위를 표시할 수 있습니다. 이 기능은 Spread 컨트롤과 함께 이름 상자 컴포넌트를 프로젝트에 추가하여 사용할 수 있게 해줍니다.

이름 상자는 기본적으로 선택된 셀의 주소를 표시하며, 선택 박스드롭다운 목록 으로 구성되어 있습니다.

namebox-container.png

다음과 같이 이름 상자 선택기에 선택 내용을 표시할 수 있습니다:

  • 선택이 변경될 때 선택 범위를 표시

    select-a-range.png

  • 선택이 완료되었을 때 활성 셀을 표시

    namebox-gif.gif

  • 도형이 선택되었을 때 도형 이름을 표시

    selection-drawing.png

  • 선택한 범위가 명명된 범위 또는 테이블 이름과 같을 경우 해당 이름을 표시

    select-table.png

이름 상자의 드롭다운에는 다음과 같은 사용자 지정 이름 목록이 표시됩니다:

  • 통합 문서 사용자 지정 이름 및 그 표현식 유형이 **GC.Spread.CalcEngine.ExpressionType.reference**인 항목

  • 활성 워크시트의 사용자 지정 이름 및 그 표현식 유형이 **GC.Spread.CalcEngine.ExpressionType.reference**인 항목

  • 모든 워크시트의 모든 테이블 이름

이름 상자 구성

이름 상자 구성 요소를 만들기 위해 아래 단계를 따르시기 바랍니다:

  1. HTML에 gc.spread.sheets.all.x.x.x.min.js 참조를 추가합니다.

    <script type="text/javascript" src="scripts/modules/gc.spread.sheets.all.x.x.x.min.js"></script>
  2. 호스트 DIV 요소를 추가합니다.

    <div id="NameBox" style="width:100px"></div>
  3. NameBox 요소를 Spread 인스턴스에 바인딩합니다.

    var sheet = spread.getActiveSheet();
    var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('NameBox'), spread);
  4. 추가로 이름 상자 옵션을 설정할 수도 있습니다. 자세한 내용은 아래의 이름 상자 옵션 설 섹션을 참고하세요.

이름 상자 옵션 설정

INameBoxOptions 인터페이스를 사용하여 이름 상자의 동작을 제어할 수 있는 다양한 옵션을 설정할 수 있습니다.

예를 들어, 드롭다운 목록의 높이 설정, 사용자 정의 이름 추가, 범위로의 이동, 사용자 정의 이름 표시 등을 제어할 수 있습니다.

옵션 이름

dropDownMaxHeight

Number

드롭다운 목록의 최대 높이를 지정합니다. 기본값은 500px입니다.

enableAddCustomName

Boolean

선택기에 존재하지 않는 이름을 입력할 때 사용자 정의 이름을 추가할지 여부를 지정합니다. 기본값은 true입니다.

enableNavigateToRange

Boolean

이름 또는 사용자 정의 항목을 클릭할 때 명명된 범위 또는 도형 항목으로 이동할지 여부를 지정합니다. 기본값은 true입니다.

showCustomNameList

Boolean

사용자 정의 이름 목록 드롭다운 표시 여부를 지정합니다.

다음 코드는 이름 상자 옵션을 설정하는 방법을 보여줍니다:

 var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('NameBox'), spread, {
                showCustomNameList: false,
                dropDownMaxHeight: 200,
                enableAddCustomName: false,
                enableNavigateToRange: false
 });

참고: 이름 상자에는 다양한 Excel 테마를 적용할 수 있습니다.

SpreadJS 구성 요소에 테마를 적용하는 방법에 대한 자세한 내용은 테마 항목을 참조하시기 바랍니다.