고급기능 JavaScript 스프레드시트에서 폼 컨트롤을 사용하여 대출 계산기 제작
페이지 정보
작성자 GrapeCity 작성일 2023-05-11 09:55 조회 221회 댓글 0건본문
첨부파일
관련링크
에서 JavaScript 스프레드시트는 고급 데이터 입력 및 선택 항목을 워크시트에 더욱 쉽게 추가하도록 적용 가능한 새로운 Excel 스타일 형식을 제공합니다.
폼 컨트롤을 사용하여 차트 시트에 컨트롤을 추가하는 등 셀 데이터를 쉽게 참조하고 상호 작용하는 데 사용할 수 있습니다. Excel은 목록에서 항목을 선택하는 데 유용한 대화 상자 시트에 여러 컨트롤을 제공합니다.
이번 블로그에서는 JavaScript 스프레드시트 내에서 폼 컨트롤의 다양한 여러 유형을 추가하도록 SpreadJS 을 사용하여 완전한 기능의 대출 계산기를 만듭니다.
이번 블로그에서는 SpreadJS 을 사용하여 JavaScript 스프레드시트 내에 여러 가지 유형의 양식 컨트롤을 추가하는 완벽한 기능을 갖춘 대출 계산기를 만듭니다.
시작하기
SpreadJS의 폼 컨트롤을 사용하여 고급 데이터 입력 및 선택 항목을 워크시트에 추가할 수 있으므로, 셀 데이터를 보다 쉽게 참조하고 상호 작용 할 수 있습니다.
SpreadJS의 v16 릴리스에서 몇 가지 흥미로운 Excel 스타일 폼 컨트롤이 여러분들의 시도를 기다리고 있습니다.
해당 샘플에서는 새로운 필수 기능을 사용하여 함수형 대출 계산기 만드는 방법에 대해 안내합니다.
워크 시트의 다양한 영역에 스타일을 지정하고, 배치하여 사용자 친화적인 폼 컨트롤을 구성하는 방법을 살펴 보겠습니다.
예시 파일을 다운로드하고 따라해 보세요.
대출 금액
컨트롤은 대출 금액을 지정하는 데 탁월합니다. 이 기능을 사용하면 값을 미리 결정된 양만큼 쉽게 늘리거나 줄일 수 있습니다.
SpreadJS에서는 아래 표시된 대로 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 spinButton을 전달하여 spinButton 폼 컨트롤을 워크시트에 추가할 수 있습니다.
//add spinButton let spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes. FormControlType.spinButton 50, 50, 160, 100);
options 메서드를 사용하여 spinButton 옵션을 설정하고 값을 할당할 수도 있습니다.
//set spinButton options var options = spinButton.options(); options.minValue = 100000; options.maxValue = 3000000; options.step = 100; options.cellLink = "'Loan Calculations'!C4"; spinButton.options(options);
이 컨트롤을 워크시트에 추가하는 또 다른 방법은 SpreadJS에서 제공하는 디자이너 컴포넌트를 사용하는 것입니다.
삽입 탭에서 컨트롤 패널을 클릭하고 '스핀 버튼' 컨트롤 유형을 선택합니다. 셰이프 서식 대화 상자를 사용하여 spinButton 옵션을 정의할 수 있습니다.
컨트롤 옵션은 아래와 같이 스핀 버튼 옵션을 정의하고 값을 할당하는 기능을 제공합니다.
대출 기간
대출 기간을 결정하는 데에 도움이 되는 옵션으로 컨트롤을 사용할 수 있습니다. Combo Box는 드롭다운 목록에 나열된 값에서 값을 선택할 수 있는 드롭다운 요소입니다.
단기 대출과 장기 대출 모두에 적합한 계산기를 만들기 위해 대출 기간을 지정할 수 있도록, 1~25년의 기간을 나열했습니다.
워크시트에서 FormControlType 열거의 comboBox 옵션을 addFormControl 메서드의 매개 변수로 추가할 수 있습니다.
//add comboBox var comboBox = sheet.shapes.addFormControl("comboBox", GC.Spread.Sheets.Shapes. FormControlType.comboBox, 100, 50, 200, 30);
options 메서드를 사용하여 comboBox 옵션을 설정하고, 입력 범위를 할당하며, 드롭다운 길이를 설정하고, 셀을 연결할 수도 있습니다.
//set comboBox options var options = comboBox.options(); options.inputRange = "'Loan Term'!A2:A26"; options.cellLink = "'Loan Calculations'!C7"; options.dropDownLines = 4; comboBox.options(options); comboBox.value(14);
이자율
이자율을 정의하기 위한 좋은 방법은 양식에서 컨트롤을 논리적으로 그룹화하여 가독성을 개선할 수 있는 컨트롤을 사용하는 것입니다. groupBox 내에서 배타적 선택만 허용하는 으로 이자율을 제시했습니다.
JavaScript 워크시트에 groupBox 폼 컨트롤을 추가하려면 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 groupBox 옵션을 전달해야 합니다.
//add groupBox var groupBox = sheet.shapes.addFormControl("groupBox", GC.Spread.Sheets.Shapes. FormControlType.groupBox, 40, 130, 240, 80);
디자이너 컴포넌트를 사용하는 경우, [삽입] 탭을 클릭하고 [폼 컨트롤] 패널에서 groupBox 컨트롤을 선택하여 groupBox를 삽입할 수 있습니다.
마찬가지로, JavaScript 스프레드시트에서 optionButton을 추가하여 addFormControl 메서드에서 매개 변수로 FormControlType 열거의 optionButton 컨트롤을 우회할 수 있습니다.
마찬가지로, addFormControl 메서드에서 매개 변수로 FormControlType 열거의 optionButton 컨트롤을 우회하여 JavaScript 스프레드시트에 optionButton을 추가할 수 있습니다.
//add optionButton var optionButton = sheet.shapes.addFormControl("optionButton", GC.Spread.Sheets.Shapes. FormControlType.optionButton, 50, 50, 100, 30);
또한 options 메서드와 셀 연결을 사용하여 컨트롤의 옵션을 설정합니다.
//set optionButton options var options = optionButton.options(); options.cellLink = "'Loan Calculations'!C8"; optionButton.options(options); optionButton.value(true);
워크시트에 optionButton을 추가하기 위해 적용할 수 있는 또 다른 방법은 삽입 탭 아래의 컨트롤 패널을 클릭하는 것입니다.
도형 서식 대화 상자를 클릭하여 아래의 컨트롤 옵션을 지정할 수 있습니다.
이자율을 계산한 '대출 계산' 시트에서 C8 셀과 이자율 optionButton을 연결했습니다.
계약금
계약금은 값비싼 상품이나 서비스를 구매하는 초기 단계에서 구매자가 지불하는 금액의 합계입니다.
앞서 언급한 바와 같이, 폼 컨트롤을 대시보드에 통합하여 차트 및 수식과 쉽게 상호 작용 할 수 있습니다. 이러한 폼 컨트롤 중 하나는 계약금을 정의하는 데 사용한 컨트롤입니다.
워크시트에 listBox 폼 컨트롤을 추가할 수 있습니다.
이 작업은 FormControlType 열거의 listBox 옵션을 addFormControl 메서드의 매개 변수로 전달하여 수행할 수 있습니다.
//add listBox var listBox = sheet.shapes.addFormControl("listBox", GC.Spread.Sheets.Shapes.FormControlType .listBox, 100, 50, 200, 150);
options 메서드를 사용하여 listbox 옵션을 설정하고, 입력 범위를 할당하며, 선택 유형을 설정하고, 셀을 연결할 수도 있습니다.
따라서 사용자가 listbox 컨트롤에서 값을 변경하면 셀의 값도 변경됩니다.
//set listBox options var options = listBox.options(); options.inputRange = "'Down Payment (%)'!A2:A11; options.cellLink = "'Loan Calculations'!C5"; options.selectionType = GC.Spread.Sheets.Shapes.ListBoxSelectionType.single; listBox.options(options);
대출 계산
빌린 금액, 월별 상환, 총 이자 및 이전에 정의된 대출 금액의 합계 상환을 계산하는 데 사용한 수식 참조를 아래에서 찾아볼 수 있습니다.
빌린 금액: 대출 금액 - (대출 금액 * 계약금) - 약정 수수료
월별 상환: PMT(이자/12, 기간*12, 빌린 금액)
합계 상환: 월별 상환 * 기간
총 이자: 총 상환 - 빌린 금액
우리는 SpreadJS 폼 컨트롤 기능을 사용하여 대출 계산기를 만들었습니다.
실행하고 있는 작업에 가치와 품질을 더하는 추가 기능을 제공할 수 있게 되어 기쁩니다. 자, 기존 대시보드를 개선하거나 새로 만들 준비가 되셨나요?
지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.