javascript - 如何将 google 工作表中的单元格值设置为 HTML 侧边栏文本区域的默认值?

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

我有一个独立的 Google 脚本用作库。该库包含 HTML 表单,使用类似侧边栏的 <textarea>元素和脚本。我想从事件谷歌电子表格的单元格中获取一些值,将其设置为默认值 <textarea>侧边栏中的元素。然后通过手动键入文本来更新它,并将其作为新值发送到源单元格,保持侧边栏打开。

库的脚本

function showSidebar() {
    var html = HtmlService.createHtmlOutputFromFile('method.html')
        .setTitle('Cooking method')
        .setWidth(300);
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
        .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();//modified 
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}

HTML 侧边栏

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function()
      {
         google.script.run
             .withSuccessHandler(updateMethod)
             .getDefaultMethod();
      });
      function updateMethod(method_val)
      {
         document.getElementById('method').innerHTML=method_val;
      }
    </script>
  </head>
  <body>
    <form id="mysidebar">
    <div class="block form-group">
    <label for="method"></label>
        <textarea id="method" name="method" rows="30" cols="40">
        </textarea>
    </div>   

    <div class="block">
    <button type="submit" class="action">Add cooking method</button>
    </div>
    </form>
    <script>
    document.querySelector("#mysidebar").addEventListener("submit", 
    function(e)
    {
    e.preventDefault();    //stop form from submitting
    google.script.run.withSuccessHandler().addNewMethod(this);
    }
    )
    </script>
  </body>
</html>

客户电子表格上的函数。图书馆的名字是RecipeBuilder

```
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('method.html')
    .setTitle('Cooking method')
    .setWidth(900);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showSidebar(html);
  }

function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

function getDefaultMethod() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('Method');
  const currentMethod = sheet.getRange('A2').getValue();
  return currentMethod

}
```

我的脚本不起作用。侧边栏显示空白 <textarea>并且不将更新的值发送到单元格。 我哪里错了以及如何解决?我可以将侧边栏设置得比 300 更宽吗?

最佳答案

我相信您的目标如下。

  • 您想要设置从 Method 的单元格“A2”检索到的值事件电子表格中的工作表作为 textarea 的默认值.
  • 当点击“添加 cooking 方法”按钮时,您想要从 textarea 检索值。并将值放入 Method 的单元格“A2”中事件电子表格中的工作表。
  • 您想了解 Sidebar appears with blank <textarea> and does not send updated value to the cell. 问题的原因.

对于这个,这个答案怎么样?

修改点:

  • 关于getDefaultMethod()在客户端,在您的脚本中,需要从 RecipeBuilder.getDefaultMethod() 返回值。在当前脚本中,不会返回该值。因此,当加载 HTML 时,将从 Method 的单元格“A2”中检索到值。事件电子表格中的工作表未设置为 textarea .
  • 关于addNewMethod()在GAS库方面,var ss = SpreadsheetApp.getActiveSpreadsheet;不是运行该方法。所以请添加()
    • 我认为这就是您出现问题的原因。

修改后的脚本:

当您的脚本修改时,请进行如下修改。

请修改getDefaultMethod()客户端如下。

从:
function getDefaultMethod(){
  RecipeBuilder.getDefaultMethod();
}
到:
function getDefaultMethod(){
  return RecipeBuilder.getDefaultMethod();  // Modified
}

并且,请修改addNewMethod() GAS库端如下。

从:
function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet;
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}
到:
function addNewMethod(form_data)
{  
  var ss = SpreadsheetApp.getActiveSpreadsheet();  // Modified
  var sheet = ss.getSheetByName('Method');
  var cookingMethod = form_data.method;   
  sheet.getRange('A2').setValue(cookingMethod);
}

注意:

  • 在您的脚本中,如果客户端不是 Google Spreadsheet 的容器绑定(bind)脚本,并且客户端的 Google Spreadsheet 没有 Method 的工作表,发生错误。所以请小心这一点。

关于javascript - 如何将 google 工作表中的单元格值设置为 HTML 侧边栏文本区域的默认值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61570211/

相关文章:

html - Bootstrap 。列表 + ScrollSpy。如何降低高度?

javascript - 如何在 Google App 脚本中将 <HTML> 解析为字符串?

javascript - 看不到来自 onEdit 触发器的日志

javascript - 在单元格中使用 jQuery Tablesorter 和 div 不起作用

javascript - 如何使用 Chrome 扩展监听网页事件

javascript - 了解代码是在 NodeWebkit 中还是仅在浏览器中

html - 从普通更改为粗体时,CSS 相同的文本自动换行

javascript - 如何在 Watir 中引用 JavaScript 工具提示

html - 加载微调器 gif 图像卡住

google-apps-script - 脚本-DriveApp.getFilesByName-获取最新版本?