个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 08:15:05 24 4
gpt4 key购买 nike

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

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

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

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 的值是您期望的值。请注意这一点。

引用:

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

24 4 0
文章推荐： javascript - 如何检查表列数据类型
文章推荐： javascript - 从控制台获取 javascript 中的输入并存储在数组中，无需换行\n
文章推荐： javascript - 为什么 promise-limit 在 Nodejs 中不起作用？
文章推荐： amazon-web-services - ECS on EC2 同一任务中两个容器之间的双向通信
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com