Question

我正在尝试在电子表格上创建一个带有Google-app-script的简单gui，允许用户输入 n 电子邮件，每当用户添加新电子邮件时都会更新电子邮件列表。

这就是gui的样子，给你一个想法：

enter image description here

问题

~~我需要获取TextBox值。 Googlin'我发现我需要在事件处理程序中使用e.parameter.elementName，但它不起作用（返回undefined）~~ 解决了添加addCallbackElement到点击处理程序
我需要刷新scrollPanel的内容，重新加载添加新添加的电子邮件的整个列表。出于某种原因，我能够获得对scrollPanel元素的引用（如果我打印Logger.log(scrollPanel.getId())它会输出正确的ID！），但是我无法清除内容并重新加载列表..

CODE

的ShowDialog（）

//--- in the future, this array will be populated dinamically
var emails = ["test1@gmail.com", "test2@gmail.com","test3@gmail.com", "test4@gmail.com","test5@gmail.com", "test6@gmail.com" ];

//--- called on spreadsheet open
function showDialog(){
    var app = UiApp.createApplication();
    var panel = app.createVerticalPanel().setWidth("100%");

    ... 
    var label = app.createLabel("New email address:");
    var txtBox = app.createTextBox()
                    .setName("myTextBox")
                    .setId("myTextBox");
    ...

    var addBtn = app.createButton("Add")
                    .addClickHandler(app.createServerHandler("addToList")
                                        .addCallbackElement(panel));

    var scrollPanel = app.createScrollPanel()
                         .setId("myScrollPanel");


    var emailList = getEmailList();

    scrollPanel.clear().add(emailList);

    //--- add everything to panel
    panel.add(addBtn);
    ...
    panel.add(scrollPanel);
    ...
    var doc = SpreadsheetApp.getActive();
    doc.show(app);
}

getEmailList（）

function getEmailList(){
    var app = UiApp.getActiveApplication();
    var listGrid = app.createGrid(emails.length, 1)
                      .setId("listGrid"):
    for(var x = 0; x < emails.length; x++){
        var emailTxtBox = app.createTextBox();
        emailTxtBox.setValue(emails[x]);

        listGrid.setWidget(x, 0, emailTxtBox);
    }
    return listGrid;
}

addToList（）

function addToList(e){
    var app = UiApp.getActiveApplication();
    var newEmailVal = e.parameter.myTextBox; //--- this is not working

    emails.push(newEmailVal) //--- add the new value to the array

    var scrollPanel = app.getElementById("myScrollPanel");
    scrollPanel.clear()
               .add(getEmailList());

}

有什么想法吗？谢谢，最好的问候

Answer 1

您无需清除scrollPanel，只需使用新值更新textBox内容。

要实现这一点，只需在name函数中为每个人提供ID和createList。您没有显示用于创建textBoxes列表的代码，但我想您正在使用某种循环，然后使用字符串组合创建ID和名称，该组合将用于检索值并更新内容，如下所示：

  for(var n in emailArray){ // assuming emailArray is an array containing your old email list or whatever
    var textBox = app.createTextBox().setName('email'+n).setId('email'+n).setWidth(200).setText('Old Email = '+emailArray[n]+', enter new email ...');
    }

然后要获取值，您只需使用e.parameter.email0作为第一个，email1作为第二个等或类似的循环：

 var emails = [];
   for(var n in emailArray){
        emails.push(e.parameter.['email'+n]);// store each email in an array
   }

即使列表很长，您的所有代码都会更短，更容易阅读。

如果您需要与特定用例相关的更多具体指示，请显示createList功能代码。

编辑：这是一个完整版本，可以将项目添加到您的列表中（最新版本为了更好的可读性）并为您的全局变量问题提供了一个优雅的解决方案（您还没有提及它但是您的全局数组已被读取 - 现在，由于TAG功能，现在每个功能都可以访问它。

function showDialog(){
  var emails = ["test1@gmail.com", "test2@gmail.com","test3@gmail.com", "test4@gmail.com","test5@gmail.com", "test6@gmail.com" ];
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel().setWidth("100%");
  var label = app.createLabel("New email address:");
  var txtBox = app.createTextBox().setName("myTextBox").setId("myTextBox");
  txtBox.setTag(emails.toString());
  panel.add(txtBox);
  var addBtn = app.createButton("Add")
  .addClickHandler(app.createServerHandler("addToList").addCallbackElement(panel));

  var scrollPanel = app.createScrollPanel().setId("myScrollPanel");
  var listGrid = app.createFlexTable().setId("listGrid");
  for(var x = 0; x < emails.length; x++){
    var emailTxtBox = app.createTextBox().setValue(emails[x]).setId('mail'+x).setName('email'+x);
    listGrid.setWidget(x, 0, emailTxtBox);
  }
  scrollPanel.add(listGrid);
  panel.add(addBtn);
  panel.add(scrollPanel);
  app.add(panel);
  var doc = SpreadsheetApp.getActive();
  doc.show(app);
}


function addToList(e){
  var emails = e.parameter.myTextBox_tag.split(',');
  var app = UiApp.getActiveApplication();
  var listGrid = app.getElementById('listGrid');
  var newEmailVal = e.parameter.myTextBox; 
  emails.unshift(newEmailVal); 
  Logger.log(emails);
  Logger.log(emails.length);
  for(var x = 0; x < emails.length; x++){
    var emailTxtBox = app.createTextBox().setValue(emails[x]).setId('mail'+x).setName('email'+x);
    listGrid.setWidget(x, 0, emailTxtBox);
  }
  app.getElementById('myTextBox').setTag(emails.toString()).setText('next ? come on, just do it !');
  return app;
}

刷新事件处理程序中的面板内容

1 个答案: