时间戳

首页 > 解决方案 > 无法从边栏中输入的数据更新谷歌电子表格

html - 无法从边栏中输入的数据更新谷歌电子表格

问题描述

我已经通过谷歌脚本 HTML 创建了侧边栏，当我尝试将侧边栏中输入的数据附加到活动 Google 电子表格时，我无法追踪代码未能附加输入数据的位置。我附上了我的 HTML 代码和 gs 代码。请求让我知道我的代码哪里出错了。此外，我想为需要从电子表格中获取输入的依赖字段创建一个下拉列表，我不知道任何人都可以帮助阅读文献。先感谢您

function SideBar() {

  var template=HtmlService.createTemplateFromFile('SideBar')
  var html= template.evaluate();
  html.setTitle("New Task");
  var ui=SpreadsheetApp.getUi();
  ui.createMenu("Task Manager")
  .addItem("Add New Task","SideBar")
  .addToUi();
  //.addItem("Update Task","SideBar")
  //.addToUi();
  //.addItem("Re-assign Task", "SideBar")
  //.addToUi();
  ui.showSidebar(html);
  }

function appendData(data){

  //var url= '1S64cYsfHEcddmOfXNfAO6VaCQ9LIFPylx8Sj_6h70e4';
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Task");
  var log= ws.appendRow([data.Task,
                data.TaskDescription,
                data.AssignedTo,
                data.StartDate,
                data.EndDate,
                data.PriorityType,
                data.Dependency]);
  Logger.log(log);

}

/* 下面是 HTML 文件代码 */

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <div class="container">

        <div class="row">

        <div class="input-field col s12">
          <i class="material-icons prefix">assignment</i>
          <input id="Task" type="text" class="validate">
          <label for="Task">Task</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">description</i>
          <input id="TaskDescription" type="text" class="validate">
          <label for="TaskDescription">Task Description</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">assignment_ind</i>
          <input id="AssignedTo" type="email" class="validate">
          <label for="AssignedTo">Assigned To </label>

          <!--div class="dropdown-content">
                 <a href="https://www.google.com">Google</a>
                 <a href="https://www.facebook.com">Facebook</a>
                 <a href="https://www.youtube.com">YouTube</a>
            </div-->            
        </div>

     <div class="input-field col s6">
          <!--i class="material-icons prefix">date_range</i-->
          <input id="StartDate" type="date" class="validate">
          <label for="StartDate">Start Date</label>  
        </div>

        <div class="input-field col s6">
          <!--i class="material-icons prefix">date_range</i-->
          <input id="EndDate" type="date" class="validate">
          <label for="EndDate">End Date </label>
          </div>

        <div class="input-field col s12">
          <!--i class="material-icons prefix">date_range</i-->
          <input id="PriorityType" type="text" class="validate">
          <label for="PriorityType">Priority Type </label>        
        </div>

        <div class="input-field col s12">
          <!--i class="material-icons prefix">date_range</i-->
          <input id="Dependency" type="text" class="validate">
          <label for="Dependency">Dependency </label>         
        </div>

        <div class="input-field col s12">
         <button class="btn waves-effect waves-light">Assign
           <input id="btn">
           <i class="material-icons right">send</i>
        </button>
       </div> 


      </div>   
      </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

      <script>

      var Task = document.getElementById("Task");
      var TaskDescription = document.getElementById("TaskDescription");
      var AssignedTo = document.getElementById("AssignedTo");
      var StartDate = document.getElementById("StartDate");
      var EndDate = document.getElementById("EndDate");
      var PriorityType = document.getElementById("PriorityType");
      var Dependency = document.getElementById("Dependency");-->

      document.getElementbyId("btn").addEventListener("click",addRecord);

      function addRecord(data){
           var data= {
           Task:Task.value,
           TaskDescription:TaskDescription.value,
           AssignedTo:AssignedTo.value,
           StartDate:StartDate.value,
           EndDate:EndDate.value,
           PriorityType:PriorityType.value,
           Dependency:Dependency.value
           };
           google.script.run.appendData(data);
      }

      </script>
    </body>
  </html>

标签： htmlcssgoogle-apps-script

解决方案

我大大简化了你的代码。其中有几个客户端错误。我建议您花更多时间学习使用浏览器开发工具。特别是console.log。

你可能想把你的一些造型带回来，我会慢慢做，这样你就不会再迷路了。

任何方式现在都可以使用类似的 addRecord 函数。

谷歌脚本：

function ShowDialog() {
  var userInterface=HtmlService.createHtmlOutputFromFile('aq7');
  var ui=SpreadsheetApp.getUi();
  ui.showSidebar(userInterface);
  }

function appendData(data){
  Logger.log(data);
  SpreadsheetApp.getActive().getSheetByName("Task").appendRow([data.text]);
}

html:

<!DOCTYPE html>
  <html>
    <body>
    <input type="text" id="txt" />
    <input type="button" value="Assign" onClick="addRecord();" />
      <script>
      function addRecord(){
        var t=document.getElementById('txt').value;
        var data={text:t};
        console.log(data);
        google.script.run.appendData(data);
      }
      console.log('My Code')
      </script>
    </body>
  </html>

这个错误需要一段时间才能找到。你能看到它在哪里吗？

document.getElementbyId("btn").addEventListener("click",addRecord);

推荐阅读