Google Webapp:如何动态地将数组值传递给 jquery 脚本

2023-12-31

我一直在寻找 StackOverflow 问题的答案日期选择器:禁用数据中的日期 https://stackoverflow.com/a/58794323/1330560。我已经成功开发了一个小型网络应用程序,它使用 jQuery Datepicker 排除特定日期beforeShowDay选项和硬编码日期数组。

Problem

目前,排除日期的数组是硬编码的,但这些日期应该动态生成。虽然我在 code.gs 中有一个函数getuserdates()这将返回“userdates”数组["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"],我在网络上没有找到任何参考来解释如何将数组值动态传递到 web 应用程序。

@Tanaike 的回答使用 Google Apps 脚本根据 Google 表格中的值禁用日期选择器中的日期 https://stackoverflow.com/a/57140560/1330560似乎与这个问题相关,但我未能适应任何包含该数组的成功代码。我认为这里的部分问题是 Tanaike 的答案是 100% Javascript,而这个场景需要 Javascript 和 jQuery。

我尝试了 scriptlet(没想到它们会起作用,但你永远不知道。它们都生成了一个错误Uncaught SyntaxError: Unexpected token '<'

  • var userdates = <? getuserdates(); ?>

  • var userdates = <?= getuserdates(); ?>

  • var userdates = <?!= getuserdates(); ?>

Goal动态更新变量的值array.

链接到电子表格 https://docs.google.com/spreadsheets/d/1shHxpM1maOuXdajI8Kwo-QzLtseeryt0c5QyHnfhv48/edit?usp=sharing

最新的 webapp url(已更新) https://script.google.com/macros/s/AKfycbwOw9THlNShp9o1yrFw3FbtIfCcLMIuPsKN4khSuARp3lilNswQ/exec

Code

以下代码可以完美运行;唯一的问题是数组值是硬编码的。

code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getuserdates() {
  var ss = SpreadsheetApp.getActiveSpreadsheet()
  var sheetname = "VL Request";
  var datasheet = ss.getSheetByName(sheetname);
 
  // assume user name
  //var userName = Session.getEffectiveUser().getUsername()
  var username = "user1";
  
  // set variables
  var datafirstrow = 2;
  var dataLR = datasheet.getLastRow();
  var dataLC = datasheet.getLastColumn();
  var datasheetRange = datasheet.getRange(datafirstrow,1, dataLR-datafirstrow+1, dataLC);
  //Logger.log(datasheetRange.getA1Notation());
  
  // sort the data by date
  datasheetRange.sort(6); // sort by Column F - VL date
  var datasheetData = datasheetRange.getDisplayValues();
  //Logger.log(datasheetData);
  
  //   get the user names as an array
  var datanames = datasheetData.map(function(e){return e[2];});//[[e],[e],[e]]=>[e,e,e]
  //Logger.log(datanames); // DEBUG
  //Logger.log(datanames.length) // DEBUG
  
  // create an array to hold any dates
  var userdates = [];

  //  loop through the user names; test for equivalence to "username", and save VF date to an array
  for (var i=0;i<datanames.length;i++){
    //Logger.log("dataname = "+datanames[i])
    if (datanames[i] === username){
      // Logger.log("DEBUG: i= "+i+", user name = "+datanames[i]+", VL date = "+datasheetData[i][5]);
      userdates.push('"' + datasheetData[i][5]+ '"');
    }
    else{
      // Logger.log("DEBUG: i= "+i+" - no match");
    }
  }
  // resort the data by Timestamp
   datasheetRange.sort(1); // sort by Column A
  
  if (userdates.length !=0){
  //Logger.log("There are "+userdates.length+" previous dates for this user.");//DEBUG
  }
  else{
  //Logger.log("There no previous dates for this user");//DEBUG
  }
  
  //Logger.log(userdates);
  return userdates;
}

页面.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
    <?!= include('JavaScript'); ?>
  </body>
</html>

JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

$(function() {
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
});
</script>

When getuserdates()在 Google Apps 脚本方面返回的值["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"], userdates of var userdates = <?= getuserdates(); ?> is 12/13/2019,12/14/2019,12/16/2019,12/17/2019,12/24/2019的字符串类型。我认为这样一来,你的脚本就行不通了。

那么,作为几个答案之一,这个答案怎么样?请修改JavaScript.html.

模式一:

在此模式中,使用了 scriptlet。我以为这个线程 https://stackoverflow.com/q/58810165可能有用。

From:

var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

To:

var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
  • 当脚本运行时,userdates is ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].
  • 作为使用 scriptlet 的另一种模式,例如,如果您想使用var userdates = <?= getuserdates(); ?>,您还可以修改var userdates = <?= getuserdates(); ?> to var userdates = <?= getuserdates() ?>.split(",");.

模式2:

在此模式中,使用 google.script.run。

From:

var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];

To:

google.script.run.withSuccessHandler(userdates => {
  $(function() {
    $('#datepicker').datepicker({
      minDate: "+3W", 
      maxDate: "+12W",
      beforeShowDay: function (date) {
        $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
        if ($.inArray($thisDate, userdates) == -1) {
          return [true, ""];
        } else {
          return [false, "", "Unavailable"];
        }
      }
    });
  });
}).getuserdates();
  • 当脚本运行时,userdates从...获得getuserdates()用作["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].

Note:

  • 在这种情况下,假设getuserdates()回报["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].

参考:

  • HTML 服务:模板化 HTML https://developers.google.com/apps-script/guides/html/templates
  • 类 google.script.run https://developers.google.com/apps-script/guides/html/reference/run

如果我误解了你的问题并且这不是你想要的方向,我很抱歉。

Edit 1:

关于问题1:

关于错误的原因Uncaught SyntaxError: Unexpected token '<'出现这个问题的原因是<?!= include('JavaScript'); ?>。所以请修改如下。

From:

</div>
  <?!= include('JavaScript'); ?>
</body>

To:

</div>
<script>
var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
</script>
  <?!= include('JavaScript'); ?>
</body>
  • 在这种情况下,请不要添加<script>###</script> to JavaScript of <?!= include('JavaScript'); ?>.
  • 不幸的是,似乎 scriptlet 不能用于 scriptlet 中。

关于问题2:

关于原因[""12/11/2019"", ""12/15/2019"", ""12/16/2019"", ""12/17/2019"", ""12/24/2019""]返回自getuserdates(),这个问题的原因是userdates.push('"' + datasheetData[i][5]+ '"');。所以请修改如下。

From:

userdates.push('"' + datasheetData[i][5]+ '"');

To:

userdates.push(datasheetData[i][5]);

Edit 2:

当使用模式1时,脚本如下。关于getuserdates()GAS侧,请修改自userdates.push('"' + datasheetData[i][5]+ '"'); to userdates.push(datasheetData[i][5]);。请按如下方式修改 HTML 和 Javascript 端。

HTML 和 JavaScript:Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
    <script>
    var userdates = [];
    <? var data = getuserdates(); ?>
    <? for (var i = 0; i < data.length; i++) { ?>
      userdates.push(<?= data[i] ?>);
    <? } ?>
    </script>
    <?!= include('JavaScript'); ?>
  </body>
</html>

HTML 和 JavaScript:JavaScript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(function() {
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Webapp:如何动态地将数组值传递给 jquery 脚本 的相关文章

随机推荐

  • “string”的类型不正确(预期为 str,得到了 spacy.tokens.doc.Doc)

    我有一个数据框 train review train review train review 看起来像 0 With all this stuff going down at the moment w 1 The Classic War o
  • Spark SQL 2.0:带有有效 PostgreSQL 查询的 NullPointerException

    我有一个有效的 PostgreSQL 查询 当我将其复制 粘贴到 PSQL 中时 我得到了所需的结果 但是当我使用 Spark SQL 运行时 它会导致NullPointerException 这是导致错误的代码片段 extractData
  • 来自 Python 的 URL 请求

    我有一个正在运行的服务器 它总是在监听value field 我可以通过 URL 从网络浏览器发出请求 Eg http 192 168 1 101 value 1 我怎样才能从Python发出这样的请求 我尝试了上面的代码 但它似乎不起作用
  • 什么可以保护 Android AccountManager 密码不被其他应用读取?

    我正在编写 1 一个在 AccountManager 中存储用户名和密码的应用程序 以及 2 一个单独的后台服务应用程序 用于访问这些凭据以登录我的服务器等 通过使用这个 我发现我能够从服务 应用程序 2 调用 AccountManager
  • MatplotLib 通过轴获取所有注释

    我正在用 Python 和 Tkinter 做一个项目 我可以绘制一组数据 并且还实现了一个在单击鼠标时在绘图上添加注释的功能 但现在我需要我添加的所有注释的列表 有什么办法可以做到这一点吗 这是我添加注释的功能 def onclick s
  • Android 中的卷曲动画(如书本的打开页面)

    我正在开发一个包含许多图像 高清 的应用程序 这些图像将通过分别向左 向右交换屏幕来显示在下一个 上一个图像中 图像的更改应该像打开书页 卷曲动画http www youtube com watch v vOYvaNhSHw http ww
  • 是否可以将 VoiP 呼叫转接至 GSM [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 是否可以使用 Android 手机作为简单的 GSM 网关 电话将使用 最好 Android 内置 SIP 堆栈接收 VoiP 呼叫
  • 关于python中的global关键字

    coding utf 8 def func print x is x x 2 if I add this line there will be an error why print Changed local x to x x 50 fun
  • 仅获取程序集中定义的类型[重复]

    这个问题在这里已经有答案了 可能的重复 调用 Assembly GetTypes 时如何防止 ReflectionTypeLoadException https stackoverflow com questions 7889228 how
  • ObjectBox 是否有等效的 SQL Like 关键字

    我有一个使用 ObjectBox 在本地存储数据的项目 当我在 SQL 中执行查询时 我可以使用 来获取所有项目 因为我使用 Like 关键字来匹配模式 ObjectBox 是否有等效的方法在查询中执行此操作 不确定您的用例的具体情况 通常
  • 价格正则表达式?

    我正在寻找价格的正则表达式 所以前面应该是X个数字 而不是 最后最多是2个数字 有人可以支持我并发布吗 您将使用什么语言 它应该是这样的 d d 1 2 解释 前面的X号 is d where 表示字符串的开头 d表示一个数字并且 表示一个
  • .htaccess mod-rewrite 与子文件夹身份验证冲突

    我有一个网站 它使用 htaccess 将所有不存在的文件 文件夹的请求重定向到索引文件 RewriteCond REQUEST FILENAME s OR RewriteCond REQUEST FILENAME l OR Rewrite
  • Angular 4 routerLink - 重新加载当前路由

    我想问是否可以使用routerLink再次打开当前页面 我有这个菜单 ul li a Home a li li a Users a li ul 当当前 url 为www domain com users我想单击菜单中的 用户 并刷新此页面
  • 使用 typescript 强类型化 React-Redux 连接

    我在尝试输入反应组件的参数时遇到错误 我想严格输入组件的 props 和 state 上的属性 但是当我使用 Redux 这样做时 当我将 mapStateToProps 传递给 connect 函数时 我收到错误 这是组件代码 impor
  • Apache CXF - 凭证未从 WSS4JOutInterceptor 发送?

    我正在尝试使用 WS Security UsernameToken 规范 1 0 连接到 Web 服务 使用阿帕奇cxf 2 4 0 我从 CXF 文档复制了下面的代码 但得到 org apache cxf ws policy Policy
  • 在 .Net 字符串中表达大于 127 的字节值

    我正在使用字符串在 Net 中编写一些二进制协议消息 它mostly有效 除了一种特殊情况 我试图发送的消息是 String cmdPacket xFD x0B x16MBEPEXE1 myDevice Write Encoding ASC
  • 多线程wpf应用程序设置线程cultureinfo

    我正在开发一个多线程 wpf 应用程序 为了执行全球化 我尝试将当前线程 主线程 区域性设置为 app xaml cs 中的不变文化 以便应用程序域中的所有 C 对象都适用于区域性不变信息 但是 当许多线程开始使用调用的工作线程时 就会出现
  • 位域类型是否影响结构对齐

    我有以下结构 struct bf struct1 uint64 t bf1 1 uint64 t bf2 6 uint64 t bf3 2 uint64 t bf4 55 struct bf struct2 uint8 t bf1 1 ui
  • Silverlight 从“哑”服务器按需加载参考数据

    我有一个文本文件 其中包含 300 000 个单词的列表以及它们出现的频率 每行的格式为 Word FequencyOfOccurence 我希望可以从 C 代码中访问此信息 我无法对列表进行硬编码 因为它太长 并且我不确定如何从服务器上的
  • Google Webapp:如何动态地将数组值传递给 jquery 脚本

    我一直在寻找 StackOverflow 问题的答案日期选择器 禁用数据中的日期 https stackoverflow com a 58794323 1330560 我已经成功开发了一个小型网络应用程序 它使用 jQuery Datepi