如何将HTML页面中编辑的内容保存到Google Sheet表格

实现步骤 #

1. 先修改code.gs代码

首先调整getData1函数，给每个单元格加上行、列索引标记，方便后续定位编辑的内容对应表格的位置，同时新增saveData函数用来接收前端传回的数据写入表格：

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Jigs & Tools')
      .addItem('First item', 'displayHtmlViewer')
      .addToUi();
}

function include(filename) {
 return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
}

function displayHtmlViewer(file = "dashboard"){
  var html = HtmlService.createTemplateFromFile(file)
            .evaluate()
            .setHeight(2000)
            .setWidth(2000);
 SpreadsheetApp.getUi().showModalDialog(html, 'J&T Dashboard');
}

function getData1(){
  var ss=SpreadsheetApp.getActive();
  var rg=ss.getDataRange();
  var vA=rg.getValues();
  // 修正原代码表格闭合标签错误
  var html='<style>td,th{border:1px solid #111;} td[contenteditable]{cursor:text;}</style><table>';
  if(vA.length>0){
    for(var i=0;i<vA.length;i++){
      html+='<tr>';
      for(var j=0;j<vA[i].length;j++){
        if(i==0){
          html+=Utilities.formatString('<th>%s</th>', vA[i][j]);
        }else{
          // 给数据单元格加行、列索引属性，同时设置单独可编辑
          html+=Utilities.formatString('<td data-row="%s" data-col="%s" contenteditable>%s</td>', i, j, vA[i][j]);
        }
      }
      html+='</tr>';
    }
    html+='</table>';
  }
  Logger.log(html)
  return html;
}

// 新增保存数据的函数
function saveData(modifiedData){
  var ss = SpreadsheetApp.getActive();
  var rg = ss.getDataRange();
  rg.setValues(modifiedData);
  return "保存成功";
}

2. 修改dashboard.html代码，新增保存按钮

<html>
  <head>
    <base target="_top">
    <?!=include('CSS');?>
    <?!= include('res1') ?>
  </head>
  <script>
    function getData() {
      var rows = google.script.run.useDataRange();
      alert(rows);
    }
  </script>
   <body style="background-color:powderblue;">
      <div class="btnGroup1" style="width:100%">
        <button style="width:25%" onclick="google.script.run.getLengthSS()">Filter Views</button>
        <button style="width:25%">Edit Filter Views</button>
        <button style="width:25%">Options</button>
        <!-- 新增保存按钮 -->
        <button style="width:25%" id="saveBtn">保存修改</button>
      </div>
      <div class="divider"></div>
      <!-- 移除全局contenteditable，已经在单元格上单独设置 -->
      <div><div id="table"></div></div>
    <?!= include('script1') ?>
  </body>
</html>

3. 修改script1代码，添加保存逻辑

<script>
$(function(){
  // 先加载表格内容
  google.script.run
  .withSuccessHandler(function(hl){
    document.getElementById('table').innerHTML=hl;
  })
  .getData1();

  // 绑定保存按钮点击事件
  $('#saveBtn').click(function(){
    // 遍历表格获取所有修改后的内容
    var data = [];
    $('#table table tr').each(function(rowIdx){
      var rowData = [];
      $(this).find('th,td').each(function(colIdx){
        rowData.push($(this).text().trim());
      });
      data.push(rowData);
    });

    // 把数据传给后端写入表格
    google.script.run
    .withSuccessHandler(function(msg){
      alert(msg);
    })
    .withFailureHandler(function(err){
      alert("保存失败：" + err);
    })
    .saveData(data);
  })
});
console.log('My Code');
</script>

可选优化点

• 如果表格数据量很大，可改为增量更新：只收集修改过的单元格数据传回后端，不用每次传输全量表格，性能更好
• 可以给编辑过的单元格加特殊样式标记，方便用户区分修改内容
• 表头如果需要编辑，把th标签也加上contenteditable属性即可

内容的提问来源于stack exchange，提问作者RichardGeef