javascript - 如何在谷歌应用程序脚本中刷新标签而不重新加载页面

Question

我已完成单元格更新，现在我想在使用 google-app-script 单击表格上循环的按钮后自动刷新标记。无法理解 documentation 中的编码。请帮我解决这个问题。谢谢!

html

<div  id="tables">
      <? var data = getData();?>
      <table id="tableShift1">
      <caption style="">Shift1</caption>
          <th>   ID   </th>
          <th>   Ldap   </th>
          <th>   Action   </th>
        <? for (var dataList = 1; dataList < data.length; dataList++) {
             if (data[dataList][2] == '') {?>
          <tr >
            <td><?= data[dataList][0] ?></td>
            <td><?= data[dataList][1] ?></td>
            <td><button onclick='google.script.run.setApproved("<?=data[dataList][0]?> ","<?=data[dataList][1]?>")' id='btnApprove'>Approve</button></td>
          </tr>
        <? }  
          } ?>
        </table>


        <table id="tableShift2">
      <caption>Shift2</caption>
          <th>   ID   </th>
          <th>   Ldap   </th>
          <th>   Action   </th>
        </table>
    </div>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showData)
      .getData();
});

function showData(things2) {
  var table = $('#tableShift2');
  var kwit = ',';
  for (var i = 1; i < things2.length; i++) {
    table.append('<tr ><td>' + things2[i][0] + 
    '</td><td style=>' + things2[i][1]+ things2[i][0] + 
    '</td><td ><button onclick="google.script.run.setApproved("'+ things2[i][0] +'","'+ things2[i][1] +'")" id="btnApprove">Approve</button></td></tr>');
  }
}
</script>
  </body>

Answer 1

你可以尝试这样的事情:

添加新函数，提供将新数据返回到refreshData()的功能

function showData(things2) {
  var table = $('#tableShift2');
  var kwit = ',';
  for (var i = 1; i < things2.length; i++) {
    table.append('<tr ><td>' + things2[i][0] + 
                 '</td><td style=>' + things2[i][1]+ things2[i][0] + 
                 '</td><td ><button onclick="ApproveAndRefresh("'+ things2[i][0] +'","'+ things2[i][1] +'");" id="btnApprove">Approve</button></td></tr>');
  }
}


function ApproveAndRefresh(data1,data2){//you may need to include i
  google.script.run
  .withSuccessHandler(refreshData)
  .setApproved1(data1,data2);//a modified setApproved on the server that returns the appropriate html to the tableShift2 element
}

function refreshData(hl){
  document.getElementById('tableShift2').innerHTML=hl;
}