Question

我的Google Apps脚本网络应用我试图制作一个按钮，用户点击并添加其名称。我试图将这些信息保存为网站上的列表，这样如果我刷新页面它仍然在那里，如果有其他人访问该网站，它仍然会在那里。

这是添加按钮 - https://snag.gy/EOgx5T.jpg
这些是从按钮https://snag.gy/8GtX3Y.jpg

添加的示例名称

我不想将其保存为本地存储空间。有没有办法将信息保存到Google电子表格并将该电子表格用作数据库或什么？

这是我到目前为止的代码：

HTML文件

<div id="artistTabs">
   <ul id="artistList">
     <li><a onClick="addArtist(); return false;" href="">+</a></li>
  </ul>
</div>

JS档案

function addArtist()
{
   console.log("add artist here");
   var artistName = prompt("enter artist whole first name and initial of last name");
    if (artistName === "") //user pressed 'ok' but input field was empty
    {
        return;
    }
    else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
    {
         var ul = document.getElementById("artistList");
         var li = document.createElement("li");
         var a = document.createElement("a");
         a.setAttribute("href", "#");
         a.textContent = artistName;
         li.appendChild(a);
         ul.appendChild(li);   
         li.onclick = function()
         {
            test(); return false;
         };
   }
   else //user hits 'cancel' or 'x' 
   {
        return;
   }
}

function test()
{
    console.log("test");
}

我是否需要在Google Apps脚本中添加内容＆＃39; xxx.gs＆＃39;或者＆＃39; xxx.js＆＃39;文件保存信息/访问数据库/什么？

修改

我已经更新了一些代码。我可以将艺术家写入电子表格，我可以从电子表格中取回艺术家姓名。我仍然对如何在列表中以模板化html显示新项目感到困惑。

这些是更新的文件：

-index.html文件：

<div id="artistTabs">
    <ul id="artistList">
        <li><a onClick="addArtist(); return false;" href="">+</a></li>
    </ul>
</div>

-js.html文件：

function addArtist()
{
  var artistName = prompt("enter artist whole first name and initial of last name");

  if (artistName === "") //user pressed 'ok' but input field was empty
  {
    return;
  }
  else if (artistName != "" && artistName !== null) //user inputs something and hits 'ok'
  {
    google.script.run
      .withSuccessHandler(writeSuccess(artistName))
      .withFailureHandler(writeFailure)
      .writeArtistName(artistName);
  }
  else //user hits 'cancel' or 'x'
  {
    return;
  }
}

function writeSuccess(artistName)
{
  console.log("write success: " + artistName);
}

function writeFailure()
{
  console.log("write failure - email myself why it failed and the time it failed");
}

-code.gs文件：

var ss = SpreadsheetApp.openById('id');
var sheet = ss.getSheets()[0];

function doGet()
{
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getContent(filename)
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function writeArtistName(artistName)
{
  var lastRow = sheet.getLastRow() + 1; //gets next unused row
  var column = 1; //first column
  var lastCell = sheet.getRange(lastRow, column);

  lastCell.setValue(artistName); //sets next blank row as artistName
}

function getArtistName()
{
  var lastRow = sheet.getLastRow(); //gets last row with content
  var column = 1;

  var lastArtist = sheet.getRange(lastRow, column).getValue(); //gets last row with artistName

  Logger.log(lastArtist);

  var x = '<li><a onClick="test(); return false;" href="#">';
  var y = lastArtist;
  var z = '</a></li>';

  var xyz = x + y + z;

  Logger.log(xyz);
}

如何调用code.gs文件中的getArtistName()函数，将艺术家名称设置为无序列表中的列表项，并将其作为html模板显示在网站上？我无法在.gs文件中调用document.getElementById，因为它显示ReferenceError: "document" is not defined。

我需要列表留在网站上，即使我重新加载页面，任何人都可以从任何地方访问

Answer 1

您需要在服务器上构建HTML。因此，请将HTML更改为：

<div id="artistTabs">
   <ul id="artistList">
      <?!= createTheList(); ?>
  </ul>
</div>

服务器代码

function createTheList() {
  var artists,howManyRows,howManyColumns,i,L,newList,ss,sh,startingRow,startingColumn,
    thisArtist,templateHTML,thisRow;

  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');

  startingRow = 2;
  startingColumn = 1;
  howManyRows = sh.getLastRow() - 1;
  howManyColumns = 1;

  artists = sh.getRange(startingRow,startingColumn,howManyRows,howManyColumns)
    .getValues();//Get all artist names
  L = artists.length; //How many artist in the list

  artists = artists.toString().split(",");//Flatten 2D array to 1D

  //template of blank row of HTML with a merge string of "z_z_z_z_z"
  templateHTML = "<li><a onClick="addArtist(); return false;" href="">z_z_z_z_z</a></li>";

  newList = "";//Initialize

  for (i=0;i<L;i+=1) {
    thisRow = "";//reset on every loop
    thisArtist = artists[i];

    thisRow = templateHTML.replace("z_z_z_z_z",thisArtist);//Inject artist name
    newList = newList + thisRow;//Keep adding to the list
  };

  return newList;
};

您可以将数据发送到Google电子表格。在您的情况下，收集的值的变量名称为artistName。因此，您可以在.gs文件中调用Apps脚本功能，如下所示：

GS文件：

function writeToSpreadsheet(data) {
  var ss, sh;

  //Save data to a spreadsheet
  ss = SpreadsheetApp.openById('file ID goes here'); //Get spreadsheet
  sh = ss.getSheetByName('sheet tab name');
  sh.appendRow([data]);//Append data to end of sheet tab data
};

客户端代码：

<script>
  function someFunctionName(artistName) {//Either pass data to function
    //Or get the data
    var artistName = code to get the value;

    google.script.run
      .withSuccessHandler(serverCodeCompleted)
     .writeToSpreadsheet(artistName);
  };

  function serverCodeCompleted() {
    //Show message to the user
    some code here
  };
</script>

要获取要在页面中显示的数据，您应该使用模板化HTML。

Apps Script documentation

存储在Google Spreadsheet for Apps Script网站/ webapp中的数据的HTML列表 - 模板化HTML

1 个答案:

服务器代码

GS文件：

客户端代码：