javascript - 在模式对话框中创建按钮并在电子表格中运行代码 - Thinbug

在模式对话框中创建按钮并在电子表格中运行代码

时间：2020-08-26 04:37:48

标签： javascript google-apps-script google-sheets web-applications modal-dialog

我制作了一个表格并将其显示在模式对话框中，以便表格中的每一行都会显示按钮。我的问题是如何使模式对话框中的按钮针对电子表格中的特定行运行？示例：在模式对话框的第一行中单击第一个按钮，将在电子表格的第一行中运行和更改数据。我需要为每个按钮创建特定的ID吗？

My GS code:
function leadRespond(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Query_Script");
  var dataRange = sheet.getDataRange();
  var dataValue = dataRange.getDisplayValues();
   
  var temp = HtmlService.createTemplateFromFile("lead");
  temp.data = {application : dataValue};
  var html = temp.evaluate().setWidth(1200).setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(html,"Manage Leave");
}

HTML code:
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
</head>
  <body>
    <h1>Leave Application</h1>
    <div id="output"></div>
    
   
    <script>
      var output = document.getElementById("output");
      
      window.onload = function (){
        google.script.run.withSuccessHandler(onSuccess).getTable();
      }

      function onSuccess(data){
        if(data.success){
        console.log(data.data);
        var html = '<table>';
        var row;
        for(var i=0; i<data.data.length; i++){
          html += '<tr>';
          row = i;
          //console.log(row);
          for (var j=0; j<9; j++){
            html += '<td>'+ data.data[i][j]+'</td>';
          }
          html += '<td>'+ '<button onclick="approve()">Approved</button>'+'</td>';
          html += '</tr>';
        }
          html += '</table>';
          output.innerHTML = html;
        console.log(data);
        }
      }

      function approve(){
        google.script.run.getRow();
        console.log("test");
      }

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

Code with google.script.run :

function getTable(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Query_Script");
  var data = sheet.getDataRange().getDisplayValues();
  Logger.log(data);
  return {'success': true,'data':data};
}

function getRow(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Query_Script");
  for (var i=0; i<dataValue.length; i++){
      var row = "";
      var rowNum;
        for (var j = 0; j < 9; j++) {
          if (dataValue[i][j]) {
            row = row + dataValue[i][j];  //row = "" + range(0,0) [emailAddress], row = range(0,0)+ range(0,1)[emailAddress,Timestamp]
          }
        row = row + ",";
        }
        row = row + " Row num " + i;
        rowNum = i;
        
        Logger.log(row);
        Logger.log(rowNum);
    }
}

1 个答案:

答案 0 :(得分：2)

使用自定义html-data属性和delegate event to <table>：

html += '<td>'+ '<button data-row="'+i+'" data-column="'+j+'">Approved</button>'+'</td>';

//...
  output.innerHTML = html;
  console.log(data);
  const table = document.querySelector("table");
  table.addEventListener('click', approve);
}

function approve(e){
  const td = e.target;
  const [row, column] = [td.dataset.row,td.dataset.column];
  google.script.run.modifyRows(row,column);
}