javascript - 无法在应用程序脚本中创建详细信息 View 选项卡-6ren

javascript - 无法在应用程序脚本中创建详细信息 View 选项卡

转载作者：行者123 更新时间：2023-12-04 08:15:05

实际上我正在尝试在 google 工作表中创建信息模式，它提取与代码匹配的数据，从主工作表中获取数据，它应该以模式显示数据，但不知何故我在传递从主工作表中提取的值时遇到了问题工作表到 html 输出文件并以模式显示。它在示例模态中显示为这样，有人可以帮助我理解，我做错了什么吗？虽然我不太熟悉代码，所以如果我做的事情完全错了，请原谅我 :P

示例电子表格链接:- https://docs.google.com/spreadsheets/d/1f5dGCTzMMCRqZB5hDVTbtHaxS1VNuz0IJOlCXjSNHyI/edit?usp=sharing

当用户单击 sheet1 上的复选框时，脚本运行并显示消息框。

function onEdit() {
  
    var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
    var Deleg = SpreadsheetApp.openById('1f5dGCTzMMCRqZB5hDVTbtHaxS1VNuz0IJOlCXjSNHyI').getSheetByName('Delegation Merged Data');
    var aRow =  ss.getActiveCell().getRow();
    var code =  ss.getRange(aRow, 1, 1, 1).getValue();
    ss.getRange(1, 3).setValue(code);
    
    var DelegData = Deleg.getRange(2, 1, Deleg.getLastRow()-1, 7).getDisplayValues();
    Logger.log(DelegData);
    
    var DelegTDetails = DelegData.filter(function(Details){
                    return Details[0] == code   ;
    });

  const htmlTemplate = HtmlService.createTemplateFromFile("Template");
  htmlTemplate.DelegTDetails = DelegTDetails;
  
  var html = HtmlService.createHtmlOutputFromFile('Template')
     .setWidth(1000)
     .setHeight(800);    
      
 SpreadsheetApp.getUi()
    .showModalDialog(html, 'Detail View'+'Test');
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Details View for Firmware Data</h2>
<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <table style="border-collapse: collapse;
    border: 1px solid black;text-align: center;
     font-family: Arial, Helvetica, sans-serif;
  width: 100%">
        <thead>
             <tr >
                 <th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Delegation Code</th>
                 <th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Assignee</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Assigned by</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Task Name</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Raised on</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Completed on</th><th style = "padding-top: 12px;
  padding-bottom: 12px;
    border: 1px solid black;
  text-align: center;
  background-color: #4CAF50;
  color: white">Status</th>
             </tr>      
       </thead>
       <tbody>
             <? var a = 1 ;
             DelegTDetails.forEach((r,i) => { ?>
              <tr><td style = "border: 1px solid black;
  border-collapse: collapse"><?= a ?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[0]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[1]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[2]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[3]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[4]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[5]?></td><td style = "border: 1px solid black;
  border-collapse: collapse"><?= r[6]?></td>
              </tr>
             <?
             a = a+1;
             }) ?>
       </tbody>
    
    </table>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

最佳答案

修改点:

在您的脚本中，使用了 HTML 模板。但是 SpreadsheetApp.getUi().showModalDialog(html, 'Detail View'+'Test') 的 html 不包含 DelegTDetails。我认为这可能是您遇到问题的原因。
当我看到您的脚本时，声明了 const htmlTemplate = HtmlService.createTemplateFromFile("Template")。但是，这个好像没有用。

为了消除这个问题，下面的修改怎么样？

修改后的脚本:

请按如下方式修改您的 Google Apps 脚本。

从:

 const htmlTemplate = HtmlService.createTemplateFromFile("Template");
 htmlTemplate.DelegTDetails = DelegTDetails;
 
 var html = HtmlService.createHtmlOutputFromFile('Template')
    .setWidth(1000)
    .setHeight(800);    
     
SpreadsheetApp.getUi()
   .showModalDialog(html, 'Detail View'+'Test');

到:

const htmlTemplate = HtmlService.createTemplateFromFile("Template");
htmlTemplate.DelegTDetails = DelegTDetails;
SpreadsheetApp.getUi().showModalDialog(htmlTemplate.evaluate().setWidth(1000).setHeight(800), 'Detail View'+'Test');

备注:

在这个修改中，它假定DelegTDetails 的值是您期望的值。请注意这一点。

引用:

HTML Service: Templated HTML

关于javascript - 无法在应用程序脚本中创建详细信息 View 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65747725/

文章推荐： javascript - 如何检查表列数据类型

文章推荐： javascript - 为什么 promise-limit 在 Nodejs 中不起作用？

C 程序我想知道是否有办法简化我的 dayofyear 程序？
我是 C 语言新手，我编写了这个 C 程序，让用户输入一年中的某一天，作为返回，程序将输出月份以及该月的哪一天。该程序运行良好，但我现在想简化该程序。我知道我需要一个循环，但我不知道如何去做。这是程序
java - GUI Java 程序 - Paint 程序
我一直在努力找出我的代码有什么问题。这个想法是创建一个小的画图程序，并有红色、绿色、蓝色和清除按钮。我有我能想到的一切让它工作，但无法弄清楚代码有什么问题。程序打开，然后立即关闭。 import ja
homebrew - 从 Homebrew 程序/欺骗程序到 Homebrew 程序/核心的迁移是什么？
我想安装screen，但是接下来我应该做什么？ $ brew search screen imgur-screenshot screen
python - 客户端(python 程序)没有收到服务器(c 程序)返回的响应？
我有一个在服务器端工作的 UDP 套接字应用程序。为了测试服务器端，我编写了一个简单的 python 客户端程序，它发送消息“hello world how are you”。服务器随后应接收消息，将
python - 运行一个 shell 脚本，该脚本运行一个 python 程序，然后运行一个 R 程序
我有一个 shell 脚本，它运行一个 Python 程序来预处理一些数据，然后运行一个 R 程序来执行一些长时间运行的任务。我正在学习使用 Docker 并且我一直在运行 FROM r-base:l
python - 在 Linux 中从 Python 启动一个 c 程序，将一个大文本字符串作为参数传递给 c 程序
在 Linux 中。我有一个 c 程序，它读取一个 2048 字节的文本文件作为输入。我想从 Python 脚本启动 c 程序。我希望 Python 脚本将文本字符串作为参数传递给 c 程序，而不是将
VHDL 程序
对于一个类，我被要求编写一个 VHDL 程序，该程序接受两个整数输入 A 和 B，并用 A+B 替换 A，用 A-B 替换 B。我编写了以下程序和测试平台。它完成了实现和行为语法检查，但它不会模拟。尽
haskell 程序
module Algorithm where import System.Random import Data.Maybe import Data.List type Atom = String ty
求给定N个数的最小公倍数的C++程序
我想找到两个以上数字的最小公倍数求给定N个数的最小公倍数的C++程序最佳答案 int lcm(int a, int b) { return (a/gcd(a,b))*b; } 对于gcd，请查看
索引器的c#程序
这个程序有错误。谁能解决这个问题？ Error is :TempRecord already defines a member called 'this' with the same paramete
铁路围栏密码的C++程序
当我运行下面的程序时，我在 str1 和 str2 中得到了垃圾值。所以 #include #include #include using namespace std; int main() {
死兔子的C++程序
这是我的作业: 一对刚出生的兔子(一公一母)被放在田里。兔子在一个月大时可以交配，因此在第二个月的月底，每对兔子都会生出两对新兔子，然后死去。注:在第0个月，有0对兔子。第 1 个月，有 1 对兔子
十进制转十六进制的C++程序
我编写了一个程序，通过对字母使用 switch 命令将十进制字符串转换为十六进制，但是如果我使用 char，该程序无法正常工作!没有 switch 我无法处理 9 以上的数字。我希望你能理解我，因为我
连接MySQL的C++程序
我是 C++ 新手(虽然我有一些 C 语言经验)和 MySQL，我正在尝试制作一个从 MySQL 读取数据库的程序，我一直在关注这个 tutorial但当我尝试“构建”解决方案时出现错误。 (我正在使
Swift If 程序
仍然是一个初学者，只是尝试使用 swift 中的一些基本函数。有人能告诉我这段代码有什么问题吗？ import UIKit var guessInt: Int var randomNum = arc
折叠常量的C++程序
我正在用 C++11 编写一个函数，它采用 constant1 + constant2 形式的表达式并将它们折叠起来。 constant1 和 constant2 存储在 std::string 中，
2个矩阵相加和相乘的C++程序
我用 C++ 编写了这段代码，使用运算符重载对 2 个矩阵进行加法和乘法运算。当我执行代码时，它会在第 57 行和第 59 行产生错误，非法结构操作(两行都出现相同的错误)。请解释我的错误。提前致谢:
交换字符串中两个字符的C++程序
我是 C++ 的初学者，我想编写一个简单的程序来交换字符串中的两个字符。例如；我们输入这个字符串:“EXAMPLE”，我们给它交换这两个字符:“E”和“A”，输出应该类似于“AXEMPLA”。我在
确定三角形的C++程序
我需要以下代码的帮助: 声明 3 个 double 类型变量，每个代表三角形的三个边中的一个。提示用户为第一面输入一个值，然后将用户的输入设置为您创建的代表三角形第一条边的变量。将最后 2 个步
矩阵旋转的c++程序
我是新来的，如果问题不好请见谅任务:将给定矩阵旋转180度输入: 1 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 输出: 16 15 14 13 12 11

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法在应用程序脚本中创建详细信息 View 选项卡

修改点:

修改后的脚本:

备注:

引用: