google-apps-script - 如何使用 google Sheet 作为数据库-6ren

google-apps-script - 如何使用 google Sheet 作为数据库

转载作者：行者123 更新时间：2023-12-02 01:10:27

如何在 HTML 网络应用程序中生成 google 表格数据，它应该允许用户更新来自 HTML 网络应用程序的评论...？

我在谷歌表格中有一些数据(通过谷歌表格提交)我想使用搜索按钮基于“请求编号”从网络应用程序搜索表格数据+应该能够更新来自网络应用程序的评论并且应该得到反射(reflect)在谷歌表格中(在同一个单元格上)

Google Sheet-File

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5i2zvZQw0qJxPbgHrCp3tu_L0RjzTvBZBr5xROg7AVE0E4kR9" alt="IIFL LOGO" style="width:100px;height:50px;">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search Requset Number">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>
<div class="row">
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Requset Number</label><input type="text" class="form-control" id="usr"></div>
     <div class="col-xs-3"><label for="usr"><p class="text-primary">Assgined To</label><select class="form-control" id="sel1">
     <option>User1</option>
    <option>User2</option>
    <option>User3</option>
    <option>User4</option>
    </select>
  </div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request Status</label><select class="form-control" id="sel1">
    <option>New</option>
    <option>Open</option>
    <option>Hold</option>
    <option>Reject</option>
    <option>Quote - In Process</option>
    <option>Negotiation – In process</option>
    <option>Commercial Closed</option>
    <option>PRS in Process</option>
    <option>PO in Process</option>
    <option>PO Send to Vendor</option>
    <option>Negotiation – In process</option>
    <option>Delivered</option>
    <option>Paid</option>
    <option>Closed</option>
  </select>
  </div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
  <div class="row">
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Timestamp</label><input type="text" class="form-control" id="usr"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Business User</label><input type="text" class="form-control" id="usr"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request Type</label><input type="text" class="form-control" id="usr"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request For</label><input type="text" class="form-control" id="usr"></div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-6"><label for="usr">Short Description</label><textarea class="form-control" rows="3" id="comment"></textarea></div>
    <div class="col-md-6 col-sm-6 col-xs-6"><label for="usr">Remark Note</label><textarea class="form-control" rows="3" id="comment"></textarea></div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="container">
  <button type="button" class="btn btn-success" class="center">Clik here to Update/Save the Comments </button>    
</div>
</body>
</html>

最佳答案

引用下面的代码来搜索和更新请求。我还修复了 Bootstrap 类。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5i2zvZQw0qJxPbgHrCp3tu_L0RjzTvBZBr5xROg7AVE0E4kR9" alt="IIFL LOGO" style="width:100px;height:50px;">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
    </ul>
    <form class="navbar-form navbar-left" onsubmit="return searchRequest();">
      <div class="form-group">
        <input type="text" id="requestID" class="form-control" placeholder="Search Requset Number">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Requset Number</label><input type="text" class="form-control" id="requestNumber"></div>
     <div class="col-xs-3"><label for="usr"><p class="text-primary">Assgined To</label><select class="form-control" id="assignedTo">
     <option>User1</option>
    <option>User2</option>
    <option>User3</option>
    <option>User4</option>
    </select>
  </div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request Status</label><select class="form-control" id="status">
    <option>New</option>
    <option>Open</option>
    <option>Hold</option>
    <option>Reject</option>
    <option>Quote - In Process</option>
    <option>Negotiation – In process</option>
    <option>Commercial Closed</option>
    <option>PRS in Process</option>
    <option>PO in Process</option>
    <option>PO Send to Vendor</option>
    <option>Negotiation – In process</option>
    <option>Delivered</option>
    <option>Paid</option>
    <option>Closed</option>
  </select>
  </div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
  <div class="row">
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Timestamp</label><input type="text" class="form-control" id="timestamp"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Business User</label><input type="text" class="form-control" id="BU"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request Type</label><input type="text" class="form-control" id="rTpe"></div>
    <div class="col-xs-3"><label for="usr"><p class="text-primary">Request For</label><input type="text" class="form-control" id="rFor"></div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-6"><label for="usr">Short Description</label><textarea class="form-control" rows="3" id="shortDesc"></textarea></div>
    <div class="col-md-6 col-sm-6 col-xs-6"><label for="usr">Remark Note</label><textarea class="form-control" rows="3" id="remark"></textarea></div>
</div>
 <hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="container">
  <button type="button" class="btn btn-success" onclick="updateRequest()" id="updateBtn" class="center">Clik here to Update/Save the Comments </button>    
</div>
</div>
</body>
</html>
<script>
function searchRequest(){
  if($("#requestID").val()!=""){
    $("form input,form button").attr("disabled",true);
    google.script.run.withSuccessHandler(displayData).fetchRequestDetails($("#requestID").val())
  };
  return false;
}

function displayData(result){
  $("form input,form button").attr("disabled",false);
  if(result!= -1){
    console.log(result)
    $("#updateBtn").attr("disabled",false);
    $("#requestNumber").val(result[0][0]);
    $("#assignedTo").val(result[0][6]);
    $("#status").val(result[0][7]);
    $("#timestamp").val(result[0][1]);
    $("#BU").val(result[0][2]);
    $("#rTpe").val(result[0][3]);
    $("#rFor").val(result[0][4]);
    $("#shortDesc").val(result[0][5]);
    $("#remark").val(result[0][8]);
  }else{
    alert("Not Found");
  }
}


function updateRequest(){

  if($("#requestNumber").val()!=""){
     $("#updateBtn").attr("disabled",true);
     var updateJson = {};
     updateJson["Short Description"]=$("#shortDesc").val();
     updateJson["Remark Note"]=$("#remark").val();
     updateJson["Assgined To"]=$("#remark").val();
     updateJson["Assgined To"]=$("#assignedTo").val();
     updateJson["Request Status"]=$("#status").val();
     google.script.run.withSuccessHandler(function (){
         alert("Updated");
         $("#updateBtn").attr("disabled",false);
         }
     ).updateRequestComments($("#requestNumber").val(),updateJson);
  }
}

</script>

谷歌脚本:

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

function fetchRequestDetails(id){
    var sheetDatabase = SpreadsheetApp.openById("1jrq4fgQdk1ccHGRD3cEY4EQsx5FvXRJuZp-9smOEVsw").getSheetByName("Sheet1");
    var columnValues = sheetDatabase.getRange(2, 1, sheetDatabase.getLastRow()-1).getValues(); 
    var searchResult = columnValues.findIndex(id);

    if(searchResult != -1)
    {
      var aData=sheetDatabase.getRange(searchResult+2, 1, 1,sheetDatabase.getLastColumn()).getValues();
      aData[0][1]= Utilities.formatDate(aData[0][1], "GMT +1","yyyy-MM-dd hh:mm:ss a")
      return aData;
    }
    return -1;
}

function updateRequestComments(reqID, comments){
    var scriptLock = LockService.getScriptLock();
    scriptLock.waitLock(3000);
      var sheetDatabase = SpreadsheetApp.openById("1jrq4fgQdk1ccHGRD3cEY4EQsx5FvXRJuZp-9smOEVsw").getSheetByName("Sheet1");
      var columnValues = sheetDatabase.getRange(2, 1, sheetDatabase.getLastRow()-1).getValues(); 
      var searchResult = columnValues.findIndex(reqID);
      if(searchResult != -1)
      {
        sheetDatabase.getRange(searchResult+2, 6, 1,1).setValue(comments["Short Description"]);
        sheetDatabase.getRange(searchResult+2, 9, 1,1).setValue(comments["Remark Note"]);
        sheetDatabase.getRange(searchResult+2, 7, 1,1).setValue(comments["Assgined To"]);
        sheetDatabase.getRange(searchResult+2, 8, 1,1).setValue(comments["Request Status"]);
      }
    scriptLock.releaseLock();
}

Array.prototype.findIndex = function(search){
  if(search == "") return false;
  for (var i=0; i<this.length; i++)
    if (this[i].toString().indexOf(search) > -1 ) return i;
  return -1;
}

关于google-apps-script - 如何使用 google Sheet 作为数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45386321/

文章推荐： scala - 如何动态定义流式数据集的模式以写入 csv？

文章推荐： intellij-idea - 如何在 CLion 默认主题中强调警告？

文章推荐： r - 从 R 中具有精确均值和 sd 的截断正态分布生成数据

node.js - MAC OS X "open APP.app"和 "APP.app/content/MacOs/APP"shell 脚本之间的差异
如果我调用一个应用程序两次或多次，但只有一个实例应该运行(这是所需的)，我就会遇到一个问题。首先一些(可能必要的)背景信息: 使用 MAC OS X El Capitan (10.11.6) 我有一
google-apps-script - 使用 Apps 脚本代码用另一个 Apps 脚本文件更新(覆盖)一个 Apps 脚本文件
覆盖文件。覆盖 Apps 脚本文件。这是不是创建一个新的 Apps 脚本文件的问题。那对我没有帮助。我需要更新现有的 Apps 脚本文件。这个问题类似于创建一个新文件，但不是同一个问题。更新的语
google-apps-script - 从另一个 Apps Script 项目运行 Apps Script Web App 时如何以编程方式进行身份验证
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
google-apps-script - 从另一个 Apps Script 项目运行 Apps Script Web App 时如何以编程方式进行身份验证
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
android - APP URI for app Indexing an android app
我有一个安卓应用程序。我想为我的应用程序实现 App Indexing。我已经点击了 Google 开发者链接 https://developers.google.com/app-indexing/
javascript - import App from '../components/App' 有什么区别？和 var App = require ('../components/App' );?
有什么区别: import App from '../components/App'; 和 var App = require('../components/App'); 两者都用于获取组件，但它没有
javascript - RequireJS 搜索 app.app 而不是 app.js(其中 app.js 是 data-main 中指定的入口点)
问题: 我有一个使用 requireJS 的简单演示应用程序。当require.min.js脚本加载时，它尝试加载入口点脚本。但是，问题是，而不是 localhost:8090/js/app.js它尝
android - React-Native: "FirebaseError: No Firebase App ' [默认 ]' has been created - call Firebase App.initializeApp() (app/no-app)"
我正在构建一个 React Native 应用程序，目前正在尝试通过 Firebase Auth 实现一个身份验证注册系统。我已经按照指南/网站上的文档来设置 Firebase 配置文件。我运行该应用
google-app-engine - Google App Engine app.yaml 网址映射
因此 app.yaml 文件的一部分如下所示(至少在 GAE 教程中): handlers: - url: /.* script: main.app 但是，我也看到它看起来像这样: handler
android - 信息:Gradle任务[:app:generateDebugSources，:app:generateDebugAndroidTestSources，:app:createMockableJar]
我是Android App开发的新手。当我尝试创建一个新项目Android Project时，弹出以下消息: Information:Gradle tasks [:app:generateDebugS
google-apps-script - Google App Script Web App 上的并发点击或同时执行的数量是否有限制
我正在编写一个应用程序脚本(用于处理电子邮件、任务和日历事件)并希望将其部署为网络应用程序。该应用程序将在运行它的用户的上下文中运行。该应用程序将被超过 10k+ 的用户使用，甚至可能更多。在将其
google-apps-script - Google Apps Script Web App 在外部网站上进行身份验证
我需要实现一个用于登录网站的 Google Apps 脚本应用，然后如果该网站上的身份验证过程成功，用户应该会在 google 脚本边栏中收到一条消息。例如:用户输入他的邮箱和密码，然后他点击登录按
android - 如何在iOS App 中使用Google In-App Purchase 系统使用在Android App 中购买的数字项目？
我正在开发一个跨平台应用程序，它将在 Google Play 商店和 App Store 上发布。 Google Play 政策以及 App Store 政策规定，您不能使用其他支付系统购买将在应用程
google-app-engine - App Engine 忽略我的源代码更新和我的 app.yaml 文件
我的 AppEngine 应用程序在我的台式机上的开发服务器上运行良好，但我无法在 Google 服务器上获取版本以关注我的源代码更新。这是最有说服力的例证。我的 app.yaml 文件开始于: a
google-app-engine - 上传属性 Google App Engine - app.yaml
我像这样将所有内容重定向到我的 app.yaml 中的单个文件 - url: /.* script: frontcontroller.application 但我仍然必须使用 robots.txt
google-app-engine - Google App Engine : one app, 多个域
我想构建一个基于 App Engine 的网络应用程序，并使用 Google 帐户对用户进行身份验证。我需要来自多个域的用户可以登录。从我读到的内容看来，仅使用 Google Accounts API
google-app-engine - Google Apps 域上的 Google App Engine
我无法将我的域指向我使用 Google App Engine 托管的网站。这是背景……注意区分“google apps”(域托管、电子邮件等)和“google app engine”(网站框架)的概念
google-app-engine - 使用 Google Apps + App Engine 进行单点登录
是否可以通过 App Engine 上内置的 OpenId 实现单点登录？我一直在尝试集成一个 Marketplace 应用程序，并让用户在来自 Google Apps(管理面板或通用导航)时登录。我
azure-web-app-service - 从 azure-cli 向 Web App 或 Function App 添加 App Insights 支持
有没有办法从 azure-cli 为 Web 应用或函数应用创建和/或激活 App Insights？现在浏览文档。最佳答案我之前也考虑过你的问题。要创建应用程序洞察力，az resource
angular - ng new hello 错误 : Path "/app/app.module.ts" does not exist. 路径 "/app/app.module.ts"不存在
我在以 Angular 创建新项目时遇到问题。当我运行 ng new myapp 命令时，我得到以下命令 ng 新问候语 Error: Path "/app/app.module.ts" does n

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

google-apps-script - 如何使用 google Sheet 作为数据库