Question

如何在不重新加载页面的情况下刷新表格标签？在我当前的代码中，它令人耳目一新，但我注意到它就像刷新整个文档一样。我试图在过滤日期的过滤器功能。因此，当我检查1个单选按钮然后获取它时，我检查的单选按钮也将刷新（变为未选中）。那么我怎么才能刷新我的桌子呢？请帮帮我。我从2018年1月开始做这个项目。

Code.gs

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

}

function getData() {
   return JSON.stringify(SpreadsheetApp.openById('17lKIhONfEeNogsBhKtGr4zVaLgH0_199-3J3-0tAdcE')
  .getActiveSheet()
  .getDataRange()
  .getValues());
}

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

function setApproved(a, b) {
  var html = HtmlService.createTemplateFromFile('Index').evaluate().getContent();
  var ss = SpreadsheetApp.openById('17lKIhONfEeNogsBhKtGr4zVaLgH0_199-3J3-0tAdcE');
  var sheet = ss.getActiveSheet();
  var dataRange = sheet.getDataRange();
  var values = dataRange.getValues();

  var headers = values[0];
  var ldapIndex = headers.indexOf('dbName');
  var idIndex = headers.indexOf('dbID');
  var statusIndex = headers.indexOf('dbStatus');
  var sheetRow;

  for( var i = 1 ; i < values.length; i++ ) {
    var row = values[i];
    if(row[idIndex] == a && row[ldapIndex] == b) { 
      sheetRow = i +1;
      break;
    }
  }

  ++statusIndex;
  sheet.getRange(sheetRow, statusIndex).setValue('Approved');

  return html;
}
function fetchData() {
var html = HtmlService.createTemplateFromFile('Index').evaluate().getContent();
return html;
}

的index.html

    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">

      </head>

      <body>
      <? var data = getData(); ?>
      <div id="Options">
        <label><b>Month</b></label>
        <select id="selectMonth">
          <option value="0">-Select Month-</option>
          <option value="1">January</option>       
          <option value="2">February</option>       
          <option value="3">March</option>       
          <option value="4">April</option>       
          <option value="5">May</option>       
          <option value="6">June</option>       
          <option value="7">July</option>       
          <option value="8">August</option>       
          <option value="9">September</option>       
          <option value="10">October</option>       
          <option value="11">November</option>       
          <option value="12">December</option>
        </select> - 
      <input type="radio" name="radioYear" id="radioYear" value="<?= new Date().getYear(); ?>"> <?= new Date().getYear(); ?>
      <input type="radio" name="radioYear" id="radioYear2" value="<?= new Date().getYear()+1; ?>"> <?= new Date().getYear()+1; ?>
      <button id="btnFetch" onclick="google.script.run.withSuccessHandler(fetchRecord).getData()">Fetch</button>
      </div>
      <div  id="tables">
            <table id="tableShift2">
            <caption>Team unknown</caption>
              <th>   Date and Time Plotted   </th>
              <th>   Name   </th>
              <th>   Date of VL   </th>
              <th>   HD/WD   </th>
              <th>   Action   </th>
            </table>
      </div>
      <div id="date"></div>
    <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
  google.script.run.withSuccessHandler(showData)
      .getData();
});

function showData(things1) {
  var things = JSON.parse(things1);
  var table = $('#tableShift2');

    for (var i = 1; i < things.length; i++) {
      var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October", 
        "November", "December"
      ];

      var date = new Date(things[i][1]);
      var day = date.getDate();
      var monthIndex = date.getMonth();
      var year = date.getFullYear();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (things[i][6] == '') {
        table.append('<tr> <td>' + monthNames[monthIndex] + ' ' + day + ', ' + year + ' ' + hour + ':' + minute + ':' + second +
                 '</td> <td>' + things[i][2] +
                 '</td> <td>' + things[i][3] +
                 '</td> <td>' + things[i][4] +
                 '</td> <td ><button onclick=\'ApproveAndRefresh("' + things[i][0] + '","' + things[i][2] +
                 '")\' id="btnApprove">Approve</button> <button onclick=\'DeclineAndRefresh("' + things[i][0] + '","' + things[i][2] + 
                 '")\' id="btnDecline">Decline</button></td></tr>');

      }

  }
}
function ApproveAndRefresh(data, data1){
  google.script.run
  .withSuccessHandler(refreshData)
  .setApproved(data, data1);
}

function DeclineAndRefresh(data, data1){
  google.script.run
  .withSuccessHandler(refreshData)
  .setDeclined(data, data1);
}

function refreshData(hl){
   document.open();
   document.write(hl);
   document.close();
}

</script>

      </body>
    </html>

Answer 1

您已经拥有table.append()功能，可以刷新数据，但不会刷新页面。您可以使用它来更新您的表。目前，您已将其设置为将行附加到表function showData(things1) { var things = JSON.parse(things1); $('#tableShift2 tbody').remove(); //Remove Previous table, except headers var table = $('#tableShift2'); ... //Remaining code remains the same }。但是，您需要首先清除表格而不删除标题here。所以函数将被修改如下：

table.append()

或者您也可以使用ApproveAndRefresh()以编程方式创建标题接下来，您需要修改DeclineAndRefresh()和showData()函数，以便在Success上调用function ApproveAndRefresh(data, data1){ google.script.run .withSuccessHandler(showData) .setApproved(data, data1); }函数，如下所示：

setApproved

最后，setDecline()和getData()当前返回HTML内容。但是，他们只需返回function setApproved(a, b) { // You dont need the recreate the page var ss = SpreadsheetApp.openById('17lKIhONfEeNogsBhKtGr4zVaLgH0_199-3J3-0tAdcE'); var sheet = ss.getActiveSheet(); ... // The rest of the code remains same here ++statusIndex; sheet.getRange(sheetRow, statusIndex).setValue('Approved'); return getData() //You just return values generated from getData() }值，如下所示：

 return JSON.stringfy(ss.getActiveSheet().getDataRange().getValues())

同样，您可以像这样返回电子表格数据

    private DifferentialDrive m_robotDrive
        = new DifferentialDrive(new Spark(0), new Spark(1));
 static Joystick m_stick = new Joystick(1);
    private Timer m_timer = new Timer();
    static Subsystem ExampleSubsystem;
    Command ExampleCommand;
    Command CompressCommand;
    Command DecompressCommand;
    Command OpenClawCommand;
    Command CloseClawCommand;
    Command CompressorToggleCommand;

public static class OI {
    static Button   button1 = new JoystickButton(m_stick, 1);
    static Button   button2 = new JoystickButton(m_stick, 2);
    static Button   button3 = new JoystickButton(m_stick, 3);
    static Button   button4 = new JoystickButton(m_stick, 4);
    static Button   button5 = new JoystickButton(m_stick, 5);
    static Button   button6 = new JoystickButton(m_stick, 6);
    static Button   button7 = new JoystickButton(m_stick, 7);
    static Button   button8 = new JoystickButton(m_stick, 8);
}

// Define Commands for Joystick Buttons
public void OI() {
    OI.button1.whileHeld(new CompressorToggleCommand());
    OI.button2.whileHeld(new CompressCommand());
    OI.button3.whileHeld(new DecompressCommand());
    OI.button4.whileHeld(new OpenClawCommand());
    OI.button5.whileHeld(new CloseClawCommand());
    OI.button6.whileHeld(new ExampleCommand());
    OI.button7.whileHeld(new ExampleCommand());
    OI.button8.whileHeld(new ExampleCommand());
}

public class Compressor {
    Compressor c = new Compressor();
}
public class Solenoid {
    Solenoid exampleSolenoid = new Solenoid();
}

如何使用谷歌应用程序脚本刷新JavaScript中的标签

1 个答案: