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

수식 입력 상자를 컨트롤로 사용하기

페이지에서 수식 입력 상자를 컨트롤로 사용할 수 있습니다.

다음 이미지와 같이 수식 입력 상자 컨트롤에서 수식을 입력하거나 볼 수 있습니다.


수식 입력 상자 컨트롤에 추가할 셀 범위를 선택할 수도 있습니다.

입력 상자에 있는 수식 범위 아이콘을 선택한 다음, Ctrl 키를 누르거나 텍스트 상자에 쉼표(,)를 추가하여 여러 범위를 선택합니다.


다음 코드 샘플은 페이지에 수식 입력 상자 컨트롤을 추가하는 예제입니다.

<script>
window.onload = function(){
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
                var activeSheet = spread.getActiveSheet();
activeSheet.setArray(0, 0, [1, 2, 3, 4, 5]);
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
fbx.workbook(spread);
                      }
</script>
...
<input type="text" id="formulaTextBox" />

다음 코드 샘플은 선택한 범위를 수식 입력 상자에 추가할 수 있도록 합니다.

Ask ChatGPT

<script type="text/javascript">
    window.onload = function(){
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
        rangeSelector = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("ftb"), {rangeSelectMode: true});
        rangeSelector.workbook(spread);
    }
    function buttonClick(){
        alert(rangeSelector.text());
    }
</script>
...
<div id="ss" style="width:50%; height:400px; border:1px solid gray;"></div>
<div id="ftb" style="width:50%;height:20px;border:1px solid gray"></div>
<button onclick="buttonClick()">Get Range Text</button>

수식 입력 상자 레이아웃 변경

SpreadJS에서는 셀 내 수식 입력 상자 및 해당 팝업 요소의 레이아웃을 워크시트 전반에 걸쳐 사용자 지정할 수 있습니다. 여러 워크시트에 대한 참조를 바인딩하는 동안 셀 내 수식 입력 상자를 숨기거나 이동할 수 있습니다. 이를 위해 CSS 파일에서 .gc-across-sheet-ftb 및 .gc-across-sheet-func-popup 클래스의 CSS 속성을 편집하면 됩니다.

다음 샘플 CSS 코드는 워크시트 전반의 셀 내 수식 입력 상자 레이아웃을 사용자 지정하는 방법을 설명합니다:

<!-- 워크시트 전반의 셀 내 수식 입력 상자 숨기기 -->
<style>       
    .gc-across-sheet-ftb {            
        z-index: -1 !important;        
    }        
    .gc-across-sheet-func-popup {            
        z-index: -1 !important;        
    }   
</style>

// 또는    

<style>      
    .gc-across-sheet-ftb {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;        
    }      
    .gc-across-sheet-func-popup {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;            
        overflow: hidden;        
    }   
</style> 

<!-- 워크북 호스트 위로 셀 내 수식 입력 상자 이동 -->
    <style>        
        .gc-across-sheet-ftb {            
            top: 10px !important;        
        }        
        .gc-across-sheet-func-popup {            
            max-height: 80px;            
            overflow-y: scroll;       
        }
    </style>

참고: 셀 내 워크시트 전반의 수식 입력 상자 및 팝업 요소는 SpreadJS Designer에서는 숨겨져 있습니다.

Ask ChatGPT