Question

我有以下代码，我尝试使用addItem（text，value）方法填充列表框以存储文本和索引，并且我想在单击列表框时检索两者。默认情况下，e.parameter.listObject返回文本。无论如何还要检索值？

代码如下：

function doGet() {
  var app = UiApp.createApplication().setTitle('New app');

  var listHandler = app.createServerKeyHandler('listSelect');
  var lb = app.createListBox(true).setId('lbColour').setName('lbColour').setVisibleItemCount(10).addClickHandler(listHandler);  

  lb.addItem("RED","100");
  lb.addItem("GREEN","010");
  lb.addItem("BLUE","001");

  // Create a vertical panel and add the grid to the panel
  var panel = app.createVerticalPanel();
  panel.setId('mainPanel');
  panel.add(lb);  
  panel.add(app.createLabel('Colour Code:'));
  panel.add(app.createTextBox().setName('colourCode').setId('colourCode'));
  panel.add(app.createLabel('Colour Name:'));
  panel.add(app.createTextBox().setName('colourName').setId('colourName'));
  app.add(panel);
  return app;
}

function listSelect(e){
  var app = UiApp.getActiveApplication();
  app.getElementById('colourName').setText(e.parameter.lbColour);
  app.getElementById('colourCode').setText(e.parameter['lbColour_Value']);
  return(app);
}

由于以下答案，这将是上述答案的更正代码。

请注意，如上所述，我们可以使用有效的分隔符将密钥存储在text属性中，我在这里使用“|”通常不会在字符串中找到“，”。

另请注意，原始代码问题的主要原因是lisbox无法创建为多选，即：

我们将使用“createListBox（）”而不是“createListBox（true）”
应使用“createServerHandler”而不是“creteServerKeyHandler”创建服务器处理程序。

最终代码应如下所示：

function doGet() {
  var app = UiApp.createApplication().setTitle('New app');

  var listHandler = app.createServerHandler('listSelect');
  var lb = app.createListBox().setId('lbColour').setName('lbColour').setVisibleItemCount(10).addClickHandler(listHandler);  

  lb.addItem("RED","RED|100");
  lb.addItem("GREEN","GREEN|010");
  lb.addItem("BLUE","BLUE|001");

  // Create a vertical panel and add the grid to the panel
  var panel = app.createVerticalPanel();
  panel.setId('mainPanel');
  panel.add(lb);  
  panel.add(app.createLabel('Colour Code:'));
  panel.add(app.createTextBox().setName('colourCode').setId('colourCode'));
  panel.add(app.createLabel('Colour Name:'));
  panel.add(app.createTextBox().setName('colourName').setId('colourName'));
  app.add(panel);
  return app;
}

function listSelect(e){
  var app = UiApp.getActiveApplication();
  var outpArr = e.parameter.lbColour.split('|');  
  app.getElementById('colourName').setText(outpArr[0]);
  app.getElementById('colourCode').setText(outpArr[1]);
  return(app);
}

Answer 1

您无法检索列表框项目的文本。你能做的就是这个，

重新格式化您的列表项：

lb.addItem("BLUE","001,BLUE");

然后

e.parameter.lbColour.split(',')[0]

将返回001 和

e.parameter.lbColour.split(',')[1]

将返回BLUE

祝你好运

function doGet() {
  var app = UiApp.createApplication();
  var vp = app.createVerticalPanel().setId("vp");
  var lb = app.createListBox().setName("lb");
  lb.addItem("BLUE", "BLUE,001");
  vp.add(lb);

  var handler = app.createServerHandler('postFunc').addCallbackElement(vp);
  var button = app.createButton("Send").addClickHandler(handler);
  vp.add(button);

  app.add(vp);
  return app;
}

function postFunc(e){
  var app = UiApp.getActiveApplication();

  var vp = app.getElementById("vp");
  var outpArr = e.parameter.lb.split(',');
  var color = app.createLabel("color text: " + outpArr[0]);
  var number = app.createLabel("color number: " + outpArr[1]);

  vp.add(color);
  vp.add(number);

  return app;
}

Answer 2

编辑2：托马斯的回答毕竟没有错......原始问题中使用的处理程序是问题的原因，多选择启用也会遇到问题 - 请参阅最后评论（issue 941 ）。

所以我删除了我的第一个答案（为了缩短它）并在这里建议一个可能的解决方法，在listBox上使用多个选择（测试和工作）

function doGet() {
  var app = UiApp.createApplication().setTitle('New app');

  var listHandler = app.createServerHandler('listSelect');
  var lb = app.createListBox(true).setWidth('200').setId('lbColour').setName('lbColour').setVisibleItemCount(5).addChangeHandler(listHandler);  
 var colorIndex = [];// this is the array that will hold item values values with 2 fields
  lb.addItem("RED");colorIndex.push("RED-100");// use a '-' separator to be able to split later First field-second field
  lb.addItem("GREEN");colorIndex.push("GREEN-010");
  lb.addItem("BLUE");colorIndex.push("BLUE-001");

  lb.setTag(colorIndex.toString());// store the array in the TAG
  var panel = app.createVerticalPanel();
  panel.setId('mainPanel');
  panel.add(lb);  
  panel.add(app.createLabel('Colour Code:'));
  panel.add(app.createTextBox().setWidth('500').setName('colourCode').setId('colourCode'));
  panel.add(app.createLabel('Colour Name:'));
  panel.add(app.createTextBox().setWidth('500').setName('colourName').setId('colourName'));
  app.add(panel);
  return app;
}

function listSelect(e){
  var app = UiApp.getActiveApplication();
  var codepos = [];//will get the index position of items in colorIndex
  var code = [];//array of first items found in colorIndex
  var color = [];// index of second items found in colorIndex
  var colorIndex = e.parameter.lbColour_tag.split(',');// recover the array
  for(n=0;n<colorIndex.length;++n){if(e.parameter.lbColour.match(colorIndex[n].split('-')[0]) == colorIndex[n].split('-')[0]){codepos.push(n)}};// get the position in the array
  for(n=0;n<codepos.length;++n){
  code[n] = colorIndex[codepos[n]].split('-')[1];// finally get the color code value
  color[n] = colorIndex[codepos[n]].split('-')[0];// get the color value
}  
  app.getElementById('colourName').setText(color.toString());// show the result second field
  app.getElementById('colourCode').setText(code.toString()); // show the result first field
  return(app);
}

在服务器处理程序中获取列表框文本和值

2 个答案: