javascript - 如何在 Google 表格的对话框中添加重置按钮

标签 javascript html google-apps-script google-sheets

我是脚本编写新手，但根据我从该网站学到的知识，我已经在谷歌表格中整理了支票簿 Assets 负债表。

我有一个功能“AddCheck”附加到其中一个单元格的按钮上。它的作用是 - 打开一个对话框，我可以在其中输入支票详细信息，例如日期、发票编号、金额和 vendor 名称。然后我点击提交按钮，Google 表格会创建一行并添加这些值。

我的问题是如何在提交按钮旁边添加一个按钮，该按钮允许我在不离开对话框的情况下添加新支票详细信息。这样它将把值添加到单元格中，并清除另一个条目的对话框。

这是我的 AddCheck 函数

    function AddCheck() {

  var spreadsheet = SpreadsheetApp.getActive();
  spreadsheet.getRange('3:3').activate();
  spreadsheet.getActiveSheet().insertRowsBefore(spreadsheet.getActiveRange().getRow(), 1);
  spreadsheet.getActiveRange().offset(0, 0, 1, spreadsheet.getActiveRange().getNumColumns()).activate();
  spreadsheet.getRange('A3').activate();
  spreadsheet.getCurrentCell().setFormula('=A4+1');
  spreadsheet.getRange('G3').activate();
  spreadsheet.getCurrentCell().setValue('Pending');
  spreadsheet.getRange('B3').activate();


  fncOpenMyDialog()

};

这是我的 HTML 对话框文件

<!DOCTYPE html>
<html>
<body>
<form>

<label for="Date">Date :</label>

    <input type='date' name='Date' id="Date" required="required"/>
    <br>
<label for="Invoice">Invoice</label>
    <input type='text' name='Invoice' id="Invoice" required="required"/>

<label for="Amount">Amount</label>
    <input type='text' name='Amount' id="Amount" required="required"/>

<label for="Company">Company</label>
<select name="Class" id="vendor-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

  <script>
      (function () {
        google.script.run.withSuccessHandler(
          function (selectList) {
            var select = document.getElementById("vendor-selector");
            for( var i=0; i<selectList.length; i++ ) {
              var option = document.createElement("option");
              option.text = selectList[i][0];
              select.add(option);
            }
          }
        ).getSelectList();
      }());
    </script>


</select>

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

<script>
function myFunction(obj) {
var x = document.getElementById("vendor-selector").value;
document.getElementById("CompanyName").innerHTML = x;
google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}
</script>

</body>
</html>

该函数调用对话框

function fncOpenMyDialog() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('CheckDetails')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(250);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'Check Details');
};


function functionToRunOnFormSubmit(fromInputForm) {

Logger.log(fromInputForm);

  var ss = SpreadsheetApp.getActive();
  ss.getSheetByName("Checks").getRange(3,3).setValues([[fromInputForm.Class]]);
  ss.getSheetByName("Checks").getRange(3,2).setValues([[fromInputForm.Date]]);
  ss.getSheetByName("Checks").getRange(3,4).setValues([[fromInputForm.Invoice]]);
  ss.getSheetByName("Checks").getRange(3,6).setValues([[fromInputForm.Amount]]);
};

此函数从 Sheet2 获取 vendor 列表

function getSelectList() 
         {
          var sheet = SpreadsheetApp.openById("141mlnxJBjepKxYCGXHFhz5IIEVnp6T2DDsb_uRgnZzY").getSheetByName('Sheet2');
          var lastRow = sheet.getLastRow();
          var myRange = sheet.getRange("A2:A" + lastRow);
          var data = myRange.getValues();
          Logger.log("Data = " + data); 
          return data;
         };


         function doGet() 
         {
         return HtmlService.createHtmlOutputFromFile('CheckDetails');
         }

感谢您的帮助。

最佳答案

为了实现这个“提交并继续”功能，您只需更改前端代码即可:

  1. 有一个新按钮。
  2. 点击新按钮后，会执行相同的后端 (GAS) 代码。
  3. GAS 代码执行后对话框不会关闭，但输入元素会重置。

代码修改

  1. 将 id 添加到表单标记，以便可以轻松选择它。

    <form id="CheckDetailsForm">

  2. 在 HTML 中创建“提交并继续”按钮。为其分配一个 id，以便可以轻松选择它。

    <input type="submit" value="Submit and continue" id="SubmitAndContinueInput" />

  3. 在 script 标记中，向新创建的按钮添加事件监听器。

    document.getElementById("SubmitAndContinueInput").addEventListener("click", myFunctionContinue);

  4. 为新创建的按钮的 onclick 事件添加处理函数。该函数与您正在使用的函数非常相似，但是:它将使用 preventDefault以避免表单被错误发送，并在提交后清除表单数据。 

    function clearForm() {
  document.getElementById('Date').value = "";
  document.getElementById('Invoice').value = "";
  document.getElementById('Amount').value = "";
}

function myFunctionContinue(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(clearForm)
    .functionToRunOnFormSubmit(obj);
}

示例对话框:

Example Sheets dialog

编辑

处理“提交并继续”新行:

  1. 从 AddCheck() 中删除行插入功能。我们稍后会处理这个逻辑:

    function AddCheck() {
  fncOpenMyDialog();
}

  2. 修改functionToRunOnFormSubmit()函数，以便它处理行插入逻辑。我还稍微清理了代码。它看起来像下面这样:

    function functionToRunOnFormSubmit(fromInputForm) {
  Logger.log(fromInputForm);

  var sheet = SpreadsheetApp.getActive().getSheetByName("Checks");

  sheet.insertRowBefore(3);

  sheet.getRange("A3").setFormula("=A4+1");
  sheet.getRange("B3").setValue(fromInputForm.Date);
  sheet.getRange("C3").setValue(fromInputForm.Class);
  sheet.getRange("D3").setValue(fromInputForm.Invoice);

  sheet.getRange("F3").setValue(fromInputForm.Amount);
  sheet.getRange("G3").setValue("Pending");
}

完整代码

CheckDetails.html

<!DOCTYPE html>
<html>
<body>
<form id="CheckDetailsForm">

<label for="Date">Date :</label>

    <input type='date' name='Date' id="Date" required="required"/>
    <br>
<label for="Invoice">Invoice</label>
    <input type='text' name='Invoice' id="Invoice" required="required"/>

<label for="Amount">Amount</label>
    <input type='text' name='Amount' id="Amount" required="required"/>

<label for="Company">Company</label>
<select name="Class" id="vendor-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">

  <script>
      (function () {
        google.script.run.withSuccessHandler(
          function (selectList) {
            var select = document.getElementById("vendor-selector");
            for( var i=0; i<selectList.length; i++ ) {
              var option = document.createElement("option");
              option.text = selectList[i][0];
              select.add(option);
            }
          }
        ).getSelectList();
      }());
    </script>

</select>

<input type="submit" value="Submit" id="SubmitInput" />
<input type="submit" value="Submit and continue" id="SubmitAndContinueInput" />

</form>

<p id="CompanyName"></p>

<script>
document.getElementById("SubmitInput").addEventListener("click", myFunction);
document.getElementById("SubmitAndContinueInput").addEventListener("click", myFunctionContinue);

function clearForm() {
  document.getElementById('Date').value = "";
  document.getElementById('Invoice').value = "";
  document.getElementById('Amount').value = "";
}

function myFunction(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(() => google.script.host.close())
    .functionToRunOnFormSubmit(obj);
}

function myFunctionContinue(e) {
  e.preventDefault();
  var obj = document.getElementById("CheckDetailsForm");
  var x = document.getElementById("vendor-selector").value;
  document.getElementById("CompanyName").innerHTML = x;
  google.script.run
    .withSuccessHandler(clearForm)
    .functionToRunOnFormSubmit(obj);
}
</script>

</body>
</html>

代码.gs

function AddCheck() {
  fncOpenMyDialog()
}

function fncOpenMyDialog() {
  //Open a dialog
  var htmlDlg = HtmlService.createHtmlOutputFromFile('CheckDetails')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(200)
      .setHeight(250);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'Check Details');
}

function functionToRunOnFormSubmit(fromInputForm) {
  Logger.log(fromInputForm);

  var sheet = SpreadsheetApp.getActive().getSheetByName("Checks");

  sheet.insertRowBefore(3);

  sheet.getRange("A3").setFormula("=A4+1");
  sheet.getRange("B3").setValue(fromInputForm.Date);
  sheet.getRange("C3").setValue(fromInputForm.Class);
  sheet.getRange("D3").setValue(fromInputForm.Invoice);

  sheet.getRange("F3").setValue(fromInputForm.Amount);
  sheet.getRange("G3").setValue("Pending");
}

function getSelectList() {
  var sheet = SpreadsheetApp.openById("141mlnxJBjepKxYCGXHFhz5IIEVnp6T2DDsb_uRgnZzY").getSheetByName('Sheet2');
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow);
  var data = myRange.getValues();
  Logger.log("Data = " + data); 
  return data;
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('CheckDetails');
}

关于javascript - 如何在 Google 表格的对话框中添加重置按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59588019/

上一篇：javascript - 为什么 requestHeaders 未定义？

下一篇：javascript - JavaScript闭包如何工作？

相关文章：

google-apps-script - Google Apps 脚本格式

javascript - 错误 : Cannot find module './lib/mediaType' "(after successful login)

javascript - .Net MVC 5 中的 Angular js 结构

javascript - 没有 javascript 应用程序数据库的离线/本地存储选项

javascript - react native : Can't style the Button

javascript - 将文本输入变量传递给 PHP 以进行 Div 加载

javascript - 在 Google Chrome 上使用 jQuery 加载窗口比 DOM 先加载

javascript - 如何根据选择删除 DOM 元素？

google-apps-script - 如何使用谷歌应用程序脚本获取谷歌电子表格最后一行的值

javascript - 使用谷歌脚本对谷歌表格中的数据进行排序(使用自定义排序顺序)

©2024 IT工具网  联系我们