【问题标题】:GAS PropertiesService to Save and Return Sort OrderGAS PropertiesService 保存和返回排序顺序
【发布时间】:2019-07-14 22:06:00
【问题描述】:

问题

如何使用PropertiesService 存储来自index.html 的数组,将数组发送到code.gs,并在index.html 中返回数组?

具体案例

在 Google Web App 中,我有一组可排序列表(使用 JQuery UI Sortable 制作)。我想保存每个li 的最新订单/仓位。当页面刷新或关闭时,我试图让该订单/头寸“保持”。

示例

If you see the default Sortable,您可以更改项目的顺序。如果您刷新页面,或关闭页面并返回,则项目将按其原始顺序排列。

我遇到问题的地方

我能够让数组显示在控制台中,但我不知道如何将它返回到 code.gs。我想我现在是,但我不确定。除此之外,我不知道如何“读取”PropertiesService,以便将数组返回到index.html。我不太确定我在做什么,如果有人能慢点走我,我将不胜感激!

替代方案

我还研究了直接写入值所在的电子表格。我也不确定该怎么做。我做了一些尝试,并且能够将“未定义”作为电子表格单元格中的值。

完整代码(注意:列表项是使用数组形成的,因此不会在此处显示):https://jsfiddle.net/nateomardavis/Lmcjzho2/1/

部分代码

代码.gs

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

function webAppTest() {
  getTeamArray();
}

function getTeamArray() {

  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName('TEST');
  var range = sheet.getRange(2, 1, 1000, 1);
  var values = range.getValues();

  var teamsArray = [];

  for (var i = 0; i < values.length; ++i) {
    teamsArray.push(values[i][0]);
  }

  var uniqueArray = [];

  uniqueArray.push(teamsArray[0]);

  for (var i in teamsArray) {
    if ((uniqueArray[uniqueArray.length - 1] != teamsArray[i]) && (teamsArray[i] !== "")) {
      uniqueArray.push(teamsArray[i]);
    }
  }
  return uniqueArray;
}

function savePositions(myProperty, positions) {
  PropertiesService.getScriptProperties().setProperty("myProperty", JSON.stringify(positions));
};

function getPositions() {
  var returnedObj = PropertiesService.getScriptProperties()
};

index.html

  <body>



    <div id="myList" class="connectedSortable">MY LIST</div>

    <table id=table1>
      <div id="team1">
        <p>TEAM 1</p>
        <br>
        <div id="group" v>SELECTED</div>
        <ul id="team1s" name='team1s' class="connectedSortable"></ul>
        <div id="group">ALTERNATE</div>
        <ul id="team1a" name='team1a' class="connectedSortable"></ul>
      </div>
    </table>

    <table id=table2>
      <div id="team2">
        <p>TEAM 2</p>
        <br>
        <div id="group" v>SELECTED</div>
        <ul id="team2s" name='team2s' class="connectedSortable"></ul>
        <div id="group">ALTERNATE</div>
        <ul id="team2a" name='team2a' class="connectedSortable"></ul>
      </div>
    </table>

    <table id=table3>
      <div id="team3">
        <p>TEAM 3</p>
        <br>
        <div id="group" v>SELECTED</div>
        <ul id="team3s" name='team3s' class="connectedSortable"></ul>
        <div id="group">ALTERNATE</div>
        <ul id="team3a" name='team3a' class="connectedSortable"></ul>
      </div>
    </table>

    <table id=table4>
      <div id="team4">
        <p>TEAM 4</p>
        <br>
        <div id="group" v>SELECTED</div>
        <ul id="team4s" name='team4s' class="connectedSortable"></ul>
        <div id="group">ALTERNATE</div>
        <ul id="team4a" name='team4a' class="connectedSortable"></ul>
      </div>
    </table>

    <script>
      $(function() {
        google.script.run.withSuccessHandler(buildOptionsList)
          .getTeamArray();
      });


      function buildOptionsList(uniqueArray) {
        var div = document.getElementById('myList');
        for (var i = 0; i < uniqueArray.length; i++) {
          var ul = document.createElement('ul');
          var li = document.createElement('li');
          var cLass = li.setAttribute('class', 'ui-state-default');
          var iD = li.setAttribute('id', uniqueArray[i]);


          li.appendChild(document.createTextNode(uniqueArray[i]));
          div.appendChild(ul);
          div.appendChild(li);
        }
      }

      $(function() {
        $("#myList, #team1s, #team1a, #team2s, #team2a, #team2s, #team3s, #team3a, #team4s, #team4a").sortable({
          connectWith: ".connectedSortable",
          update: function(event, ui) {
            var changedList = this.id;
            var order = $(this).sortable('toArray');
            var positions = order.join(';');

            console.log({
              id: changedList,
              positions: positions

            });

            //Instead of using JSON to save, can I use the spreadsheet itself to save the positions and then pull it from there as I did with "buildOptionsList" above?

            function saveList() {
              google.script.run.savePositions("myProperty", JSON.stringify(positions));

              JSON.parse("myProperty");
            }
          }
        })
      });


      $(function getPositions(event, ui) {
        var changedList = this.id;
        var order = $(this).sortable('toArray');
        var positions = order.join(';');

        console.log({
          id: changedList,
          positions: positions
        });

      });

    </script>
  </body>

</html>

【问题讨论】:

标签: jquery-ui google-apps-script web-applications


【解决方案1】:

也可以只使用浏览器的localStorage客户端。

localStorage.setItem('id', positions); //Store positions in users browser
localStorage.getItem('id'); //Retrieve the stored positions later

注意事项:

  • 为此,部署脚本的 url(document.domain of the iframe="*.googleusercontent.com") 必须保持不变。在我的简短测试中,即使从父级(script.google.com)的/dev 更改为/exec,甚至在版本更新期间,它也是不变的。但没有官方参考。

  • 此解决方案比属性服务更好,如果您有多个用户,因为每个用户都将自己的数据存储在自己的浏览器中,并且每次更改期间都没有服务器调用。

【讨论】:

  • 我试了一下,但它似乎没有按预期工作。你介意看看这个吗? jsfiddle.net/31fh62sq/1
  • @N.O.Davis 你能解释一下什么不起作用吗?我相信google 将是未定义的,因此小提琴不会解决问题或提供任何帮助。要检索位置,var retrievedPositions=localStorage.getItem('id') 应该从浏览器中检索它。
  • 我知道小提琴不会有所有的谷歌连接,但我只是指实际的代码。当我刷新页面时,一切都恢复到原来的状态。
  • @N.O 那是因为你没有对检索到的位置做任何事情。 onload> 检查 localStorage 的位置>如果存在,相应地对元素进行排序,否则加载默认视图。
  • 好主意。我不知道。谢谢
【解决方案2】:

使用 google.script.run 简单示例:

<script>
function sendStringToServer() {
  var string=$('#text1').val();
  google.script.run
  .withSuccessHandler(function(s){
    alert(s);
  })
  .saveString(string);
}
</script>

谷歌脚本:

function myFunction() {
  PropertiesService.getScriptProperties().setProperty('MyString', string);
  return "String was saved in Service";
}

【讨论】:

  • 好的,我可以编辑它,所以它看起来像这样:jsfiddle.net/nateomardavis/2fedgtxv/7 如何将该列表返回到 index.html?我需要在同一个 GS 函数中 getProperty("MyString"),还是在 index.htmlcode.gs 中创建一组全新的函数?
  • 您的 HTML 文件必须通过使用 google.script.run 和成功处理程序来请求它,并且服务器上的 Google 脚本必须返回它
猜你喜欢
  • 2016-05-13
  • 2020-04-28
  • 2013-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多