文章/答案/技术大牛

发布

社区首页 >问答首页 >用js变量数据填充html侧栏

问用js变量数据填充html侧栏
EN

Stack Overflow用户

提问于 2018-05-05 20:37:06

回答 2查看 772关注 0票数 0

我是一个快速学习的初学者与谷歌页脚本。到目前为止，在我做的应用程序中，我制作的侧边栏包含了按钮和文本，但是没有从变量中传递任何东西。我将注意到，我对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>

google-apps-script

google-sheets

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-06 12:29:50

要在构建的侧栏中直接设置变量，您需要从侧栏的HtmlTemplate文件中创建一个setAppts，将其传递给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使用。

建议阅读：

请注意，根据这些数据是什么以及使用这些数据的人，使用完全异步设计可能会更好，在这种设计中，侧栏是在没有这些数据的情况下构建的，并且定期查询最新的信息(比如在提交约会请求之前，或者以其他方式每5-10分钟)。其想法是，计划的有效性改变，但侧边栏可以保持开放。

票数 1

Stack Overflow用户

发布于 2018-05-05 22:07:40

并不意味着是一个全面的答案：

您可以更改以下内容：

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

To类似于的东西

HTML(客户端)：

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

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

代码(ServerSide)：

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的更多信息，请参见这里。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50193815

复制

相似问题

问用js变量数据填充html侧栏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用js变量数据填充html侧栏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用js变量数据填充html侧栏
EN