0

我正在尝试制作一个 UI，允许用户为电子表格中的每个议程项目选择一个操作。用户选择一个操作后，我想用选择更新电子表格。由于电子表格中的数据不是静态的，因此 UI 是动态编写的。

这就是我创建列表框的方式：

// add labels and a drop down box of actions for each agenda item mark for today
for (i = 0; i < labels.length; i++) {
// labels is an array of objects
var topic = labels[i]['topic'];

// add label to grid
myGrid.setWidget(i, 0, myApp.createLabel(topic));

// the id of each listbox is the content of its corresponding label
var id = ObjApp.camelString(topic)
var lboxActions = myApp.createListBox().setId(id);

//add items to listbox
lboxActions.addItem('Select');
lboxActions.addItem('Add to agenda');
lboxActions.addItem('Move to another meeting');
lboxActions.addItem('Move to a special meetin');
lboxActions.addItem('Move to email');

//add drop down list to grid
myGrid.setWidget(i, 1, lboxActions);

}

我有3个问题：

1）哪个设计更好？

a)设计 1：每个列表框旁边都有一个保存按钮。

b)设计2：底部有一个提交按钮，用于保存每个条目

2) 我将如何收集有关用户选择的信息？我将如何编写这样的处理程序？我为每个设计添加了以下代码，但我认为我做得不对。

a)设计 1：将以下代码行添加到上述 for 循环中

var buttonSave = myApp.createButton('Save');
myGrid.setWidget(i, 2, buttonSave);

var handlerSelection = myApp.createServerHandler('selectAction');
handlerSelection.addCallbackElement(mainPanel);
buttonSave.addClickHandler(handlerSelection);

b)设计 2：在 for 循环之外添加了以下代码行

//update spreadsheet when user click "submit"
var handlerUpdate = myApp.createServerHandler('responseToSubmit');
handlerUpdate.addCallbackElement(mainPanel);
buttonSubmit.addClickHandler(handlerUpdate);

mainPanel.add(myGrid);
mainPanel.add(buttonSubmit);
myApp.add(mainPanel);

3) 如何为处理程序编写函数？这些不正确，因为我无法从列表框中提取信息。

a)设计 1

function responseToSave(e) {

   var name = e.parameter.source;
   var selection = e.parameter.name;

   var selectionObj = new Object();

   selectionObj['status'] = selection;
   selectionObj['name'] = name;

   choicesMade.push(selectionObj)

   Logger.log(choicesMade);
   return choicesMade;
}

b)设计 2

function responseToSubmit(e) {
  var myApp = UiApp.getActiveApplication();

  for (i=0; i < labels.length; i++) {
     var lboxId = ObjApp.camelString(labels[i]['topic']);

     //[EDIT] e.parameter.lboxId would not work because lboxId is a string 
     var selection = e.parameter[lboxId];

     choicesMade[labels[i]] = selection;
     }

  Logger.log(choicesMade);
  return choicesMade;
}

谢谢

4

1 回答 1

0

Q1：设计完全取决于您的应用程序打算做什么以及您的用户如何使用它。没有“更好”的设计——它们每个都有自己的优点和缺点，选择将基于你的应用程序的使用方式。但是，也要考虑设计 3，它会在下拉框更改时保存更改。用户将少一键点击

Q2 和 Q3：您应该在 listBox 上使用 setName

var lboxActions = myApp.createListBox().setId(id).setName(id);

我通常对 id 和 name 使用相同的字符串以避免混淆，但是您应该使用 setName 之后您可以访问在处理程序函数中选择的项目

e.parameter.id

最后，在 buttonSave 上，您应该使用 addClickHandler 而不是 addChangeHandler。

于 2012-07-20T08:24:04.510 回答