不是一个全面的答案：

Question

我是Google表格脚本的快速学习初学者。在我迄今为止所做的应用程序中，我制作的侧边栏包括按钮和文本，但没有从变量传递。我会注意到我对Javascript的理解相当不错，但还没有进入jquery，尽管我有一本关于这个主题的好书。

在这种情况下，我从两个不同的电子表格中获取变量值，我希望将其传递给侧边栏，以便用户可以查看数据并设置约会。

我的.gs代码:(这是服务器端代码）

function apptSidebar2() {
  var html = HtmlService.createHtmlOutputFromFile('setApptsPage2')
      .setTitle('Counselor Connect Easy!')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

function setAppts2() {
    //get all the data for client appointment
    var setupSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Setup');
    var shID=setupSheet.getRange(1,2).getValue();
    var feedSheet = SpreadsheetApp.openById(shID);
    var dataSheet = feedSheet.getSheetByName('StudentData'); 
    
    var lastColumn = dataSheet.getLastColumn();
    var lastRow = dataSheet.getLastRow();
    for(var i=lastRow;i>0;i--) {
      if(dataSheet.getRange(i,1).getValue()==thisID) {
        var clientData = dataSheet.getRange(i,1,1,lastColumn).getValues();
        }
    } 
    var SID = thisID;
    var SLN = clientData[0][1];
    var SFN = clientData[0][2];
    var b1r = clientData[0][3].toString();
    var b1t = clientData[0][4].toString();
    var b1c = clientData[0][5].toString();
    var SB1 = b1r+" "+b1t+" "+b1c;
    
    var b2r = clientData[0][6].toString();
    var b2t = clientData[0][7].toString();
    var b2c = clientData[0][8].toString();
    var SB2 = b2r+" "+b2t+" "+b2c;
    
    var b3r = clientData[0][9].toString();
    var b3t = clientData[0][10].toString();
    var b3c = clientData[0][11].toString();
    var SB3 = b3r+" "+b3t+" "+b3c;
    
    var b4r = clientData[0][12].toString();
    var b4t = clientData[0][13].toString();
    var b4c = clientData[0][14].toString();
    var SB4 = b4r+" "+b4t+" "+b4c;
    
    var b5r = clientData[0][15].toString();
    var b5t = clientData[0][16].toString();
    var b5c = clientData[0][17].toString();
    var SB5 = b5r+" "+b5t+" "+b5c;
    
    var b6r = clientData[0][18].toString();
    var b6t = clientData[0][19].toString();
    var b6c = clientData[0][20].toString();
    var SB6 = b6r+" "+b6t+" "+b6c;

    apptSidebar2(); 
}

我的侧边栏的html，我怀疑在我需要如何连接两者时非常不了解。据我所知，我比我想的更接近：

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
   <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
    <script type="text/javascript">
	function getStudent() {
		if(!document.getElementById) return;
		var apptDiv2 = document.getElementById("appt2");
	}
	</script>
  </head>
<body>
  <div id="container" style="padding: 10px; text-align:center;">
    <div id="appt2">
    <b>Student Data</b>
    <p id="name">Student Name</p>
    <p id = "id">nnnnn</p>
    <p id = "reason">Why</p>
    <p id = "notes">More why</p>
    <p id = "blk1">Block 1</p>
    <p id = "blk2">Block 2</p>
    <p id = "blk3">Block 3</p>
    <p id = "blk4">Block 4</p>
    <p id = "blk5">Block 5</p>
    <p id = "blk6">Block 6</p>
    
    <input type="text" id="datepicker" value="click to choose date">
  </div>
</div>

  <div style=
        "width: 100%;
        position: fixed;
        bottom: 0;
        width: 100%; 
        text-align:center;
        background-color:black;
        text-color:white;">
        <p><a href="http://www.fastadmin.solutions" target="blank"><b>©FastAdmin Solutions</b></a></p>
</div>  
        </div>
</body>
</html>

Answer 1

不是一个全面的答案：

您可以更改此内容：

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>

这样的事情

HTML（客户方）：

<script>
  $( function() {
    $( "#datepicker" ).datepicker();

    google.script.run
    .withSuccessHandler('insertHtmlIntoADiv')
    .getDesiredDataInHtmlFormat();
  } );
     function insertHtmlIntoADiv(hl){
     $('#mydiv').html(hl);
     }
  </script>

CODE（服务器端）：

getDesiredDataInHtmlFormat(){
//generate html integrated with wanted data and store it in a string and return it.  It will be picked up by the success handler.
}

有关google.script.run的更多信息，请查看Terminal Error。

Answer 2

要在构造的侧边栏中直接设置变量，您需要从侧边栏的HTML文件创建HtmlTemplate，将其传递给setAppts函数，在模板对象上设置这些值，然后将“已填充”模板返回到调用函数，以构建到HtmlOutput并显示：

function getApptSidebarOutput() {
  var template = HtmlService.createTemplateFromFile("a filename");
  fillAppts_(template);
  return template.evaluate();
}
function fillAppts_(theTemplate) {
  theTemplate.someVarName = some value;
  theTemplate.otherVar = some other value;
  ...
  return theTemplate;
}

在您的HTML文件中，这些变量可以直接用作someVarName和otherVar。

使用js变量数据填充html侧栏

2 个答案:

不是一个全面的答案：