[英]Push data to different elements, depending on column in google spreadsheet with GAS?
I am working in Google Spreadsheet with GAS, and I am trying to push some data from a spreadsheet to an HTML page, and right now that is working.我正在使用 GAS 在 Google 电子表格中工作,我正在尝试将一些数据从电子表格推送到 HTML 页面,现在正在工作。 But I am managing to do is grabbing all the values, and each time it hits a new row, it grabs all the values in that row pushes them into a newly created
<div>
.但我设法做的是抓取所有值,并且每次遇到新行时,它都会抓取该行中的所有值并将它们推送到新创建的
<div>
。 But I would like to do is have some column functionality also so that the different columns gets pushed to a different element like an <input>
or a <select>
element.但我想做的是也有一些列功能,以便将不同的列推送到不同的元素,如
<input>
或<select>
元素。
I tried out some things where I declared some variables for the desired columns, and trying to pushing them to the HTML one by one, but it didn't work out.我尝试了一些事情,我为所需的列声明了一些变量,并尝试将它们一一推送到 HTML,但没有成功。
Here is my data:这是我的数据:
This is what it looks like in the HTML:这是它在 HTML 中的样子:
This is what I am going for:这就是我要去的地方:
Would it be better to publish this into tables?将其发布到表格中会更好吗? Because I simply thought of creating divs with classes and set their width and line breaks?
因为我只是想用类创建 div 并设置它们的宽度和换行符?
Below is the code I described in the beginning:下面是我在开头描述的代码:
var ss = SpreadsheetApp.openById("1c7IwmyBrbNq5xwzo-7EyFewCx31WpfP4EzLpkHawffI"); function doGet(request) { return HtmlService.createTemplateFromFile('stuff') .evaluate() .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); } function getStitchOrders(){ var ordersName = []; var sheet = ss.getSheetByName("Cat1"); var subRange = sheet.getRange(2, 1, sheet.getLastRow(), sheet.getLastColumn()); var orders = subRange.getValues(); for (var i = 0; i < orders.length; i++) { ordersName.push( orders[i] ) } return ordersName; }
stuff.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="orders">
</div>
<script>
$(function() {
google.script.run.withSuccessHandler(buildOrderList).getStitchOrders();
});
function buildOrderList(ordersName) {
var arr = JSON.Parse(ordersName);
var rows = $('#orders');
for (var i = 0; i < arr.length; i++) {
rows.append('<div name="' + arr[i].name + '">' + arr[i].name + '</div>');
}
}
</script>
Any suggestions?有什么建议?
Edit编辑
var ss = SpreadsheetApp.openById("1c7IwmyBrbNq5xwzo-7EyFewCx31WpfP4EzLpkHawffI"); function doGet(request) { return HtmlService.createTemplateFromFile('stuff2') .evaluate() .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); } function getStitchOrders(){ var ordersName = []; var sheet = ss.getSheetByName("Sheet"); var subRange = sheet.getRange(2, 1, sheet.getLastRow(), sheet.getLastColumn()); var orders = subRange.getValues(); for (var i = 0; i < orders.length; i++) { ordersName.push( { name: orders[i][0], status: orders[i][1], comment: orders[i][2] } ); } return JSON.stringify(ordersName); }
stuff2.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="orders"> </div> <script> $(function() { google.script.run.withSuccessHandler(buildOrderList).getStitchOrders(); }); function buildOrderList(ordersName) { var arr = JSON.Parse(ordersName); var rows = $('#orders'); for (var i = 0; i < arr.length; i++) { rows.append('<div name="' + arr[i].name + '">' + arr[i].name + '</div>'); } } </script>
consider returning the data with this type of pattern:考虑使用这种类型的模式返回数据:
for (var i = 0; i < orders.length; i++) {
ordersName.push( {
name: orders[i][0],
status: orders[i][1],
comment: orders[i][2]
} );
}
return JSON.stringify(ordersName);
then back in the client-side JS we can turn it back into an Array to loop through:然后回到客户端 JS 中,我们可以将其重新转换为 Array 以进行循环:
function buildOrderList(ordersName) {
var arr = JSON.parse(ordersName);
var rows = $('#orders');
for (var i = 0; i < arr.length; i++) {
// values can now be referenced via...
// arr[i].name
// arr[i].status;
// arr[i].comment;
rows.append(...);
}
}
how to then style the divs and the elements inside them to align up like a table is more a CSS question.然后如何设置 div 和其中的元素的样式以像表格一样对齐更像是一个 CSS 问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.