Question

我创建了一个HTML对话框（在社区的帮助下），该对话框将根据用户输入将项目添加到数据集中的特定类别。我现在正在处理一个对话框，提示用户根据相同条件在数据集中删除一个项目。

我已经尝试过“向后工程”将数据添加到数据集中的代码，但这是我第一次尝试将HTML对话框添加到电子表格中，因此我对如何理解它非常生锈与.gs脚本文件进行交互。我在Stack Overflow上搜索了可能相关的问题，但只发现了一个与我相关的问题。

到目前为止，我已经创建了一个HTML对话框，要求用户从下拉菜单中选择 Region （区域），然后确定我将电子表格标签的哪一列放入变量中-代码大纲。我添加了一些Logger.log来检查是否正确收集了数据。

今天我只了解了<? ?>个脚本，并且不确定是否正确使用了它们。我对数组没有做太多事情，所以我也不确定是否应该调用它们（我知道我需要建立一个循环来创建下拉选项，但是我只是尝试使某物正常工作。）

理想情况下，选项下拉列表将出现在从removeDeckSelectRegion.html文件创建的现有对话框中，但是我不确定如何执行此操作。当前第一个对话框没有关闭，第二个对话框也没有打开。

Demo Spreadsheet

使用代码和HTML添加卡片组（效果很好）

function addDeck() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('addDeck')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(180)
      .setHeight(150);
  SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Add a New Deck');
}


function functionToRunOnFormSubmit(fromInputForm) {
  var decks = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Decks");

  for (var i = 4; i >= 1; i++) {
    if (decks.getRange(i, 1).getValue() == "") {
      break
    }
  }
  decks.getRange(i, 1, 1, 2).setValues([[fromInputForm.Class, fromInputForm.Archetype]]);
}

AddDeck.HTML

<!DOCTYPE html>
<html>
<body>
<form>
  <select name="Class" id="class-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
    <option value="" selected="selected">Class</option>
    <option value="Druid">Druid</option>
    <option value="Hunter">Hunter</option>
    <option value="Mage">Mage</option>
    <option value="Paladin">Paladin</option>
    <option value="Priest">Priest</option>
    <option value="Rogue">Rogue</option>
    <option value="Shaman">Shaman</option>
    <option value="Warlock">Warlock</option>
    <option value="Warrior">Warrior</option>
  </select>

  <input name="Archetype" type="text">

  <input type="submit" value="Submit" onclick="addDeck(this.parentNode)">
</form>
<p id="addDeck"></p>

<script>
function addDeck(obj) {
  var x = document.getElementById("class-selector").value;
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}
</script>
</body>
</html>

删除甲板的代码（不起作用）

function removeDeck() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('removeDeckSelectRegion')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(180)
      .setHeight(150);
  SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Select Region');
}


function functionToRunToRemoveDeckSelectRegion(fromInputForm) {
  var decks   = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Decks");
  var lastRow = decks.getLastRow();

  if (fromInputForm.Region == "Americas") {
    var existingDecks = decks.getRange(4, 2, lastRow-3, 1).getValues();
  }

  Logger.log(existingDecks);
  Logger.log("-----------");

  for (var i = 0; i < existingDecks.length; i++) {
    Logger.log(existingDecks[i][0]);
  }

  var htmlDlg2 = HtmlService.createHtmlOutputFromFile('removeDeck')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(180)
      .setHeight(150);
  SpreadsheetApp.getUi().showModalDialog(htmlDlg, 'Select Deck');
}

removeDeckSelectRegion.html

<!DOCTYPE html>
<html>
<body>
<form>
  <select name="Region" id="region-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
    <option value="" selected="selected">Region</option>
    <option value="Americas">Americas</option>
    <option value="Europe">Europe</option>
    <option value="Asia">Asia</option>
  </select>

  <input type="submit" value="Submit" onclick="removeDeckSelectRegion(this.parentNode)">
</form>
<p id="removeDeckSelectRegion"></p>

<script>
function removeDeckSelectRegion(obj) {
  var x = document.getElementById("region-selector").value;
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunToRemoveDeckSelectRegion(obj);
}
</script>
</body>
</html>

removeDeck.html

<!DOCTYPE html>
<html>
<body>
<form>
  <select name="Deck" id="deck-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
    <option value="" selected="selected">Deck</option>
    <option value="<? existingDecks[1][0] ?>"><? existingDecks[1][0] ?></option>
    <option value="<? existingDecks[2][0] ?>"><? existingDecks[2][0] ?></option>
    <option value="<? existingDecks[3][0] ?>"><? existingDecks[3][0] ?></option>
  </select>

  <input type="submit" value="Submit" onclick="removeDeck(this.parentNode)">
</form>
<p id="removeDeck"></p>

<script>
function removeDeck(obj) {
  var x = document.getElementById("deck-selector").value;
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunToRemoveDeck(obj);
}
</script>

</body>
</html>

使用电子表格中的数据动态填充HTML下拉列表

使用代码和HTML添加卡片组（效果很好）

删除甲板的代码（不起作用）

0 个答案: