將數據推送到不同的元素，具體取決於使用 GAS 的谷歌電子表格中的列？

Question

我正在使用 GAS 在 Google 電子表格中工作，我正在嘗試將一些數據從電子表格推送到 HTML 頁面，現在正在工作。 但我設法做的是抓取所有值，並且每次遇到新行時，它都會抓取該行中的所有值並將它們推送到新創建的<div> 。 但我想做的是也有一些列功能，以便將不同的列推送到不同的元素，如<input>或<select>元素。

我嘗試了一些事情，我為所需的列聲明了一些變量，並嘗試將它們一一推送到 HTML，但沒有成功。

這是我的數據：

這是它在 HTML 中的樣子：

這就是我要去的地方：

將其發布到表格中會更好嗎？ 因為我只是想用類創建 div 並設置它們的寬度和換行符？

下面是我在開頭描述的代碼：

代碼.gs

 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; }

東西.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>

有什么建議？

編輯

代碼2.gs

 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); }

東西2.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>

Answer 1

考慮使用這種類型的模式返回數據：

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);

然后回到客戶端 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(...);
  }
}

然后如何設置 div 和其中的元素的樣式以像表格一樣對齊更像是一個 CSS 問題。