Question

使用google电子表格api，是否可以将电子表格嵌入可编辑的网站，而无需将其保存在用户的google云端硬盘上？

对于登录我们的Web服务的每个用户，我们希望从数据库中检索用户的数据，并在电子表格中将其显示给用户。用户可以编辑，在确认后，电子表格上的数据将上传到我们的数据库中。在此过程中，我们不希望将数据保存在用户的Google驱动器上，并且不应要求用户授权访问其Google驱动器。这可以通过Google电子表格API进行吗？

另外，我正在寻找一些像这样的但没有找到的好例子。有什么建议？非常感谢你。

Answer 1

以下是创建和编辑电子表格的html版本的简单示例。如果您愿意，可以将其部署为Web应用程序。我将它开发为无模式对话框。要编辑任何单元格，只需进行更改并按Enter键。背景为黄色，电子表格更新后，背景颜色返回白色。没有其他控件。

我想你可以添加许多其他增强功能，但这涵盖了一些基础知识，包括客户端到服务器和服务器返回客户端通信。

google脚本代码：

function htmlSpreadsheet()
{
  var br='<br />';
  var s='';
  var hdrRows=1;
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sht=ss.getActiveSheet();
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  s+='<table width="100%">';
  for(var i=0;i<rngA.length;i++)
  {
    s+='<tr>';
    for(var j=0;j<rngA[i].length;j++)
    {
      if(i<hdrRows)
      {
        s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      } 
      else
      {
        s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      }
    }
    s+='</tr>';
  }
  s+='</table>';
  //s+='<div id="success"></div>';
  s+='</body></html>';

  var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
  userInterface.append(s);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
}

function updateSpreadsheet(i,j,value)
{
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sht=ss.getActiveSheet();
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  rngA[i][j]=value;
  rng.setValues(rngA);
  var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
  return data;
}

htmlss.html文件：

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {

    });
    function updateSS(i,j)
    {
      var str='#txt' + String(i) + String(j);
      var value=$(str).val();
      $(str).css('background-color','#ffff00');
      google.script.run
         .withSuccessHandler(successHandler)
         .updateSpreadsheet(i,j,value)
    }
    function successHandler(data)
    {
      //$('#success').text(data.message);
      $('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
    }
    console.log('My Code');
    </script>
    <style>
      th{text-align:left}
    </style>
  </head>
  <body>
  <div id="success"></div>

嵌入交互式谷歌电子表格api

1 个答案: