Jquery ui 气体属性保存和返回分拣订单的服务_Jquery Ui_Google Apps Script_Web Applications

Jquery ui 气体属性保存和返回分拣订单的服务

jquery-ui google-apps-script web-applications

Jquery ui 气体属性保存和返回分拣订单的服务,jquery-ui,google-apps-script,web-applications,Jquery Ui,Google Apps Script,Web Applications,问题如何使用PropertiesService存储index.html中的数组，将数组发送到code.gs，并在index.html中返回数组具体案例在Google Web应用程序中，我有一组可排序列表（使用JQuery UI sortable创建）。我想保存每个li的最新订单/位置。当页面刷新或关闭时，我试图使该顺序/位置“持久化” 示例，您可以更改项目的顺序。如果刷新页面，或关闭页面并返回，则项目将保持其原始顺序我遇到麻烦的地方我能够让数组显示在控制台中，但我不知道如何将其返回到

问题

如何使用

PropertiesService

存储

index.html

中的数组，将数组发送到

code.gs

，并在index.html中返回数组

具体案例

在Google Web应用程序中，我有一组可排序列表（使用JQuery UI sortable创建）。我想保存每个

li

的最新订单/位置。当页面刷新或关闭时，我试图使该顺序/位置“持久化”

示例

，您可以更改项目的顺序。如果刷新页面，或关闭页面并返回，则项目将保持其原始顺序

我遇到麻烦的地方

我能够让数组显示在控制台中，但我不知道如何将其返回到code.gs。我想我现在是，但我不确定。除此之外，我不知道如何“读取”该

PropertiesService

，以便将数组返回到

index.html

。我真的不知道我在做什么，如果有人能让我慢走，我将不胜感激

备选方案

我还研究了直接写入数值来源的电子表格。我也不知道该怎么做。我做了一些尝试，并且能够在电子表格单元格中获得“未定义”值

完整代码（注意：列表项是使用数组形成的，因此不会在此处显示）：

部分代码

代码.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()
};

函数doGet（）{
返回HtmlService.createhtmloutpfromfile（'index'）；
}
函数webAppTest（）{
getTeamArray（）；
}
函数getTeamArray（）{
var ss=SpreadsheetApp.getActive（）；
var sheet=ss.getSheetByName（'TEST'）；
var范围=sheet.getRange（2,1,1000,1）；
var values=range.getValues（）；
var teamsArray=[]；
对于（变量i=0；i


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>


我的名单
第一队


挑选出来的

候补

第二小组


挑选出来的

候补

第三队


挑选出来的

候补

第四队


挑选出来的

候补

$（函数（）{
google.script.run.withSuccessHandler（BuildOptions列表）
.getTeamArray（）；
});
函数构建选项列表（uniqueArray）{
var div=document.getElementById（'myList'）；
对于（变量i=0；i
使用google.script.run运行简单示例：
<script>
function sendStringToServer() {
  var string=$('#text1').val();
  google.script.run
  .withSuccessHandler(function(s){
    alert(s);
  })
  .saveString(string);
}
</script>



也可以只使用浏览器的客户端
localStorage.setItem('id', positions); //Store positions in users browser
localStorage.getItem('id'); //Retrieve the stored positions later

笔记：

要使其工作，部署脚本的iframe=“*.googleusercontent.com”）的url（document.domain
）必须保持不变。在我的简短测试中，即使在父级（script.google.com）的/dev
更改为/exec
时，甚至在版本更新期间，它也是恒定的。但是没有官方的参考资料
如果您有多个用户，此解决方案比properties service更好，因为每个用户都有自己的数据存储在自己的浏览器中，并且在每次更改期间没有服务器调用
有你吗
localStorage.setItem('id', positions); //Store positions in users browser
localStorage.getItem('id'); //Retrieve the stored positions later