顧客満足度調査

次のサンプルは、SpreadJSのフォームコントロールを使用して、顧客満足度調査のアンケートを作成する方法を示しています。

「顧客満足度アンケート」シート: タイトル:フォームコントロールのラベルを使用し、テキストやスタイルを設定しています。 使用製品/知ったきっかけ:チェックボックスを使用することで、複数選択可能の項目に設定します。 満足度:ひとつの選択肢のみを選ぶ場合はオプションボタンとグループボックスを組み合わせて使用します。 お勧め度:スクロールバーを左右に移動すると、セルのテキストと連動して値の変更ができます。 理由/感想:テキストボックスシェイプを利用することで、ワンクリックですぐにテキストの入力が開始できます。 職業:コンボボックスを使用し、矢印をクリックすると選択項目の一覧を表示します。 年齢:スピンボタンを使用することで設定した範囲内の数値を効率よく入力できます。 送信:フォームコントロールのボタンを追加し、クリックイベントと連動できます。また、送信ボタンを押下すると、確認ダイアログが表示され、OKを選択する場合は「アンケート結果」シートが印刷されます。 「アンケート結果」シート: 回答列:「顧客満足度アンケート」シートと連動し、回答内容を確認できます。初期値は未回答です。
var results_products = ["冷蔵庫", "エアコン", "洗濯機", "掃除機", "調理鍋", "健康家電", "その他"]; var results_knowChances = ["ホームページ", "同僚・知人", "ニュース・ブログ記事", "口コミサイト", "過去に使用した", "メールマガジン", "その他"]; var results_satisfaction = ["非常に満足", "やや満足", "どちらともいえない", "やや不満", "非常に不満"]; var employCatagory = ["会社員", "フリーランス・個人事業主", "パート・アルバイト", "学生", "公務員", "無職", "その他"]; var suggestionLevel = ["非常にそう思う", "そう思う", "どちらともいえない", "そう思わない", "まったくそう思わない"]; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3, }); initSpreadStyle(spread); initSheet(spread); adjustFormSize(spread); confirmResult(spread); spread.getSheet(1).visible(false); spread.setActiveSheet(0); } function initSheet(spread) { var sheet = spread.getSheet(0); sheet.name("顧客満足度アンケート"); sheet.addSpan(1, 1, 1, 6); sheet.addSpan(3, 1, 1, 6); sheet.addSpan(5, 1, 1, 6); sheet.addSpan(6, 1, 9, 7); sheet.addSpan(15, 1, 1, 6); sheet.addSpan(17, 1, 1, 6); sheet.addSpan(19, 1, 1, 6); sheet.addSpan(24, 3, 1, 2); sheet.addSpan(16, 2, 1, 6); sheet .getCell(1, 1) .text(' Q1: 現在使用されている主な製品をご選択ください。(複数選択可)') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(3, 1) .text(' Q2: 弊社製品に対する満足度を教えてください。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(5, 1) .text(' Q3: 弊社製品の次の点について満足度を教えてください。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(15, 1) .text(' Q4: 弊社製品やサービスを他の人に薦めたいと思いますか。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(16, 2) .vAlign(GC.Spread.Sheets.VerticalAlign.top) .hAlign(GC.Spread.Sheets.HorizontalAlign.center); sheet .getCell(17, 1) .text(' Q5: Q4の質問に対し、理由をお聞かせください。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(20, 1) .text(' Q6: 製品をご使用になった感想をご記入ください。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(23, 1) .text(' Q7: よろしければご自身についてお教えください。') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#ee7800'); sheet .getCell(24, 2) .text('■ 性別') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#a7d28d'); sheet .getCell(24, 3) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) sheet .getCell(24, 5) .text('■ 年齢') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .font('bold normal 15px 游明朝') .foreColor('#a7d28d'); sheet .getCell(24, 6) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝'); sheet .getCell(25, 2) .text('■ 職業') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#a7d28d'); sheet .getCell(26, 2) .text('■ 弊社製品を知ったきっかけ(複数選択可)') .vAlign(GC.Spread.Sheets.VerticalAlign.center) .hAlign(GC.Spread.Sheets.HorizontalAlign.left) .font('bold normal 15px 游明朝') .foreColor('#a7d28d'); var sheet2 = spread.getSheet(1); for (var i = 0; i < employCatagory.length; i++) { sheet2.setValue(i, 0, employCatagory[i]); } for (var i = 0; i < suggestionLevel.length; i++) { sheet2.setValue(i, 3, suggestionLevel[i]); } // タイトルラベル let label = sheet.shapes.addFormControl('label', GC.Spread.Sheets.Shapes.FormControlType.label, 120, -20, 600, 40); label.text("お客様満足度アンケートのお願い"); var labelStyle = label.style(); labelStyle.line.color = "#bed2c3"; labelStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; labelStyle.line.width = 5; labelStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; labelStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; labelStyle.line.compoundType = GC.Spread.Sheets.Shapes.CompoundType.double; labelStyle.line.transparency = 0.5; labelStyle.textEffect.color = "#7f1184"; labelStyle.textEffect.transparency = 0.5; labelStyle.textEffect.font = "21px メイリオ"; labelStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center; labelStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center; label.style(labelStyle); // 利用製品のチェックボックス var refrigerator = sheet.shapes.addFormControl("refrigerator", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 120, 65, 150, 20); refrigerator.text(" 冷蔵庫"); var refrigeratorOptions = refrigerator.options(); refrigeratorOptions.cellLink = 'Sheet2!G1'; refrigerator.options(refrigeratorOptions); var airconditioner = sheet.shapes.addFormControl("airconditioner", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 200, 65, 150, 20); airconditioner.text(" エアコン"); var airconditionerOptions = airconditioner.options(); airconditionerOptions.cellLink = 'Sheet2!G2'; airconditioner.options(airconditionerOptions); var laundry = sheet.shapes.addFormControl("laundry", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 290, 65, 150, 20); laundry.text(" 洗濯機"); var laundryOptions = laundry.options(); laundryOptions.cellLink = 'Sheet2!G3'; laundry.options(laundryOptions); var cleaner = sheet.shapes.addFormControl("cleaner", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 370, 65, 150, 20); cleaner.text(" 掃除機"); var cleanerOptions = cleaner.options(); cleanerOptions.cellLink = 'Sheet2!G4'; cleaner.options(cleanerOptions); var pot = sheet.shapes.addFormControl("pot", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 450, 65, 150, 20); pot.text(" 調理鍋"); var potOptions = pot.options(); potOptions.cellLink = 'Sheet2!G5'; pot.options(potOptions); var healthtools = sheet.shapes.addFormControl("healthtools", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 530, 65, 150, 20); healthtools.text(" 健康家電"); var healthtoolsOptions = healthtools.options(); healthtoolsOptions.cellLink = 'Sheet2!G6'; healthtools.options(healthtoolsOptions); var others = sheet.shapes.addFormControl("others", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 630, 65, 150, 20); others.text(" その他"); var othersOptions = others.options(); othersOptions.cellLink = 'Sheet2!G7'; others.options(othersOptions); // 「満足度」グループボックス var product_extremelySatisfied = sheet.shapes.addFormControl("product_extremelySatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 120, 118, 100, 30); product_extremelySatisfied.text("非常に満足"); var product_somewhatSatisfied = sheet.shapes.addFormControl("product_somewhatSatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 230, 118, 100, 30); product_somewhatSatisfied.text("やや満足"); var product_satisfied = sheet.shapes.addFormControl("product_satisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 320, 118, 250, 30); product_satisfied.text("どちらともいえない"); var product_somewhatDissatisfied = sheet.shapes.addFormControl("product_somewhatDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 480, 118, 100, 30); product_somewhatDissatisfied.text("やや不満"); var product_extremelyDissatisfied = sheet.shapes.addFormControl("product_extremelyDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 570, 118, 100, 30); product_extremelyDissatisfied.text("非常に不満"); product_satisfied.value(true); var product_options = product_extremelySatisfied.options(); product_options.cellLink = 'Sheet2!H1'; product_extremelySatisfied.options(product_options); // 「製品の機能性」グループボックス var featureRelated = sheet.shapes.addFormControl("featureRelated", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 120, 190, 600, 50); featureRelated.text("製品の機能性"); var feature_extremelySatisfied = sheet.shapes.addFormControl("feature_extremelySatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 150, 205, 100, 30); feature_extremelySatisfied.text("非常に満足"); var feature_options = feature_extremelySatisfied.options(); feature_options.cellLink = 'Sheet2!H2'; feature_extremelySatisfied.options(feature_options); var feature_somewhatSatisfied = sheet.shapes.addFormControl("feature_somewhatSatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 260, 205, 100, 30); feature_somewhatSatisfied.text("やや満足"); var feature_satisfied = sheet.shapes.addFormControl("feature_satisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 350, 205, 250, 30); feature_satisfied.text("どちらともいえない"); var feature_somewhatDissatisfied = sheet.shapes.addFormControl("feature_somewhatDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 510, 205, 100, 30); feature_somewhatDissatisfied.text("やや不満"); var feature_extremelyDissatisfied = sheet.shapes.addFormControl("feature_extremelyDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 600, 205, 100, 30); feature_extremelyDissatisfied.text("非常に不満"); feature_satisfied.value(true); // 「使いやすさ」グループボックス var easyToUse = sheet.shapes.addFormControl("easyToUse", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 120, 255, 600, 50); easyToUse.text("使いやすさ"); var easyToUse_extremelySatisfied = sheet.shapes.addFormControl("easyToUse_extremelySatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 150, 270, 100, 30); easyToUse_extremelySatisfied.text("非常に満足"); var easyToUse_somewhatSatisfied = sheet.shapes.addFormControl("easyToUse_somewhatSatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 260, 270, 100, 30); easyToUse_somewhatSatisfied.text("やや満足"); var easyToUse_satisfied = sheet.shapes.addFormControl("easyToUse_satisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 350, 270, 250, 30); easyToUse_satisfied.text("どちらともいえない"); var easyToUse_somewhatDissatisfied = sheet.shapes.addFormControl("easyToUse_somewhatDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 510, 270, 100, 30); easyToUse_somewhatDissatisfied.text("やや不満"); var easyToUse_extremelyDissatisfied = sheet.shapes.addFormControl("easyToUse_extremelyDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 600, 270, 100, 30); easyToUse_extremelyDissatisfied.text("非常に不満"); easyToUse_satisfied.value(true); var easyToUse_options = easyToUse_extremelySatisfied.options(); easyToUse_options.cellLink = 'Sheet2!H3'; easyToUse_extremelySatisfied.options(easyToUse_options); // 「価格」グループボックス var price = sheet.shapes.addFormControl("price", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 120, 320, 600, 50); price.text("価格"); var price_extremelySatisfied = sheet.shapes.addFormControl("price_extremelySatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 150, 335, 100, 30); price_extremelySatisfied.text("非常に満足"); var price_somewhatSatisfied = sheet.shapes.addFormControl("price_somewhatSatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 260, 335, 100, 30); price_somewhatSatisfied.text("やや満足"); var price_satisfied = sheet.shapes.addFormControl("price_satisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 350, 335, 250, 30); price_satisfied.text("どちらともいえない"); var price_somewhatDissatisfied = sheet.shapes.addFormControl("price_somewhatDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 510, 335, 100, 30); price_somewhatDissatisfied.text("やや不満"); var price_extremelyDissatisfied = sheet.shapes.addFormControl("price_extremelyDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 600, 335, 100, 30); price_extremelyDissatisfied.text("非常に不満"); price_satisfied.value(true); var price_options = price_extremelySatisfied.options(); price_options.cellLink = 'Sheet2!H4'; price_extremelySatisfied.options(price_options); // 「カスタマーサポート」グループボックス var support = sheet.shapes.addFormControl("support", GC.Spread.Sheets.Shapes.FormControlType.groupBox, 120, 385, 600, 50); support.text("カスタマーサポート"); var support_extremelySatisfied = sheet.shapes.addFormControl("support_extremelySatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 150, 400, 100, 30); support_extremelySatisfied.text("非常に満足"); var support_somewhatSatisfied = sheet.shapes.addFormControl("support_somewhatSatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 260, 400, 100, 30); support_somewhatSatisfied.text("やや満足"); var support_satisfied = sheet.shapes.addFormControl("support_satisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 350, 400, 250, 30); support_satisfied.text("どちらともいえない"); var support_somewhatDissatisfied = sheet.shapes.addFormControl("support_somewhatDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 510, 400, 100, 30); support_somewhatDissatisfied.text("やや不満"); var support_extremelyDissatisfied = sheet.shapes.addFormControl("support_extremelyDissatisfied", GC.Spread.Sheets.Shapes.FormControlType.optionButton, 600, 400, 100, 30); support_extremelyDissatisfied.text("非常に不満"); support_satisfied.value(true); var support_options = support_extremelySatisfied.options(); support_options.cellLink = 'Sheet2!H5'; support_extremelySatisfied.options(support_options); // 弊社製品やサービスを他の人に薦めたい let suggestion = sheet.shapes.addFormControl('suggestion', GC.Spread.Sheets.Shapes.FormControlType.scrollBar, 120, 500, 600, 10); var options = suggestion.options(); options.minValue = 1; options.maxValue = 5; options.step = 1; options.pageChange = 2; options.cellLink = 'Sheet2!F1'; suggestion.options(options); suggestion.value(3); sheet.setFormula(16, 2, "=INDEX(Sheet2!D1:D5,Sheet2!F1)"); // テキストボックス let textBox1 = sheet.shapes.add('', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 130, 540, 590, 60); let shapeStyle1 = textBox1.style(); shapeStyle1.fill.color = 'white'; shapeStyle1.textEffect.color = 'black'; shapeStyle1.line.color = 'black'; shapeStyle1.textFrame.resizeToFitText = false; shapeStyle1.height = "15px" textBox1.style(shapeStyle1); textBox1.isTextBox(true); textBox1.allowResize(false); let textBox2 = sheet.shapes.add('', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 130, 630, 590, 60); let shapeStyle2 = textBox2.style(); shapeStyle2.fill.color = 'white'; shapeStyle2.textEffect.color = 'black'; shapeStyle2.line.color = 'black'; shapeStyle2.textFrame.resizeToFitText = false; textBox2.style(shapeStyle2); textBox2.isTextBox(true); textBox2.allowResize(false); // 「顧客情報」グループボックス var radio = new GC.Spread.Sheets.CellTypes.RadioButtonList(); radio.items([ { text: "男", value: "1" }, { text: "女", value: "2" }, { text: "回答しない", value: "3" }, ]); sheet.setValue(24, 3, 3) sheet.setCellType(24, 3, radio, GC.Spread.Sheets.SheetArea.viewport); // 「年齢」スピン var ageSpin = sheet.shapes.addFormControl("ageSpin", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 570, 720, 60, 28); var spinOptions = ageSpin.options(); spinOptions.minValue = 0; spinOptions.maxValue = 110; spinOptions.step = 1; spinOptions.cellLink = "G25"; ageSpin.options(spinOptions); ageSpin.value(25); // 職業コンボボックス var employComboBox = sheet.shapes.addFormControl("employComboBox", GC.Spread.Sheets.Shapes.FormControlType.comboBox, 240, 755, 250, 25); var employComboBox_options = employComboBox.options(); employComboBox_options.inputRange = "Sheet2!A1:A7"; employComboBox_options.cellLink = 'Sheet2!I1'; employComboBox_options.dropDownLines = 6; employComboBox.options(employComboBox_options); employComboBox.value(1); // 弊社製品を知ったきっかけのチェックボックス var homepage = sheet.shapes.addFormControl("homepage", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 150, 810, 150, 20); homepage.text("ホームページ"); var homepageOptions = homepage.options(); homepageOptions.cellLink = 'Sheet2!J1'; homepage.options(homepageOptions); var friends = sheet.shapes.addFormControl("friends", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 280, 810, 200, 20); friends.text("同僚・知人"); var friendsOptions = friends.options(); friendsOptions.cellLink = 'Sheet2!J2'; friends.options(friendsOptions); var news = sheet.shapes.addFormControl("news", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 400, 810, 250, 20); news.text("ニュース・ブログ記事"); var newsOptions = news.options(); newsOptions.cellLink = 'Sheet2!J3'; news.options(newsOptions); var reviews = sheet.shapes.addFormControl("reviews", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 580, 810, 250, 20); reviews.text("口コミサイト"); var reviewsOptions = reviews.options(); reviewsOptions.cellLink = 'Sheet2!J4'; reviews.options(reviewsOptions); var fromPast = sheet.shapes.addFormControl("fromPast", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 150, 840, 250, 20); fromPast.text("過去に使用したため"); var fromPastOptions = fromPast.options(); fromPastOptions.cellLink = 'Sheet2!J5'; fromPast.options(fromPastOptions); var mailmagazine = sheet.shapes.addFormControl("mailmagazine", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 330, 840, 250, 20); mailmagazine.text("メールマガジン"); var mailmagazineOptions = mailmagazine.options(); mailmagazineOptions.cellLink = 'Sheet2!J6'; mailmagazine.options(mailmagazineOptions); var elseTool = sheet.shapes.addFormControl("elseTool", GC.Spread.Sheets.Shapes.FormControlType.checkBox, 460, 840, 250, 20); elseTool.text("その他"); var elseToolOptions = elseTool.options(); elseToolOptions.cellLink = 'Sheet2!J7'; elseTool.options(elseToolOptions); // 送信ボタン var submitButton = sheet.shapes.addFormControl("submitButton", GC.Spread.Sheets.Shapes.FormControlType.button, 360, 900, 100, 30); submitButton.text("送 信"); var btnStyle = submitButton.style(); btnStyle.textEffect.color = "#493759"; btnStyle.textEffect.font = "bold 15px HGS明朝E"; btnStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center; btnStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center; btnStyle.fill = { type: GC.Spread.Sheets.Shapes.GradientFillType.linear, angle: 45, stops: [ { color: 'blue', position: 0 }, { color: 'pink', position: 1 } ] }; submitButton.style(btnStyle); // 送信ボタン押下時のダイアログ表示 spread.getSheet(0).bind(GC.Spread.Sheets.Events.FormControlButtonClicked, function (s, args) { var result = window.confirm("この内容で送信してもよろしいでしょうか?"); // OKと押下する場合、回答を印刷する if (result) { if (window.confirm("回答を送信しました。\n送信内容を印刷します。よろしいでしょうか?")) { var sheetPrint = spread.sheets[2]; var printInfo = sheetPrint.printInfo(); printInfo.rowStart(1); printInfo.rowEnd(14); printInfo.columnStart(1); printInfo.columnEnd(4); printInfo.centering(GC.Spread.Sheets.Print.PrintCentering.horizontal); printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.showGridLine(false); printInfo.useMax(true); sheetPrint.setColumnPageBreak(6, true); spread.print(2); } else { alert("アンケートのご協力ありがとうございました。") } // キャンセルと押下すると何もしない } else { return; } }); // アンケート結果にセット var sheet1 = spread.getSheet(1); var sheet2 = spread.getSheet(2); sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) { if (textBox1.text() && textBox1.text().length > 0) { sheet2.setValue(9, 4, textBox1.text()); } else { sheet2.setValue(9, 4, "未回答") } if (textBox2.text() && textBox2.text().length > 0) { sheet2.setValue(10, 4, textBox2.text()); } else { sheet2.setValue(10, 4, "未回答") } }) spread.bind(GC.Spread.Sheets.Events.CellChanged, function (event, data) { var row = data.row, col = data.col; if (row === undefined || col === undefined) { return; } if (sheet.hasPendingChanges(row, col)) { sheet2.setValue(11, 4, sheet.getValue(27, 4) === "1" ? "男" : sheet.getValue(27, 4) === "2" ? "女" : sheet.getValue(27, 4) === "3" ? "回答しない" : "未回答"); } }); sheet.bind(GC.Spread.Sheets.Events.FormControlValueChanged, function (s, args) { let results_product = results_products.filter(function (value, index, array) { return sheet1.getValue(index, 6); }); let results_knowChance = results_knowChances.filter(function (value, index, array) { return sheet1.getValue(index, 9); }); if (results_product && results_product.length > 0) { sheet2.setValue(2, 4, results_product.join(";")) } else { sheet2.setValue(2, 4, "未回答") } sheet2.setValue(3, 4, results_satisfaction[sheet1.getValue(0, 7) - 1]); sheet2.setValue(4, 4, results_satisfaction[sheet1.getValue(1, 7) - 1]); sheet2.setValue(5, 4, results_satisfaction[sheet1.getValue(2, 7) - 1]); sheet2.setValue(6, 4, results_satisfaction[sheet1.getValue(3, 7) - 1]); sheet2.setValue(7, 4, results_satisfaction[sheet1.getValue(4, 7) - 1]); sheet2.setValue(8, 4, suggestionLevel[sheet1.getValue(0, 5) - 1]); if (textBox1.text() && textBox1.text().length > 0) { sheet2.setValue(9, 4, textBox1.text()); } else { sheet2.setValue(9, 4, "未回答") } if (textBox2.text() && textBox2.text().length > 0) { sheet2.setValue(10, 4, textBox2.text()); } else { sheet2.setValue(10, 4, "未回答") } sheet2.setValue(12, 4, sheet.getValue(27, 7)); sheet2.setValue(13, 4, employCatagory[sheet1.getValue(0, 8) - 1]); if (results_knowChance && results_knowChance.length > 0) { sheet2.setValue(14, 4, results_knowChance.join(";")) } else { sheet2.setValue(14, 4, "未回答") } }); } function initSpreadStyle(spread) { spread.options.backColor = "#fef4f4"; var sheet = spread.getSheet(0); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; sheet.options.rowHeaderVisible = false; sheet.options.colHeaderVisible = false; sheet.defaults.rowHeight = 30; sheet.defaults.colWidth = 100; sheet.setColumnWidth(1, 30); var lineBorder = new GC.Spread.Sheets.LineBorder('#bc64a4', GC.Spread.Sheets.LineStyle.hair); sheet.getRange(24, 2, 5, 6).setBorder(lineBorder, { outline: true }); } function adjustFormSize(spread) { var sheet = spread.getSheet(0); sheet.addRows(0, 3); sheet.addColumns(1, 1); sheet.setColumnWidth(1, 60); sheet.setColumnWidth(10, 60); sheet.getRange(1, 1, 34, 9).backColor("#f7fcfe"); var lineBorder2 = new GC.Spread.Sheets.LineBorder('#bc64a4', GC.Spread.Sheets.LineStyle.hair); sheet.getRange(1, 1, 34, 9).setBorder(lineBorder2, { outline: true }); } function confirmResult(spread) { var sheet2 = spread.getSheet(2); sheet2.options.gridline.showHorizontalGridline = false; sheet2.options.gridline.showVerticalGridline = false; sheet2.suspendPaint(); sheet2.name('アンケート結果'); sheet2.options.allowCellOverflow = true; sheet2.setRowHeight(1, 40); for (var i = 2; i < 15; i++) { sheet2.setRowHeight(i, 35); } sheet2.setRowHeight(9, 50); sheet2.setRowHeight(10, 50); sheet2.setRowHeight(14, 50); sheet2.setColumnWidth(1, 30); sheet2.setColumnWidth(2, 30); sheet2.setColumnWidth(3, 160); sheet2.setColumnWidth(4, 400); var colHeaderStyle = new GC.Spread.Sheets.Style(); colHeaderStyle.font = 'bold 16px 游明朝'; colHeaderStyle.backColor = '#aacf53'; colHeaderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; colHeaderStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet2.getRange('B2:E2').setStyle(colHeaderStyle); var rowHeaderStyle = new GC.Spread.Sheets.Style(); rowHeaderStyle.font = 'bold 16px 游明朝'; rowHeaderStyle.backColor = 'white'; rowHeaderStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; rowHeaderStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet2.getRange('B3:C15').setStyle(rowHeaderStyle); var contentStyle = new GC.Spread.Sheets.Style(); contentStyle.font = 'bold 15px 游明朝'; contentStyle.backColor = 'white'; contentStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.left; contentStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; contentStyle.wordWrap = true; contentStyle.showEllipsis = true; sheet2.getRange('D3:E15').setStyle(contentStyle); sheet2.addSpan(1, 1, 1, 2); sheet2.setValue(1, 1, 'No.'); sheet2.addSpan(2, 1, 1, 2); sheet2.setValue(2, 1, '1'); sheet2.addSpan(3, 1, 1, 2); sheet2.setValue(3, 1, '2'); sheet2.addSpan(4, 1, 4, 1); sheet2.setValue(4, 1, '3'); sheet2.setValue(4, 2, '3-1'); sheet2.setValue(5, 2, '3-2'); sheet2.setValue(6, 2, '3-3'); sheet2.setValue(7, 2, '3-4'); sheet2.addSpan(8, 1, 1, 2); sheet2.setValue(8, 1, '4'); sheet2.addSpan(9, 1, 1, 2); sheet2.setValue(9, 1, '5'); sheet2.addSpan(10, 1, 1, 2); sheet2.setValue(10, 1, '6'); sheet2.addSpan(11, 1, 4, 1); sheet2.setValue(11, 1, '7'); sheet2.setValue(11, 2, '7-1'); sheet2.setValue(12, 2, '7-2'); sheet2.setValue(13, 2, '7-3'); sheet2.setValue(14, 2, '7-4'); sheet2.setValue(1, 3, '項目'); sheet2.setValue(2, 3, '使用中の製品'); sheet2.setValue(3, 3, '全体の満足度'); sheet2.setValue(4, 3, '製品の機能性'); sheet2.setValue(5, 3, '使いやすさ'); sheet2.setValue(6, 3, '価格'); sheet2.setValue(7, 3, 'カスタマーサポート'); sheet2.setValue(8, 3, 'お勧め度'); sheet2.setValue(9, 3, 'お勧め度の理由'); sheet2.setValue(10, 3, '感想'); sheet2.setValue(11, 3, '性別'); sheet2.setValue(12, 3, '年齢'); sheet2.setValue(13, 3, '職業'); sheet2.setValue(14, 3, '製品を知ったきっかけ'); sheet2.setValue(1, 4, '回答'); for (var i = 2; i < 15; i++) { sheet2.setValue(i, 4, '未回答'); } sheet2 .getRange(1, 1, 14, 4) .setBorder( new GC.Spread.Sheets.LineBorder( '#A8A9AD', GC.Spread.Sheets.LineStyle.dotted ), { all: true } ); sheet2.resumePaint(); }
<!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-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%;height:100%"></div> </div> </body> </html>