チェックボックス型セル

window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4 }); initSpread(spread); // エクスポートボタンのクリックイベントを設定します document.getElementById("exportExcel").onclick = function() { exportToExcel(spread); }; }; function initCellStyle(fontSize, foreColor) { const style = new GC.Spread.Sheets.Style(); style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; style.font = `bold ${fontSize}pt Calibri`; style.foreColor = foreColor; return style; } function propertyChange(spread, isSet) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getActiveSheet(); var sels = sheet.getSelections(); if (sels && sels.length > 0) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var checkboxCellType = sheet.getCellType(sel.row, sel.col); if (!(checkboxCellType instanceof spreadNS.CellTypes.CheckBox)) { _getElementById("changeProperty").setAttribute("disabled", 'disabled'); return; } // 「Checkbox」または「Modern」シート上の、hitTestModeデモ用セル（4行目、2列目または3列目）かどうかを確認します var sheetName = sheet.name(); if ((sheetName === "Checkbox" || sheetName === "Modern") && sel.row === 4 && (sel.col === 2 || sel.col === 3)) { _getElementById("checkboxOption").style.display = "none"; _getElementById("toggleOptions").style.display = "none"; _getElementById("hitTestModeOption").style.display = "block"; _getElementById("textEditableOption").style.display = "none"; if (!isSet) { _getElementById("changeProperty").removeAttribute("disabled"); _getElementById("selHitTestMode").value = checkboxCellType.hitTestMode(); } else { checkboxCellType.hitTestMode(_getElementById("selHitTestMode").value); // hitTestModeの値に従ってキャプションを更新します var hitTestMode = _getElementById("selHitTestMode").value; if (hitTestMode === 'checkbox') { checkboxCellType.caption("チェックボックスのみクリック"); } else { checkboxCellType.caption("セルをクリック"); } } sheet.repaint(); return; } // 「Checkbox」または「Modern」シート上の、textEditableデモ用セル（5行目、2列目または3列目）かどうかを確認します if ((sheetName === "Checkbox" || sheetName === "Modern") && sel.row === 5 && (sel.col === 2 || sel.col === 3)) { _getElementById("checkboxOption").style.display = "none"; _getElementById("toggleOptions").style.display = "none"; _getElementById("hitTestModeOption").style.display = "none"; _getElementById("textEditableOption").style.display = "block"; if (!isSet) { _getElementById("changeProperty").removeAttribute("disabled"); _getElementById("ckbTextEditable").checked = checkboxCellType.textEditable(); } else { checkboxCellType.textEditable(_getElementById("ckbTextEditable").checked); // textEditableの値に従ってキャプションを更新します var textEditable = _getElementById("ckbTextEditable").checked; if (textEditable) { checkboxCellType.caption("編集モードに入れます"); } else { checkboxCellType.caption("編集モードに入れません"); } } sheet.repaint(); return; } // 通常のチェックボックス／トグルモード _getElementById("hitTestModeOption").style.display = "none"; _getElementById("textEditableOption").style.display = "none"; const checkboxMode = checkboxCellType.mode(); if (checkboxMode === 'toggle') { _getElementById("checkboxOption").style.display="none"; _getElementById("toggleOptions").style.display="block"; } else { _getElementById("checkboxOption").style.display="block"; _getElementById("toggleOptions").style.display="none"; } if (!isSet) { _getElementById("changeProperty").removeAttribute("disabled"); if (checkboxMode === 'toggle') { _getElementById("toggleCheckBoxCellTextCaption").value = checkboxCellType.caption(); _getElementById("toggleCheckBoxCellTextTrue").value = checkboxCellType.textTrue(); _getElementById("toggleCheckBoxCellTextFalse").value = checkboxCellType.textFalse(); _getElementById("selToggleCheckBoxCellAlign").value = checkboxCellType.textAlign(); const toggleOptions = checkboxCellType.toggleOptions(); _getElementById("toggleCheckBoxCellWidth").value = toggleOptions.width; _getElementById("toggleCheckBoxCellHeight").value = toggleOptions.height; _getElementById("toggleCheckBoxCellSliderMargin").value = toggleOptions.sliderMargin; _getElementById("toggleCheckBoxCellSliderRadius").value = toggleOptions.sliderRadius; _getElementById("toggleCheckBoxCellTrackRadius").value = toggleOptions.trackRadius; _getElementById("toggleCheckBoxCellSliderColorOn").value = toggleOptions.sliderColorOn; _getElementById("toggleCheckBoxCellSliderColorOff").value = toggleOptions.sliderColorOff; _getElementById("toggleCheckBoxCellTrackColorOn").value = toggleOptions.trackColorOn; _getElementById("toggleCheckBoxCellTrackColorOff").value = toggleOptions.trackColorOff; _getElementById("toggleCheckBoxCellAnimationDuration").value = toggleOptions.animationDuration; _getElementById("toggleCheckBoxCellAutoSize").checked = toggleOptions.autoSize; _getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!toggleOptions.autoSize); _getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!toggleOptions.autoSize); } else { if(checkboxCellType.caption()) { _getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="block"; _getElementById("txtCheckBoxCellTextCaption").value=checkboxCellType.caption(); _getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="none"; _getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="none"; } else { _getElementById("txtCheckBoxCellTextCaption").parentNode.style.display="none"; _getElementById("txtCheckBoxCellTextTrue").parentNode.style.display="block"; _getElementById("ckbCheckBoxCellIsThreeState").parentNode.style.display="block"; _getElementById("txtCheckBoxCellTextTrue").value=checkboxCellType.textTrue(); _getElementById("txtCheckBoxCellTextIndeterminate").value=checkboxCellType.textIndeterminate(); _getElementById("txtCheckBoxCellTextFalse").value=checkboxCellType.textFalse(); _getElementById("ckbCheckBoxCellIsThreeState").checked=checkboxCellType.isThreeState(); _getElementById("checkboxSize").value = checkboxCellType.boxSize(); } _getElementById("selCheckBoxCellAlign").value=checkboxCellType.textAlign(); } } else { if (checkboxMode === 'toggle') { checkboxCellType.caption(_getElementById("toggleCheckBoxCellTextCaption").value); checkboxCellType.textTrue(_getElementById("toggleCheckBoxCellTextTrue").value); checkboxCellType.textFalse(_getElementById("toggleCheckBoxCellTextFalse").value); checkboxCellType.textAlign(_getElementById("selToggleCheckBoxCellAlign").value - 0); const sliderRadius = _getElementById("toggleCheckBoxCellSliderRadius").value; const trackRadius = _getElementById("toggleCheckBoxCellTrackRadius").value; const autoSize = !!_getElementById("toggleCheckBoxCellAutoSize").checked; checkboxCellType.toggleOptions({ width: autoSize ? null : (_getElementById("toggleCheckBoxCellWidth").value - 0), height: autoSize ? null : (_getElementById("toggleCheckBoxCellHeight").value - 0), sliderMargin: _getElementById("toggleCheckBoxCellSliderMargin").value - 0, sliderRadius: sliderRadius === '' ? null : (sliderRadius - 0), trackRadius: trackRadius === '' ? null : (trackRadius - 0), sliderColorOn: _getElementById("toggleCheckBoxCellSliderColorOn").value, sliderColorOff: _getElementById("toggleCheckBoxCellSliderColorOff").value, trackColorOn: _getElementById("toggleCheckBoxCellTrackColorOn").value, trackColorOff: _getElementById("toggleCheckBoxCellTrackColorOff").value, animationDuration: _getElementById("toggleCheckBoxCellAnimationDuration").value - 0, autoSize: autoSize, }); } else { if(checkboxCellType.caption()) { checkboxCellType.caption(_getElementById("txtCheckBoxCellTextCaption").value); } else { checkboxCellType.textTrue(_getElementById("txtCheckBoxCellTextTrue").value); checkboxCellType.textIndeterminate(_getElementById("txtCheckBoxCellTextIndeterminate").value); checkboxCellType.textFalse(_getElementById("txtCheckBoxCellTextFalse").value); checkboxCellType.isThreeState(_getElementById("ckbCheckBoxCellIsThreeState").checked); var boxSizeValue = _getElementById("checkboxSize").value; var boxSize = Number(boxSizeValue); if (isNaN(boxSize)) { checkboxCellType.boxSize(boxSizeValue); } else { checkboxCellType.boxSize(boxSize); } } checkboxCellType.textAlign(_getElementById("selCheckBoxCellAlign").value - 0); } } } sheet.repaint(); } function getActualRange(range, maxRowCount, maxColCount) { var spreadNS = GC.Spread.Sheets; var row = range.row < 0 ? 0 : range.row; var col = range.col < 0 ? 0 : range.col; var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount; var colCount = range.colCount < 0 ? maxColCount : range.colCount; return new spreadNS.Range(row, col, rowCount, colCount); } function initSpread(spread) { var spreadNS = GC.Spread.Sheets; initToggleSheet(spread); initCheckboxSheet(spread); initModernSheet(spread); initCheckboxUsageSheet(spread); _getElementById("changeProperty").addEventListener('click',function() { propertyChange(spread, true); }); spread.bind(spreadNS.Events.ActiveSheetChanged, function(e, args) { var sheet = spread.getActiveSheet(); var sheetName = sheet.name(); if (sheetName === "Checkbox Usage") { _getElementById("panelDescription").textContent = "現在のワークブックをExcelファイルにエクスポートします。"; _getElementById("checkboxOption").style.display = "none"; _getElementById("toggleOptions").style.display = "none"; _getElementById("hitTestModeOption").style.display = "none"; _getElementById("textEditableOption").style.display = "none"; _getElementById("boxSizeOption").style.display = "none"; _getElementById("colorOption").style.display = "none"; _getElementById("changeProperty").style.display = "none"; } else { _getElementById("panelDescription").textContent = "Spread のチェックボックスセルを選択し、これらのテキストボックスでオプションを編集します。"; _getElementById("changeProperty").style.display = "block"; propertyChange(spread, false); } }); } function initToggleSheet(spread) { var spreadNS = GC.Spread.Sheets; var sheet1 = spread.getSheet(0); sheet1.name("Toggle"); sheet1.defaults.colWidth = 190; sheet1.defaults.rowHeight = 60; sheet1.suspendPaint(); sheet1.bind(spreadNS.Events.SelectionChanged, function() { propertyChange(spread, false); }); sheet1.setColumnWidth(0, 110); sheet1.setColumnWidth(1, 190); sheet1.setColumnWidth(2, 130); sheet1.setColumnWidth(3, 110); sheet1.setColumnWidth(4, 190); sheet1.setColumnWidth(5, 130); sheet1.setColumnWidth(6, 130); sheet1.setColumnWidth(7, 130); sheet1.setColumnWidth(8, 130); sheet1.setColumnWidth(9, 130); for (let i = 0; i < 7; i++) { sheet1.setRowHeight(i, 60); } sheet1.addSpan(0, 0, 7, 1); sheet1.setValue(0, 0, "トグルボタン"); sheet1.setStyle(0, 0, initCellStyle(11, "Accent 2")); sheet1.setStyle(0, 1, initCellStyle(11, "#000")); sheet1.setStyle(1, 1, initCellStyle(11, "#000")); sheet1.setStyle(2, 1, initCellStyle(11, "#000")); sheet1.setStyle(3, 1, initCellStyle(11, "#000")); sheet1.setStyle(4, 1, initCellStyle(11, "#000")); sheet1.setStyle(5, 1, initCellStyle(11, "#000")); sheet1.setStyle(6, 1, initCellStyle(11, "#000")); sheet1.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); for (let i = 0; i < 7; i++) { for (let j = 1; j < 8; j++) { sheet1.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); } } var toggleOptions = { width: 30, height: 15, trackColorOn: '#4CAF50', trackColorOff: '#bfbfbf', sliderColorOn: '#ffffff', sliderColorOff: '#ffffff', animationDuration: 200, }; sheet1.setValue(0, 1, "キャプション"); var toggleCustomSizeCellType1 = new spreadNS.CellTypes.CheckBox(); toggleCustomSizeCellType1.mode('toggle'); toggleCustomSizeCellType1.toggleOptions(toggleOptions); sheet1.setCellType(0, 2, toggleCustomSizeCellType1); var toggleCustomSizeCellType2 = new spreadNS.CellTypes.CheckBox(); toggleCustomSizeCellType2.mode('toggle'); toggleCustomSizeCellType2.toggleOptions({ ...toggleOptions, width: 40, height: 20, }); sheet1.setCellType(0, 3, toggleCustomSizeCellType2); var toggleCustomSizeCellType3 = new spreadNS.CellTypes.CheckBox(); toggleCustomSizeCellType3.mode('toggle'); toggleCustomSizeCellType3.toggleOptions({ ...toggleOptions, width: 60, height: 30, }); sheet1.setCellType(0, 4, toggleCustomSizeCellType3); sheet1.setValue(1, 1, "3 状態"); sheet1.comments.add(1, 1, '自動サイズオプションを有効にすると、トグルボタンの大きさはテキストに応じて調整されます。'); var comment = sheet1.comments.get(1, 1); comment.indicatorSize(8); comment.indicatorColor('blue'); var toggleAutoSizeCellType1 = new spreadNS.CellTypes.CheckBox(); toggleAutoSizeCellType1.mode('toggle'); toggleAutoSizeCellType1.caption("自動"); toggleAutoSizeCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside); toggleAutoSizeCellType1.toggleOptions({ ...toggleOptions, autoSize: true, }); sheet1.setCellType(1, 2, toggleAutoSizeCellType1); sheet1.getStyle(1, 2).fontSize = '8pt'; var toggleAutoSizeCellType2 = new spreadNS.CellTypes.CheckBox(); toggleAutoSizeCellType2.mode('toggle'); toggleAutoSizeCellType2.caption("自動"); toggleAutoSizeCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside); toggleAutoSizeCellType2.toggleOptions({ ...toggleOptions, autoSize: true, }); sheet1.setCellType(1, 3, toggleAutoSizeCellType2); sheet1.getStyle(1, 3).fontSize = '12pt'; var toggleAutoSizeCellType3 = new spreadNS.CellTypes.CheckBox(); toggleAutoSizeCellType3.mode('toggle'); toggleAutoSizeCellType3.caption("自動"); toggleAutoSizeCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside); toggleAutoSizeCellType3.toggleOptions({ ...toggleOptions, autoSize: true, }); sheet1.setCellType(1, 4, toggleAutoSizeCellType3); sheet1.getStyle(1, 4).fontSize = '16pt'; sheet1.setValue(2, 1, "テキスト配置"); var toggleCustomColorsCellType1 = new spreadNS.CellTypes.CheckBox(); toggleCustomColorsCellType1.mode('toggle'); toggleCustomColorsCellType1.textTrue("On"); toggleCustomColorsCellType1.textFalse("Off"); toggleCustomColorsCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside); toggleCustomColorsCellType1.toggleOptions({ trackColorOn: "Accent 1 60", trackColorOff: "Background 1 -15", sliderColorOn: "Accent 1", sliderColorOff: "Background 1", animationDuration: 500, autoSize: true }); sheet1.setCellType(2, 2, toggleCustomColorsCellType1); sheet1.setValue(3, 1, "テキスト折り返し"); var toggleTextAlignCellType1 = new spreadNS.CellTypes.CheckBox(); toggleTextAlignCellType1.mode('toggle'); toggleTextAlignCellType1.caption("上"); toggleTextAlignCellType1.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.top); toggleTextAlignCellType1.toggleOptions(toggleOptions); sheet1.setCellType(3, 2, toggleTextAlignCellType1); var toggleTextAlignCellType2 = new spreadNS.CellTypes.CheckBox(); toggleTextAlignCellType2.mode('toggle'); toggleTextAlignCellType2.caption("下"); toggleTextAlignCellType2.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom); toggleTextAlignCellType2.toggleOptions(toggleOptions); sheet1.setCellType(3, 3, toggleTextAlignCellType2); var toggleTextAlignCellType3 = new spreadNS.CellTypes.CheckBox(); toggleTextAlignCellType3.mode('toggle'); toggleTextAlignCellType3.caption("左"); toggleTextAlignCellType3.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left); toggleTextAlignCellType3.toggleOptions(toggleOptions); sheet1.setCellType(3, 4, toggleTextAlignCellType3); var toggleTextAlignCellType4 = new spreadNS.CellTypes.CheckBox(); toggleTextAlignCellType4.mode('toggle'); toggleTextAlignCellType4.caption("右"); toggleTextAlignCellType4.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right); toggleTextAlignCellType4.toggleOptions(toggleOptions); sheet1.setCellType(3, 5, toggleTextAlignCellType4); var toggleTextAlignCellType5 = new spreadNS.CellTypes.CheckBox(); toggleTextAlignCellType5.mode('toggle'); toggleTextAlignCellType5.caption("Inside"); toggleTextAlignCellType5.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside); toggleTextAlignCellType5.toggleOptions({ ...toggleOptions, width: 70, height: 20, }); sheet1.setCellType(3, 6, toggleTextAlignCellType5); sheet1.setValue(4, 1, "ヒットテストモード"); var toggleSliderMarginCellType1 = new spreadNS.CellTypes.CheckBox(); toggleSliderMarginCellType1.mode('toggle'); toggleSliderMarginCellType1.toggleOptions({ ...toggleOptions, width: 40, height: 20, sliderMargin: 2, }); sheet1.setCellType(4, 2, toggleSliderMarginCellType1); var toggleSliderMarginCellType2 = new spreadNS.CellTypes.CheckBox(); toggleSliderMarginCellType2.mode('toggle'); toggleSliderMarginCellType2.toggleOptions({ ...toggleOptions, width: 40, height: 20, sliderMargin: 4, }); sheet1.setCellType(4, 3, toggleSliderMarginCellType2); var toggleSliderMarginCellType3 = new spreadNS.CellTypes.CheckBox(); toggleSliderMarginCellType3.mode('toggle'); toggleSliderMarginCellType3.toggleOptions({ ...toggleOptions, width: 40, height: 20, sliderMargin: 6, }); sheet1.setCellType(4, 4, toggleSliderMarginCellType3); sheet1.setValue(5, 1, "セル編集モード"); var toggleBorderRadiusCellType1 = new spreadNS.CellTypes.CheckBox(); toggleBorderRadiusCellType1.mode('toggle'); toggleBorderRadiusCellType1.toggleOptions({ ...toggleOptions, width: 40, height: 20, trackRadius: 0, sliderRadius: 0, }); sheet1.setCellType(5, 2, toggleBorderRadiusCellType1); var toggleBorderRadiusCellType2 = new spreadNS.CellTypes.CheckBox(); toggleBorderRadiusCellType2.mode('toggle'); toggleBorderRadiusCellType2.toggleOptions({ ...toggleOptions, width: 40, height: 20, trackRadius: 0, sliderRadius: 12, }); sheet1.setCellType(5, 3, toggleBorderRadiusCellType2); var toggleBorderRadiusCellType3 = new spreadNS.CellTypes.CheckBox(); toggleBorderRadiusCellType3.mode('toggle'); toggleBorderRadiusCellType3.toggleOptions({ ...toggleOptions, width: 40, height: 20, sliderMargin: 4, trackRadius: 15, sliderRadius: 0, }); sheet1.setCellType(5, 4, toggleBorderRadiusCellType3); var toggleBorderRadiusCellType4 = new spreadNS.CellTypes.CheckBox(); toggleBorderRadiusCellType4.mode('toggle'); toggleBorderRadiusCellType4.toggleOptions({ ...toggleOptions, width: 40, height: 20, trackRadius: 8, sliderRadius: 6, }); sheet1.setCellType(5, 5, toggleBorderRadiusCellType4); var toggleBorderRadiusCellType5 = new spreadNS.CellTypes.CheckBox(); toggleBorderRadiusCellType5.mode('toggle'); toggleBorderRadiusCellType5.toggleOptions({ ...toggleOptions, width: 40, height: 20, trackRadius: null, sliderRadius: null, }); sheet1.setCellType(5, 6, toggleBorderRadiusCellType5); sheet1.setValue(6, 1, "ボックスサイズ"); var toggleAnimationDurationCellType1 = new spreadNS.CellTypes.CheckBox(); toggleAnimationDurationCellType1.mode('toggle'); toggleAnimationDurationCellType1.toggleOptions({ ...toggleOptions, width: 40, height: 20, animationDuration: 100, }); sheet1.setCellType(6, 2, toggleAnimationDurationCellType1); var toggleAnimationDurationCellType2 = new spreadNS.CellTypes.CheckBox(); toggleAnimationDurationCellType2.mode('toggle'); toggleAnimationDurationCellType2.toggleOptions({ ...toggleOptions, width: 40, height: 20, animationDuration: 300, }); sheet1.setCellType(6, 3, toggleAnimationDurationCellType2); var toggleAnimationDurationCellType3 = new spreadNS.CellTypes.CheckBox(); toggleAnimationDurationCellType3.mode('toggle'); toggleAnimationDurationCellType3.toggleOptions({ ...toggleOptions, width: 40, height: 20, animationDuration: 500, }); sheet1.setCellType(6, 4, toggleAnimationDurationCellType3); sheet1.resumePaint(); _getElementById("toggleCheckBoxCellAutoSize").addEventListener('change', function(e) { _getElementById("toggleCheckBoxCellWidth").classList.toggle("disabled", !!e.target.checked); _getElementById("toggleCheckBoxCellHeight").classList.toggle("disabled", !!e.target.checked); }); } function initCheckboxSheet(spread) { var spreadNS = GC.Spread.Sheets; var sheet2 = spread.getSheet(1); sheet2.name("Checkbox"); sheet2.defaults.colWidth = 190; sheet2.defaults.rowHeight = 60; sheet2.suspendPaint(); sheet2.bind(spreadNS.Events.SelectionChanged, function() { propertyChange(spread, false); }); sheet2.setColumnWidth(0, 110); sheet2.setColumnWidth(1, 190); sheet2.setColumnWidth(2, 190); sheet2.setColumnWidth(3, 230); sheet2.setColumnWidth(4, 130); sheet2.setColumnWidth(5, 130); sheet2.setColumnWidth(6, 130); for (let i = 0; i < 7; i++) { sheet2.setRowHeight(i, 60); } sheet2.addSpan(0, 0, 7, 1); sheet2.setValue(0, 0, "チェックボックス"); sheet2.setStyle(0, 0, initCellStyle(11, "Accent 1")); sheet2.setStyle(0, 1, initCellStyle(11, "Accent 6")); sheet2.setStyle(1, 1, initCellStyle(11, "#FF0000")); sheet2.setStyle(2, 1, initCellStyle(11, "Accent 5")); sheet2.setStyle(3, 1, initCellStyle(11, "Accent 4")); sheet2.setStyle(4, 1, initCellStyle(11, "Accent 2")); sheet2.setStyle(5, 1, initCellStyle(11, "Accent 3")); sheet2.setStyle(6, 1, initCellStyle(11, "Accent 1")); sheet2.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); for (let i = 0; i < 7; i++) { for (let j = 1; j < 7; j++) { sheet2.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); } } // Row 0: キャプション sheet2.setValue(0, 1, "キャプション"); var captionCellType = new spreadNS.CellTypes.CheckBox(); captionCellType.caption("キャプション"); sheet2.setCellType(0, 2, captionCellType); // Row 1: 3 状態 - 5 examples sheet2.setValue(1, 1, "3 状態"); // Two state - checked var twoStateChecked = new spreadNS.CellTypes.CheckBox(); twoStateChecked.isThreeState(false); twoStateChecked.textTrue("Checked"); twoStateChecked.textFalse("Unchecked"); sheet2.setCellType(1, 2, twoStateChecked); sheet2.setValue(1, 2, true); // Two state - unchecked var twoStateUnchecked = new spreadNS.CellTypes.CheckBox(); twoStateUnchecked.isThreeState(false); twoStateUnchecked.textTrue("Checked"); twoStateUnchecked.textFalse("Unchecked"); sheet2.setCellType(1, 3, twoStateUnchecked); sheet2.setValue(1, 3, false); // Three state - checked var threeStateChecked = new spreadNS.CellTypes.CheckBox(); threeStateChecked.isThreeState(true); threeStateChecked.textTrue("Checked"); threeStateChecked.textFalse("Unchecked"); threeStateChecked.textIndeterminate("Indeterminate"); sheet2.setCellType(1, 4, threeStateChecked); sheet2.setValue(1, 4, true); // Three state - unchecked var threeStateUnchecked = new spreadNS.CellTypes.CheckBox(); threeStateUnchecked.isThreeState(true); threeStateUnchecked.textTrue("Checked"); threeStateUnchecked.textFalse("Unchecked"); threeStateUnchecked.textIndeterminate("Indeterminate"); sheet2.setCellType(1, 5, threeStateUnchecked); sheet2.setValue(1, 5, false); // Three state - indeterminate var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox(); threeStateIndeterminate.isThreeState(true); threeStateIndeterminate.textTrue("Checked"); threeStateIndeterminate.textFalse("Unchecked"); threeStateIndeterminate.textIndeterminate("Indeterminate"); sheet2.setCellType(1, 6, threeStateIndeterminate); sheet2.setValue(1, 6, null); // Row 2: テキスト配置 - 4 examples sheet2.setValue(2, 1, "テキスト配置"); var textAlignTop = new spreadNS.CellTypes.CheckBox(); textAlignTop.caption("上"); textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top); sheet2.setCellType(2, 2, textAlignTop); var textAlignBottom = new spreadNS.CellTypes.CheckBox(); textAlignBottom.caption("下"); textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom); sheet2.setCellType(2, 3, textAlignBottom); var textAlignLeft = new spreadNS.CellTypes.CheckBox(); textAlignLeft.caption("左"); textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left); sheet2.setCellType(2, 4, textAlignLeft); var textAlignRight = new spreadNS.CellTypes.CheckBox(); textAlignRight.caption("右"); textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right); sheet2.setCellType(2, 5, textAlignRight); // Row 3: テキスト折り返し sheet2.setValue(3, 1, "テキスト折り返し"); var textWrapCellType = new spreadNS.CellTypes.CheckBox(); textWrapCellType.caption("これはとても長いテキストです"); sheet2.setCellType(3, 2, textWrapCellType); sheet2.getCell(3, 2).wordWrap(true); // Row 4: ヒットテストモード - 2 examples sheet2.setValue(4, 1, "ヒットテストモード"); var hitTestCell = new spreadNS.CellTypes.CheckBox(); hitTestCell.hitTestMode("cell"); hitTestCell.caption("セルをクリック"); sheet2.setCellType(4, 2, hitTestCell); var hitTestCheckbox = new spreadNS.CellTypes.CheckBox(); hitTestCheckbox.hitTestMode("checkbox"); hitTestCheckbox.caption("チェックボックスのみクリック"); sheet2.setCellType(4, 3, hitTestCheckbox); // Row 5: テキスト編集可 - 2 examples sheet2.setValue(5, 1, "セル編集モード"); var textEditableTrue = new spreadNS.CellTypes.CheckBox(); textEditableTrue.textEditable(true); textEditableTrue.caption("編集モードに入れます"); sheet2.setCellType(5, 2, textEditableTrue); var textEditableFalse = new spreadNS.CellTypes.CheckBox(); textEditableFalse.textEditable(false); textEditableFalse.caption("編集モードに入れません"); sheet2.setCellType(5, 3, textEditableFalse); // Row 6: ボックスサイズ - 5 examples sheet2.setValue(6, 1, "ボックスサイズ"); var boxSize10 = new spreadNS.CellTypes.CheckBox(); boxSize10.textTrue("Size 10"); boxSize10.textFalse("Size 10"); boxSize10.boxSize(10); sheet2.setCellType(6, 2, boxSize10); var boxSize16 = new spreadNS.CellTypes.CheckBox(); boxSize16.textTrue("Size 16"); boxSize16.textFalse("Size 16"); boxSize16.boxSize(16); sheet2.setCellType(6, 3, boxSize16); var boxSize20 = new spreadNS.CellTypes.CheckBox(); boxSize20.textTrue("Size 20"); boxSize20.textFalse("Size 20"); boxSize20.boxSize(20); sheet2.setCellType(6, 4, boxSize20); var boxSize24 = new spreadNS.CellTypes.CheckBox(); boxSize24.textTrue("Size 24"); boxSize24.textFalse("Size 24"); boxSize24.boxSize(24); sheet2.setCellType(6, 5, boxSize24); var boxSizeAuto = new spreadNS.CellTypes.CheckBox(); boxSizeAuto.textTrue("Auto Size"); boxSizeAuto.textFalse("Auto Size"); boxSizeAuto.boxSize("auto"); sheet2.setCellType(6, 6, boxSizeAuto); sheet2.resumePaint(); } function initModernSheet(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(2); sheet.name("Modern"); sheet.defaults.colWidth = 190; sheet.defaults.rowHeight = 60; sheet.suspendPaint(); sheet.bind(spreadNS.Events.SelectionChanged, function() { propertyChange(spread, false); }); sheet.setColumnWidth(0, 110); sheet.setColumnWidth(1, 190); sheet.setColumnWidth(2, 190); sheet.setColumnWidth(3, 230); sheet.setColumnWidth(4, 130); sheet.setColumnWidth(5, 130); sheet.setColumnWidth(6, 130); for (let i = 0; i < 8; i++) { sheet.setRowHeight(i, 60); } sheet.addSpan(0, 0, 8, 1); sheet.setValue(0, 0, "モダン"); sheet.setStyle(0, 0, initCellStyle(11, "Accent 1")); sheet.setStyle(0, 1, initCellStyle(11, "Accent 6")); sheet.setStyle(1, 1, initCellStyle(11, "#FF0000")); sheet.setStyle(2, 1, initCellStyle(11, "Accent 5")); sheet.setStyle(3, 1, initCellStyle(11, "Accent 4")); sheet.setStyle(4, 1, initCellStyle(11, "Accent 2")); sheet.setStyle(5, 1, initCellStyle(11, "Accent 3")); sheet.setStyle(6, 1, initCellStyle(11, "Accent 1")); sheet.setStyle(7, 1, initCellStyle(11, "Accent 2")); sheet.getCell(0, 0).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); for (let i = 0; i < 8; i++) { for (let j = 1; j < 7; j++) { sheet.getCell(i, j).hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center); } } // Row 0: キャプション sheet.setValue(0, 1, "キャプション"); var captionCellType = new spreadNS.CellTypes.CheckBox(); captionCellType.mode("modern"); captionCellType.caption("キャプション"); sheet.setCellType(0, 2, captionCellType); // Row 1: 3 状態 - 5 examples sheet.setValue(1, 1, "3 状態"); // Two state - checked var twoStateChecked = new spreadNS.CellTypes.CheckBox(); twoStateChecked.mode("modern"); twoStateChecked.isThreeState(false); twoStateChecked.textTrue("Checked"); twoStateChecked.textFalse("Unchecked"); sheet.setCellType(1, 2, twoStateChecked); sheet.setValue(1, 2, true); // Two state - unchecked var twoStateUnchecked = new spreadNS.CellTypes.CheckBox(); twoStateUnchecked.mode("modern"); twoStateUnchecked.isThreeState(false); twoStateUnchecked.textTrue("Checked"); twoStateUnchecked.textFalse("Unchecked"); sheet.setCellType(1, 3, twoStateUnchecked); sheet.setValue(1, 3, false); // Three state - checked var threeStateChecked = new spreadNS.CellTypes.CheckBox(); threeStateChecked.mode("modern"); threeStateChecked.isThreeState(true); threeStateChecked.textTrue("Checked"); threeStateChecked.textFalse("Unchecked"); threeStateChecked.textIndeterminate("Indeterminate"); sheet.setCellType(1, 4, threeStateChecked); sheet.setValue(1, 4, true); // Three state - unchecked var threeStateUnchecked = new spreadNS.CellTypes.CheckBox(); threeStateUnchecked.mode("modern"); threeStateUnchecked.isThreeState(true); threeStateUnchecked.textTrue("Checked"); threeStateUnchecked.textFalse("Unchecked"); threeStateUnchecked.textIndeterminate("Indeterminate"); sheet.setCellType(1, 5, threeStateUnchecked); sheet.setValue(1, 5, false); // Three state - indeterminate var threeStateIndeterminate = new spreadNS.CellTypes.CheckBox(); threeStateIndeterminate.mode("modern"); threeStateIndeterminate.isThreeState(true); threeStateIndeterminate.textTrue("Checked"); threeStateIndeterminate.textFalse("Unchecked"); threeStateIndeterminate.textIndeterminate("Indeterminate"); sheet.setCellType(1, 6, threeStateIndeterminate); sheet.setValue(1, 6, null); // Row 2: テキスト配置 - 4 examples sheet.setValue(2, 1, "テキスト配置"); var textAlignTop = new spreadNS.CellTypes.CheckBox(); textAlignTop.mode("modern"); textAlignTop.caption("上"); textAlignTop.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.top); sheet.setCellType(2, 2, textAlignTop); var textAlignBottom = new spreadNS.CellTypes.CheckBox(); textAlignBottom.mode("modern"); textAlignBottom.caption("下"); textAlignBottom.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.bottom); sheet.setCellType(2, 3, textAlignBottom); var textAlignLeft = new spreadNS.CellTypes.CheckBox(); textAlignLeft.mode("modern"); textAlignLeft.caption("左"); textAlignLeft.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.left); sheet.setCellType(2, 4, textAlignLeft); var textAlignRight = new spreadNS.CellTypes.CheckBox(); textAlignRight.mode("modern"); textAlignRight.caption("右"); textAlignRight.textAlign(spreadNS.CellTypes.CheckBoxTextAlign.right); sheet.setCellType(2, 5, textAlignRight); // Row 3: テキスト折り返し sheet.setValue(3, 1, "テキスト折り返し"); var textWrapCellType = new spreadNS.CellTypes.CheckBox(); textWrapCellType.mode("modern"); textWrapCellType.caption("これはとても長いテキストです"); sheet.setCellType(3, 2, textWrapCellType); sheet.getCell(3, 2).wordWrap(true); // Row 4: ヒットテストモード - 2 examples sheet.setValue(4, 1, "ヒットテストモード"); var hitTestCell = new spreadNS.CellTypes.CheckBox(); hitTestCell.mode("modern"); hitTestCell.hitTestMode("cell"); hitTestCell.caption("セルをクリック"); sheet.setCellType(4, 2, hitTestCell); var hitTestCheckbox = new spreadNS.CellTypes.CheckBox(); hitTestCheckbox.mode("modern"); hitTestCheckbox.hitTestMode("checkbox"); hitTestCheckbox.caption("チェックボックスのみクリック"); sheet.setCellType(4, 3, hitTestCheckbox); // Row 5: テキスト編集可 - 2 examples sheet.setValue(5, 1, "セル編集モード"); var textEditableTrue = new spreadNS.CellTypes.CheckBox(); textEditableTrue.mode("modern"); textEditableTrue.textEditable(true); textEditableTrue.caption("編集モードに入れます"); sheet.setCellType(5, 2, textEditableTrue); var textEditableFalse = new spreadNS.CellTypes.CheckBox(); textEditableFalse.mode("modern"); textEditableFalse.textEditable(false); textEditableFalse.caption("編集モードに入れません"); sheet.setCellType(5, 3, textEditableFalse); // Row 6: ボックスサイズ - 5 examples sheet.setValue(6, 1, "ボックスサイズ"); var boxSize10 = new spreadNS.CellTypes.CheckBox(); boxSize10.mode("modern"); boxSize10.textTrue("Size 10"); boxSize10.textFalse("Size 10"); boxSize10.boxSize(10); sheet.setCellType(6, 2, boxSize10); var boxSize16 = new spreadNS.CellTypes.CheckBox(); boxSize16.mode("modern"); boxSize16.textTrue("Size 16"); boxSize16.textFalse("Size 16"); boxSize16.boxSize(16); sheet.setCellType(6, 3, boxSize16); var boxSize20 = new spreadNS.CellTypes.CheckBox(); boxSize20.mode("modern"); boxSize20.textTrue("Size 20"); boxSize20.textFalse("Size 20"); boxSize20.boxSize(20); sheet.setCellType(6, 4, boxSize20); var boxSize24 = new spreadNS.CellTypes.CheckBox(); boxSize24.mode("modern"); boxSize24.textTrue("Size 24"); boxSize24.textFalse("Size 24"); boxSize24.boxSize(24); sheet.setCellType(6, 5, boxSize24); var boxSizeAuto = new spreadNS.CellTypes.CheckBox(); boxSizeAuto.mode("modern"); boxSizeAuto.textTrue("Auto Size"); boxSizeAuto.textFalse("Auto Size"); boxSizeAuto.boxSize("auto"); sheet.setCellType(6, 6, boxSizeAuto); // Row 7: 色 - 4 examples (foreColor affects checkbox border/fill in modern mode) sheet.setValue(7, 1, "色"); var colorDefault = new spreadNS.CellTypes.CheckBox(); colorDefault.mode("modern"); colorDefault.textTrue("Default"); colorDefault.textFalse("Default"); sheet.setCellType(7, 2, colorDefault); var colorRed = new spreadNS.CellTypes.CheckBox(); colorRed.mode("modern"); colorRed.textTrue("Red"); colorRed.textFalse("Red"); sheet.setCellType(7, 3, colorRed); sheet.getCell(7, 3).foreColor("red"); var colorBlue = new spreadNS.CellTypes.CheckBox(); colorBlue.mode("modern"); colorBlue.textTrue("Blue"); colorBlue.textFalse("Blue"); sheet.setCellType(7, 4, colorBlue); sheet.getCell(7, 4).foreColor("blue"); var colorGreen = new spreadNS.CellTypes.CheckBox(); colorGreen.mode("modern"); colorGreen.textTrue("Green"); colorGreen.textFalse("Green"); sheet.setCellType(7, 5, colorGreen); sheet.getCell(7, 5).foreColor("green"); sheet.resumePaint(); } function initCheckboxUsageSheet(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(3); sheet.name("Checkbox Usage"); sheet.suspendPaint(); // Define tasks data var tasks = [ { task: "ホームページ", plan: true, design: true, dev: true, test: true, deploy: true }, { task: "商品ページ", plan: true, design: true, dev: true, test: false, deploy: false }, { task: "チェックアウト", plan: true, design: true, dev: false, test: false, deploy: false }, { task: "ユーザープロファイル", plan: true, design: false, dev: false, test: false, deploy: false }, { task: "管理パネル", plan: false, design: false, dev: false, test: false, deploy: false }, { task: "API ゲートウェイ", plan: true, design: true, dev: true, test: true, deploy: false } ]; // Set column widths sheet.setColumnWidth(0, 200); // タスク sheet.setColumnWidth(1, 80); // 計画 sheet.setColumnWidth(2, 80); // 設計 sheet.setColumnWidth(3, 80); // 開発 sheet.setColumnWidth(4, 80); // テスト sheet.setColumnWidth(5, 80); // デプロイ sheet.setColumnWidth(6, 120); // 進捗 sheet.setColumnWidth(7, 100); // ステータス // Set row heights sheet.setRowHeight(0, 40); sheet.setRowHeight(1, 30); for (var i = 2; i < 8; i++) { sheet.setRowHeight(i, 35); } // Header row (row 0) - "タスク進捗トラッカー" sheet.addSpan(0, 0, 1, 8); sheet.setValue(0, 0, "タスク進捗トラッカー"); var headerStyle = new spreadNS.Style(); headerStyle.backColor = "#2E5090"; headerStyle.foreColor = "#FFFFFF"; headerStyle.hAlign = spreadNS.HorizontalAlign.center; headerStyle.vAlign = spreadNS.VerticalAlign.center; headerStyle.font = "bold 14pt Calibri"; sheet.setStyle(0, 0, headerStyle); // Column header row (row 1) var columnHeaders = ["タスク", "計画", "設計", "開発", "テスト", "デプロイ", "進捗", "ステータス"]; var columnHeaderStyle = new spreadNS.Style(); columnHeaderStyle.backColor = "#4472C4"; columnHeaderStyle.foreColor = "#FFFFFF"; columnHeaderStyle.hAlign = spreadNS.HorizontalAlign.center; columnHeaderStyle.vAlign = spreadNS.VerticalAlign.center; columnHeaderStyle.font = "bold 11pt Calibri"; for (var col = 0; col < columnHeaders.length; col++) { sheet.setValue(1, col, columnHeaders[col]); sheet.setStyle(1, col, columnHeaderStyle); } // Create checkbox cell type with modern mode var checkboxCellType = new spreadNS.CellTypes.CheckBox(); checkboxCellType.mode("modern"); checkboxCellType.textTrue(""); checkboxCellType.textFalse(""); checkboxCellType.textEditable(false); // 中央 align style for all cells var centerStyle = new spreadNS.Style(); centerStyle.hAlign = spreadNS.HorizontalAlign.center; centerStyle.vAlign = spreadNS.VerticalAlign.center; // Populate data rows for (var i = 0; i < tasks.length; i++) { var rowIndex = i + 2; // Data starts at row 2 var task = tasks[i]; // Column 0: タスク name sheet.setValue(rowIndex, 0, task.task); sheet.getCell(rowIndex, 0).hAlign(spreadNS.HorizontalAlign.center); sheet.getCell(rowIndex, 0).vAlign(spreadNS.VerticalAlign.center); // Columns 1-5: Checkboxes (計画, 設計, 開発, テスト, デプロイ) var checkboxColumns = [ { col: 1, value: task.plan }, { col: 2, value: task.design }, { col: 3, value: task.dev }, { col: 4, value: task.test }, { col: 5, value: task.deploy } ]; for (var j = 0; j < checkboxColumns.length; j++) { sheet.setCellType(rowIndex, checkboxColumns[j].col, checkboxCellType); sheet.setValue(rowIndex, checkboxColumns[j].col, checkboxColumns[j].value); // Use getCell() to avoid overwriting CellType sheet.getCell(rowIndex, checkboxColumns[j].col).hAlign(spreadNS.HorizontalAlign.center); sheet.getCell(rowIndex, checkboxColumns[j].col).vAlign(spreadNS.VerticalAlign.center); } // Column 6: 進捗 (use formula to calculate automatically) var progressFormula = "=COUNTIF(B" + (rowIndex + 1) + ":F" + (rowIndex + 1) + ",TRUE)/5"; sheet.setFormula(rowIndex, 6, progressFormula); sheet.getCell(rowIndex, 6).formatter("0%"); sheet.getCell(rowIndex, 6).hAlign(spreadNS.HorizontalAlign.center); sheet.getCell(rowIndex, 6).vAlign(spreadNS.VerticalAlign.center); // Add data bar for 進捗 column var progressRule = new spreadNS.ConditionalFormatting.DataBarRule(); progressRule.ranges([new spreadNS.Range(rowIndex, 6, 1, 1)]); progressRule.minType(spreadNS.ConditionalFormatting.ScaleValueType.number); progressRule.minValue(0); progressRule.maxType(spreadNS.ConditionalFormatting.ScaleValueType.number); progressRule.maxValue(1); progressRule.color("#D9D9D9"); progressRule.showBorder(false); progressRule.showBarOnly(false); progressRule.gradient(false); sheet.conditionalFormats.addRule(progressRule); // Column 7: ステータス (use formula to calculate automatically based on 進捗) var statusFormula = '=IF(G' + (rowIndex + 1) + '=1,"完了",' + 'IF(G' + (rowIndex + 1) + '>=0.8,"ほぼ完了",' + 'IF(G' + (rowIndex + 1) + '>=0.6,"作業中",' + 'IF(G' + (rowIndex + 1) + '>=0.4,"対応中",' + 'IF(G' + (rowIndex + 1) + '>=0.2,"開始済み","未着手")))))'; sheet.setFormula(rowIndex, 7, statusFormula); sheet.getCell(rowIndex, 7).hAlign(spreadNS.HorizontalAlign.center); sheet.getCell(rowIndex, 7).vAlign(spreadNS.VerticalAlign.center); } // Set up conditional formatting for background colors based on 進捗 column for (var i = 0; i < tasks.length; i++) { var rowIndex = i + 2; var progressCell = "$G" + (rowIndex + 1); var ranges = [new spreadNS.Range(rowIndex, 0, 1, 8)]; var ruleDefault = new spreadNS.ConditionalFormatting.NormalConditionRule(); ruleDefault.ranges(ranges); ruleDefault.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule); ruleDefault.formula(progressCell + "<0.2"); ruleDefault.style(new spreadNS.Style()); ruleDefault.style().backColor = "#F0F0F0"; ruleDefault.style().foreColor = "#757575"; sheet.conditionalFormats.addRule(ruleDefault); var rule20 = new spreadNS.ConditionalFormatting.NormalConditionRule(); rule20.ranges(ranges); rule20.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule); rule20.formula(progressCell + ">=0.2"); rule20.style(new spreadNS.Style()); rule20.style().backColor = "#FFCDD2"; rule20.style().foreColor = "#D32F2F"; sheet.conditionalFormats.addRule(rule20); var rule40 = new spreadNS.ConditionalFormatting.NormalConditionRule(); rule40.ranges(ranges); rule40.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule); rule40.formula(progressCell + ">=0.4"); rule40.style(new spreadNS.Style()); rule40.style().backColor = "#FFE0B2"; rule40.style().foreColor = "#E65100"; sheet.conditionalFormats.addRule(rule40); var rule60 = new spreadNS.ConditionalFormatting.NormalConditionRule(); rule60.ranges(ranges); rule60.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule); rule60.formula(progressCell + ">=0.6"); rule60.style(new spreadNS.Style()); rule60.style().backColor = "#FFF9C4"; rule60.style().foreColor = "#F57F17"; sheet.conditionalFormats.addRule(rule60); var rule80 = new spreadNS.ConditionalFormatting.NormalConditionRule(); rule80.ranges(ranges); rule80.ruleType(spreadNS.ConditionalFormatting.RuleType.formulaRule); rule80.formula(progressCell + ">=0.8"); rule80.style(new spreadNS.Style()); rule80.style().backColor = "#C8E6C9"; rule80.style().foreColor = "#2E7D32"; sheet.conditionalFormats.addRule(rule80); } sheet.resumePaint(); } function _getElementById(id){ return document.getElementById(id); } function exportToExcel(spread) { var fileName = "CheckboxDemo.xlsx"; spread.export(function(blob) { saveAs(blob, fileName); }, function(error) { console.error("Export error:", error); }, { fileType: GC.Spread.Sheets.FileType.excel }); }

<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label id="panelDescription">Spread のチェックボックスセルを選択し、これらのテキストボックスでオプションを編集します。</label> </div> <div id="checkboxOption"> <div class="option-row"> <label>キャプション:</label> <input type="text" id="txtCheckBoxCellTextCaption" /> </div> <div class="option-row"> <label>チェック時のテキスト:</label> <input type="text" id="txtCheckBoxCellTextTrue" value="textTrue" /> <label>中間状態のテキスト:</label> <input type="text" id="txtCheckBoxCellTextIndeterminate" value="textIndeterminate" /> <label>未チェック時のテキスト:</label> <input type="text" id="txtCheckBoxCellTextFalse" value="textFalse" /> <label>チェックボックスの大きさ:</label> <input type="text" id="checkboxSize" min="1"> </div> <div class="option-row"> <label>テキスト位置:</label> <select id="selCheckBoxCellAlign"> <option value="0" selected="selected">上</option> <option value="1">下</option> <option value="2">左</option> <option value="3">右</option> </select> </div> <div class="option-row"> <input type="checkbox" id="ckbCheckBoxCellIsThreeState" checked="checked" /> <label for="ckbCheckBoxCellIsThreeState">3状態のチェックボックス</label> </div> </div> <div id="hitTestModeOption" style="display: none;"> <div class="option-row"> <label>ヒットテストモード:</label> <select id="selHitTestMode"> <option value="cell">セル</option> <option value="checkbox">チェックボックス</option> </select> </div> </div> <div id="textEditableOption" style="display: none;"> <div class="option-row"> <input type="checkbox" id="ckbTextEditable" /> <label for="ckbTextEditable">テキスト編集可能</label> </div> </div> <div id="boxSizeOption" style="display: none;"> <div class="option-row"> <label>ボックスサイズ:</label> <input type="text" id="txtBoxSize" /> </div> <div class="option-row"> <label>ボックスサイズキャプション:</label> <input type="text" id="txtBoxSizeCaption" /> </div> </div> <div id="colorOption" style="display: none;"> <div class="option-row"> <label>色キャプション:</label> <input type="text" id="txtColorCaption" /> </div> <div class="option-row"> <label>前景色:</label> <input type="text" id="txtForeColor" placeholder="#FF0000" /> </div> </div> <div id="toggleOptions" class="option-row" style="display: none;"> <label>キャプション:</label> <input type="text" id="toggleCheckBoxCellTextCaption" /> <label>オン時のテキスト:</label> <input type="text" id="toggleCheckBoxCellTextTrue" value="textTrue" /> <label>オフ時のテキスト:</label> <input type="text" id="toggleCheckBoxCellTextFalse" value="textFalse" /> <label>テキストの位置:</label> <select id="selToggleCheckBoxCellAlign"> <option value="0" selected="selected">上</option> <option value="1">下</option> <option value="2">左</option> <option value="3">右</option> <option value="4">内側</option> </select> <label class="toggle-checkbox-cell-auto-size"><input type="checkbox" id="toggleCheckBoxCellAutoSize" /> 自動サイズ</label> <label>幅:</label> <input type="text" id="toggleCheckBoxCellWidth" value="40" /> <label>高さ:</label> <input type="text" id="toggleCheckBoxCellHeight" value="20" /> <label>スライダーの余白:</label> <input type="text" id="toggleCheckBoxCellSliderMargin" value="4" /> <label>スライダーの半径:</label> <input type="number" id="toggleCheckBoxCellSliderRadius" value="12" /> <label>トラックの半径:</label> <input type="number" id="toggleCheckBoxCellTrackRadius" value="15" /> <label>オン時のスライダー色:</label> <input type="text" id="toggleCheckBoxCellSliderColorOn" value="red" /> <label>オフ時のスライダー色:</label> <input type="text" id="toggleCheckBoxCellSliderColorOff" value="#fff" /> <label>オン時のトラック色:</label> <input type="text" id="toggleCheckBoxCellTrackColorOn" value="red" /> <label>オフ時のトラック色:</label> <input type="text" id="toggleCheckBoxCellTrackColorOff" value="#fff" /> <label>アニメーションの速さ:</label> <input type="text" id="toggleCheckBoxCellAnimationDuration" value="300" /> </div> <div class="option-row"> <label></label> <input type="button" id="changeProperty" value="更新" /> </div> <div class="option-row"> <label></label> <input type="button" id="exportExcel" value="Excelにエクスポート" /> </div> </div> </div> </body> </html>

html, body { height: 100%; margin: 0; } body { position: absolute; inset: 0; color: #1f2933; background: #f7f8fa; } .sample-tutorial { display: flex; height: 100%; overflow: hidden; } .sample-tutorial > .sample-tutorial { flex: 1 1 auto; min-width: 0; } .sample-spreadsheets, .sample-tutorial > gc-spread-sheets { flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; } .options-container { flex: 0 0 340px; width: 340px; height: 100%; padding: 22px 20px; box-sizing: border-box; overflow: auto; background: #ffffff; border-left: 1px solid #e5e7eb; } .options-container > label, #panelDescription { display: block; margin: 0 0 18px; color: #6b7280; font-size: 13px; font-weight: 500; line-height: 1.6; } .option-row { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; font-size: 14px; } .checkbox-options, .hittest-mode-options, .text-editable-options, .box-size-options, .color-options, .toggle-options, #checkboxOption, #hitTestModeOption, #textEditableOption, #boxSizeOption, #colorOption, #toggleOptions { padding: 18px 0 4px; border-top: 1px solid #eef0f3; } label { display: block; color: #374151; font-size: 13px; font-weight: 600; line-height: 1.35; } input, select { width: 100%; height: 34px; padding: 0 10px; color: #111827; font: inherit; background: #ffffff; border: 1px solid #d8dde5; border-radius: 6px; box-sizing: border-box; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 2px 8px 0 0; padding: 0; accent-color: #2563eb; } input[type="checkbox"] + label, input[type="radio"] + label, .toggle-checkbox-cell-auto-size { display: inline-flex; align-items: flex-start; width: auto; } #textEditableOption .option-row { display: flex; align-items: center; gap: 8px; } #textEditableOption input[type="checkbox"] { margin: 0; } #textEditableOption label { margin: 0; } input[type="button"] { display: inline-flex; align-items: center; justify-content: center; height: 34px; color: #fff; font-weight: 600; background: #2563eb; border-color: #2563eb; cursor: pointer; } input[type="button"]:hover { background: #1d4ed8; border-color: #1d4ed8; } input[type="button"]:disabled, .disabled { opacity: .55; cursor: not-allowed; } .radio-item { display: flex; align-items: flex-start; min-height: 24px; } .checkbox { display: inline-block; padding-right: 12px; } @media (max-width: 760px) { .sample-tutorial { flex-direction: column; } .sample-spreadsheets, .sample-tutorial > gc-spread-sheets { min-height: 55%; } .options-container { flex: 0 0 45%; width: 100%; height: 45%; border-top: 1px solid #e5e7eb; border-left: 0; } }