搜索
搜索

将Google Apps脚本数组应用于HTML表单自动完成数据列表

chrt 发表于 Dev
21
灵缇犬

我设法制作了一个Google脚本函数，该函数从Google表格列创建一个数组，以过滤掉所有空格。但是，我不确定如何将此变量传递到HTML表单，以便创建自动完成选项列表。

用户将向电子表格添加内容，因此该列表必须是动态的，以随电子表格一起增长。表单用户应该能够使用自动完成功能键入内容，或者从电子表格数组中随时间变化的项目列表中滚动。

编辑：抱歉，由于没有显示足够的代码而造成的任何混乱。基本上，我试图在readData（）中获取数组，以将其转换为类似html的格式

<datalist id="datalist">
<option value="Plain#1">
<option value="Plain#2">
<option value="Plain#3">
<option value="Plain#4">
<option value="Plain#5">
<option value="Plain#6">
  </datalist>

我正在寻找结果，但会根据电子表格中的项目数量进行调整

代码如下：

这是我的JS

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();

  }
</script>

这是我的GS

function readData() {
  var url = "https://docs.google.com/spreadsheets/d/1ftdM8esHXRbdNbN0I00GSMPj5ZiCcPo9cs_9dAjFldc/edit#gid=540792552;" 
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Bags Inventory");
  var rng = ws.getRange(2,2,350,1)
  var rangeArray = rng.getValues();
  var filArray = rangeArray.filter(function (el) {
  return el != "";
});
return(filArray);
}

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1PRS5O42_vAwEqLFjULu-SyPvzSR902tu9xMXA88WnWM/edit#gid=73972270;"
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  
  ws.appendRow([
                new Date(), 
                Session.getActiveUser().getEmail(),
                formObject.item1,
                formObject.amount1,
                formObject.item2,
                formObject.amount2,
                formObject.item3,
                formObject.amount3,
                formObject.item4,
                formObject.amount4,
                formObject.item5,
                formObject.amount5,
                formObject.item6,
                formObject.amount6,
                formObject.item7,
                formObject.amount7,
                formObject.item8,
                formObject.amount8,
                formObject.item9,
                formObject.amount9,
                formObject.item10,
                formObject.amount10,
                formObject.client]);
}

这是我的HTML

    <!DOCTYPE html>
    <html>
        <head>
            <base target="_top">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <style>
            ::placeholder{
            color: #D3D3D3 !important;
            }
            </style>
            <?!= include('JavaScript'); 
            var options = readData();
            ?>
        </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <form id="myForm" onsubmit="handleFormSubmit(this)">
                            <p class="h4 mb-4 text-center">Paper Bag Inventory</p>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="item1">Item Code</label>
                                    <input type="text" class="form-control" id="item1" name="item1" placeholder="Item #1" list="datalist" required>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="amount1">Amount</label>
                                    <input type="text" class="form-control" id="amount1" name="amount1" placeholder="Amount" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item2" name="item2" placeholder="Item #2" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount2" name="amount2" placeholder="Amount">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item3" name="item3" placeholder="Item #3" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount3" name="amount3" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item4" name="item4" placeholder="Item #4" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount4" name="amount4" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item5" name="item5" placeholder="Item #5" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount5" name="amount5" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item6" name="item6" placeholder="Item #6" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount6" name="amount6" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item7" name="item7" placeholder="Item #7" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount7" name="amount7" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item8" name="item8" placeholder="Item #8" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount8" name="amount8" placeholder="Amount">
                                </div>
                            </div>                        
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item9" name="item9" placeholder="Item #9" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount9" name="amount9" placeholder="Amount">
                                </div>
                            </div>    
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="item10" name="item10" placeholder="Item #10" list="datalist">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="amount10" name="amount10" placeholder="Amount">
                                </div>
                            </div>    
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" id="client" name="client" placeholder="Client Name" required>
                                </div>
                            </div>    
    
                            <button type="submit" class="btn btn-primary btn-block">Submit</button>
                        </form>
                        <div id="output"></div>
                  </div>
            </div>      
        </div>
    </body>
</html>

    <datalist id="datalist">

            <script type="text/javascript">
            // my attempt to call gs function
              var mylist = readData()
            
              var options = '';
            
              for(var i = 0; i < mylist.length; i++)
                options += '<option value="'+mylist[i]+'" />';
            
              document.getElementById('datalist').innerHTML = options;
            </script>
   </datalist>
Tanaike

我想提出以下修改。

修改要点：

  • 对于您的情况，我建议从readData()Google Apps脚本返回1维数组。
  • 通过您的HTML＆Javascript，我认为您的HTML文件已放入Google Apps脚本项目中。在这种情况下，我建议使用模板HTML将Spreadsheet中的值放入。

当以上几点反映到您的脚本时，它将变为以下内容。

修改后的脚本：

Google Apps脚本方面：

function readData() {
  var url = "https://docs.google.com/spreadsheets/d/1ftdM8esHXRbdNbN0I00GSMPj5ZiCcPo9cs_9dAjFldc/edit#gid=540792552;" 
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Bags Inventory");
  var rng = ws.getRange(2,2,350,1)
  var rangeArray = rng.getValues();
  var filArray = rangeArray.filter(function (el) {return el[0] != ""}).flat();  // Modified
  return filArray;
}

而且，不幸的是，我无法理解您所处情况下使用HTML的方法。因此，如果您将脚本用作Web应用程序，请进行如下修改。

function doGet() {
  var html = HtmlService.createTemplateFromFile("index");
  html.data = readData();
  return html.evaluate();
}

  • 如果您使用侧边栏，请使用它。

      var html = HtmlService.createTemplateFromFile("index");
  html.data = readData();
  SpreadsheetApp.getUi().showSidebar(html.evaluate());

  • 如果使用对话框，请使用此对话框。

      var html = HtmlService.createTemplateFromFile("index");
  html.data = readData();
  SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");

HTML＆Javascript方面：

从： 
<datalist id="datalist"></datalist>
至： 
<datalist id="datalist">
<? for (var i = 0; i < data.length; i++) { ?>
  <option value="<?= data[i] ?>">
<? } ?>
</datalist>

注意：

  • 当您使用Web Apps并修改脚本时，请重新部署Web Apps作为新版本。这样，最新的脚本就会反映到Web应用程序中。请注意这一点。

参考：

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将 Google Apps 脚本项目中的 CSS 文件应用于 doPost() 返回的 HTML 文件？

如何将Google Apps脚本应用于gmail屏幕上的gmail邮件

使用Google Apps脚本将标题样式应用于单词的所有实例

将用于动态数据验证的 Google Apps 脚本应用于现有工作表

根据条件将CSS应用于“自动完成”？

Google Apps脚本数组问题

将数据帧返回功能应用于基本数据帧的每一行

将索引列表应用于数据框列表

将字符串修改应用于数组/列表

将PCA应用于列表中存储的数据

使用数据框列表将功能应用于列名

将 `class` 应用于数据表的列表列

将函数应用于R中的数据帧列表

将功能应用于数据框的列（列为列表）

如何将套用应用于数据列表控件

将条件应用于列列表的数据框过滤

将 `as.character()` 函数应用于数据帧列表

将dcast（）函数应用于数据帧列表

Google Apps 脚本 HTML 表单

将时间戳脚本应用于 Google 表格中的多个标签

Google Apps脚本-如何将此代码应用于Google表格中的多个表格

Google Maps：将功能应用于多个形状

Google云端硬盘API：将标签应用于附件

Google Spreadsheet将函数应用于未填充的行

我可以将jquery ajax响应用于自动完成吗

将触发Google Apps脚本最新表单响应-

使用Google Apps脚本自动将标签移动/应用到Gmail

如何将聚合函数应用于Google BigQuery中从JSON提取的数据？

如何将表单数据发布到Google Apps脚本

TOP 榜单

  1. 1

    Angular2：@HostBinding或主机：{}？

  2. 2

    魔术8球的循环中有错误

  3. 3

    用于表面图的python xyz数据转换

  4. 4

    执行期间代码中的“ this”与“ this”不匹配

  5. 5

    对两个结果词pyspark

  6. 6

    如何转换函数类型？

  7. 7

    Dockerfile VOLUME在-v工作时不起作用

  8. 8

    从命令行调用时，如何无条件打开存在的所有折叠而没有错误？

  9. 9

    更新可观察到的“ roles [0]未定义”时出错

  10. 10

    将鼠标悬停在一个表格单元格上将突出显示行中的先前单元格

  11. 11

    Embers js中的更改侦听器上的组合框

  12. 12

    使用popd，pushd获取目录堆栈中不同目录路径的引用

  13. 13

    美丽的汤不适用于特定网站

  14. 14

    （？！a）{0}是什么？在Java正则表达式中是什么意思？

  15. 15

    是否可以始终自动将命令行参数传递给install4j安装程序？

  16. 16

    如何在Ansible中隐藏跳过的任务输出

  17. 17

    SQLite文件中带有9位数字的时间戳

  18. 18

    ！r在Python中是什么意思？

  19. 19

    Java中的循环开关案例

  20. 20

    Terraform：基于.tfvars中变量的条件创建资源

  21. 21

    在 WooCommerce 我的帐户中更改标题自定义“查看订单”端点

热门标签

归档