重新加载表格以及单击按钮

Question

我正在编写通过观看 YouTube 获得的代码，这是一个 HR 员工打卡和打卡记录，我在 HTML 中另外添加了一个表格数据，但它不会在单击按钮时重新加载表格（我们必须刷新页面才能获取表中的新记录），我搜索了一些文章并发现this 很有帮助，但我在配置它时遇到了一些麻烦。我可以得到一些帮助来完成这项工作吗？

我的代码

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('TimeTracker');
}

function getEmployees() { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var employeeSheet = ss.getSheetByName("EMPLOYEES"); 
  var getLastRow = employeeSheet.getLastRow();  
  return employeeSheet.getRange(2, 1, getLastRow - 1, 1).getValues();  
}

function clockIn(employee) {
  
  //DEFINE ALL ACTIVE SHEETS
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  //DEFINE MAIN SHEET          
  var mainSheet = ss.getSheetByName("MAIN");

  //LAST ROW ON MAIN SHEET
  var lastRow = mainSheet.getLastRow();
  
  //Define Return Variables
  var return_date = '';
  var error = 'SUCCESS';
  var return_array = [];

  for (var j = 2; j <= lastRow; j++)
  {
    // CHECK CLOCK IN
    if(employee ==  mainSheet.getRange(j, 1).getValue() && mainSheet.getRange(j,3).getValue() == '')
    {
      error = 'Need to Clock Out before Clocking In';
      return_array.push([error, return_date, employee]);
      return return_array;
    }
    
  }
  
  var new_date = new Date();
  return_date = getDate(new_date);
  
  // ADD CLOCK IN RECORD
  mainSheet.getRange(lastRow+1,1).setValue(employee)
  .setFontSize(12);
  mainSheet.getRange(lastRow+1,2).setValue(new_date)
  .setNumberFormat("MM/dd/yyyy hh:mm:ss am/pm")
  .setHorizontalAlignment("left")
  .setFontSize(12);
  
  return_array.push([error, return_date, employee]);
  return return_array;
  
}

function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function getDate(date_in)
{
  var currentDate = date_in;
  var currentMonth = currentDate.getMonth()+1;
  var currentYear = currentDate.getFullYear();
  var currentHours = (addZero(currentDate.getHours()) > 12) ? addZero(currentDate.getHours()) - 12 : addZero(currentDate.getHours());
  var currentMinutes = addZero(currentDate.getMinutes());
  var currentSeconds = addZero(currentDate.getSeconds());
  var suffix = (addZero(currentDate.getHours()) >= 12)? 'PM' : 'AM';
  var date = currentMonth.toString() + '/' + currentDate.getDate().toString() + '/' + 
             currentYear.toString() + ' ' + currentHours.toString() + ':' +
             currentMinutes.toString() + ':' + currentSeconds.toString() + ' ' + suffix;
  
  return date;
}


function clockOut(employee) {
  
  //DEFINE ALL ACTIVE SHEETS
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  //DEFINE MAIN SHEET          
  var mainSheet = ss.getSheetByName("MAIN");

  //LAST ROW ON MAIN SHEET
  var lastRow = mainSheet.getLastRow();
  
  var foundRecord = false;
  
  var new_date = new Date();
  var return_date = getDate(new_date);
  var error = 'SUCCESS';
  var return_array = [];
  
  for (var j = 2; j <= lastRow; j++)
  {
    // FIND CLOCK IN RECORD
    if(employee ==  mainSheet.getRange(j, 1).getValue() && mainSheet.getRange(j,3).getValue() == '')
    {
      // UPDATE CLOCK IN RECORD
      mainSheet.getRange(j,3)
      .setValue(new_date)
      .setNumberFormat("MM/dd/yyyy hh:mm:ss am/pm")
      .setHorizontalAlignment("left")
      .setFontSize(12);
      var totalTime = (mainSheet.getRange(j,3).getValue() - mainSheet.getRange(j,2).getValue()) /(60*60*1000);
      mainSheet.getRange(j,4).setValue(totalTime.toFixed(2))
      .setNumberFormat("#0.00")
      .setHorizontalAlignment("left")
      .setFontSize(12);  
      foundRecord = true;     
    }
    
  }
  
  // IF NO CLOCK IN RECORD
  if(foundRecord == false)
  {
    return_array.push(['Need to Clock In First', '', employee]);
    return return_array; 
  }
  
  // CALL TOTAL HOURS
  TotalHours();
  
  return_array.push([error, return_date, employee]);
  return return_array;
}

function TotalHours()
{
  
  //DEFINE ALL ACTIVE SHEETS
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  
  //DEFINE MAIN SHEET          
  var mainSheet = ss.getSheetByName("MAIN");

  //LAST ROW ON MAIN SHEET
  var lastRow = mainSheet.getLastRow();
  
  //DEFINE ARRAY
  var totals = [];
  
  //LOOP THROUGH ALL RATES
  for (var j = 2; j <= lastRow; j++)
  {
    var rate = mainSheet.getRange(j, 4).getValue();
    var name = mainSheet.getRange(j, 1).getValue();
    var foundRecord = false;
    
    for(var i = 0; i < totals.length; i++)
    {
       //FOUND RECORD ADD TO TOTAL
       if(name == totals[i][0] && rate != '')
       {         
         totals[i][1] =  totals[i][1] + rate;
         foundRecord = true;
       }
    }
    
    //ADD NEW RECORD, EXISTING RECORD NOT FOUND
    if(foundRecord == false && rate != '')
    {
      totals.push([name, rate]);
    }
    
  }
  
  //CLEAR DATA
  mainSheet.getRange("F5:G1000").clear();
  
  //DISPLAY TOTALS
  for(var i = 0; i < totals.length; i++)
  {
    mainSheet.getRange(2+i,6).setValue(totals[i][0]).setFontSize(12);
    mainSheet.getRange(2+i,7).setValue(totals[i][1]).setFontSize(12);  
  } 
}

//Send Table to HTML

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



//Table Data
function getData() {
  const headerColumns = 5;  // In your case, the number of header columns is 5.

  const sheet = SpreadsheetApp.openById('15Sb-g71H6-7PPey3aQROo-oCx_ULKQq2a5kIUeLEmNY').getSheetByName("TODAY");
  const values = sheet.getRange(1, 1, sheet.getLastRow(), headerColumns).getDisplayValues();
  console.log(values)
  return values;
}

我的 HTML 输出

<!DOCTYPE html>
<html>
  <head>

    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>   
    <script>
    $( document ).ready(function() {
      getEmployees();
    });
    
    function getEmployees() 
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {
    var employeeSelect = document.getElementById("employee");
    console.log(ar);
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    employeeSelect.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      var employee = item[0];
      option.value = item[0];
      option.text = item[0];
      employeeSelect.appendChild(option);    
    });
    }).getEmployees();
    
    };
    
    function ClockIn()
    {
    
    $('#message').html("");
    var employee = document.getElementById("employee").value;
    
    if(employee != '')
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {
     console.log(ar);
    ar.forEach(function(item, index) 
    {
    
    if(item[0] == 'SUCCESS')
    {
    var message = item[2] + ' Clocked in at ' + item[1];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-primary";
    }
    else
    {
    var message = item[2] + ' ' + item[0];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-warning"; 
    }
    
     
    });
    
    }).clockIn(employee);
    
    }
    }
    
    function ClockOut()
    {
    
    $('#message').html("");
    var employee = document.getElementById("employee").value;
    
    if(employee != '')
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {
    console.log(ar);
    ar.forEach(function(item, index) 
    {
    
    if(item[0] == 'SUCCESS')
    {
    var message = item[2] + ' Clocked out at ' + item[1];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-primary";
    }
    else
    {
    var message = item[2] + ' ' + item[0];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-warning"; 
    }
        
    });
    
    }).clockOut(employee);
    
    }
    }
    </script>
  </head>
  
  <body>
  <div class="container">
  <div style="padding: 10px;" >
  <h1>WORK LOG</h1><br>
  <form>
  <div class="form-row">
  <div class="form-group col-md-4">
  <label for="employee">Employee</label>
  <select class="form-control" id="employee">
  </select>
  </div>
  </div>
  <div class="form-row">
  <div class="form-group col-md-4">
  <input type="button" value="Clock In" id="clockin" class="btn btn-primary" onclick="ClockIn()" />
  <input type="button" value="Clock Out" id="clockout" class="btn btn-primary" onclick="ClockOut()" /><br><br>
  <div class="alert alert-primary" role="alert" id="message">
  </div>
  </div> 
  </div> 
  </form>
  </div>
  
 



<table class="table">
  <? var [header, ...data] = getData(); ?>
  <thead class="thead-dark"><tr>
  <? for (var j = 0; j < header.length; j++) { ?>
    <th><?= header[j] ?></th>
  <? } ?>
  </tr></thead>

  <? for (var i = 0; i < data.length; i++) { ?>
  <tr>
    <? for (var j = 0; j < data[i].length; j++) { ?>
    <td><?= data[i][j] ?></td>
    <? } ?>
  </tr>
  <? } ?>
</table>


  </div>
  
  </body>
</html>




  [1]: https://stackoverflow.com/questions/45864415/button-action-to-retrieve-data-from-spreadsheet-using-google-app-script

Answer 1

因此，您的代码无法正常工作的原因是，当您单击打卡或打卡按钮时，您实际上并未在服务器端调用 getData()。