商店＆a​​mp;检索可乘法小部件实例的标识符

Question

目的是在任何时候只删除最后一行，并且只删除最后一个删除按钮。

有一个用户界面，它构建为同一行的乘法。行数由＆＃39;添加＆＃39; ＆安培; ＆＃39;删除＆＃39;按钮也是行的元素。问题是隐藏的小部件 - 应用于每一行以通过存储它们的行号来区分实例 - 存储的是与最后一个相同的数字。除了存储正确数字（0）的第一个（0）隐藏小部件。我在哪里错过了这一点？该如何解决？

根据删除按钮有两个不同的目的（这里不详述），我们使用cacheService来区分最后一行和所有其他行。任何时候都只应删除最后一行。

 var cache = CacheService.getPrivateCache();

我们清除缓存并创建第一个实例

function doGet() {
  var app = UiApp.createApplication();
  app.add(app.createVerticalPanel().setId('mainContainer'));
  cache.removeAll([]);
  ui(0);
  cache.put('numberOfInstances',0);
  return app; }

每个实例由一个水平面板保持，该面板包含所提到的隐藏小部件，一个通知实例编号的标签，以及Add＆amp;删除按钮。

function ui(instance) {
  var app = UiApp.getActiveApplication();
  var eventContainer = app.createHorizontalPanel()
      .setId('eventContainer' + instance);
  var instanceContainer = app.createHidden('instanceContainer',instance);
  var showInstance = app.createLabel(instance)
      .setId('showInstance' + instance);
  var addButton = app.createButton('Add')
      .setId('add' + instance)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(instanceContainer));
  var removeButton = app.createButton('X')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(instanceContainer));
  app.getElementById('mainContainer')
    .add(eventContainer
         .add(instanceContainer)
         .add(showInstance)
         .add(addButton)
         .add(removeButton));
  return app; }

和事件处理......

function add(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  ui(instance+1);
  cache.put('numberOfInstances',instance+1);
  return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var instance = Number(inst.parameter.instanceContainer);
  var numberOfInstances = cache.get('numberOfInstances')
  if( (instance != 0) && (instance = numberOfInstances) ) {
    app.getElementById('mainContainer').remove(app.getElementById('eventContainer' + instance));
    cache.put('numberOfInstances',instance-1);
    app.getElementById('add' + (instance-1)).setEnabled(true); } //avoiding multiple click during server response
  return app; }

目的是在任何时候只删除最后一行，并且只删除最后一个删除按钮。

非常感谢。

Answer 1

为什么不像在“添加”按钮上那样简单地使用clientHandler？您可以定位前面的“删除”按钮，并在每次创建新按钮时将其禁用，并在每次删除一行时更改/更新。

编辑：我可以建议你一些东西，随意看看，我改变了一点方法，但它正在工作，我希望你会发现它至少有趣; - ）

Link to the online test

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

  var counter = app.createHidden().setName('counter').setId('counter').setValue('1');

  var mainContainer = app.createVerticalPanel().setId('mainContainer')
  app.add(mainContainer.add(counter));

  var event1Container = app.createHorizontalPanel()
  var showInstance = app.createLabel('1')
  var addButton = app.createButton('Add')
      .setId('add1')
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove1')
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    mainContainer.add(event1Container
                 .add(showInstance)
                 .add(addButton)
                 .add(removeButton));
  return app; }



function add(inst) {
  var app = UiApp.getActiveApplication();
  var hiddenVal =inst.parameter.counter;
  var counterVal = Number(hiddenVal);
  var mainContainer = app.getElementById('mainContainer')
  var counter = app.getElementById('counter')
  ++ counterVal
  counter.setValue(counterVal.toString())
  var eventContainer = app.createHorizontalPanel().setId('eventContainer'+counterVal)
  var showInstance = app.createLabel(counterVal.toString())
  var addButton = app.createButton('Add')
      .setId('add'+counterVal)
      .addClickHandler(app.createClientHandler()
                       .forEventSource().setEnabled(false)) //avoiding multiple click during server response
      .addClickHandler(app.createServerHandler('add')
                       .addCallbackElement(mainContainer));
  var removeButton = app.createButton('X')
      .setId('remove'+counterVal)
      .addClickHandler(app.createServerHandler('remove')
                       .addCallbackElement(mainContainer));
    app.add(eventContainer
       .add(showInstance)
       .add(addButton)
       .add(removeButton));
 if(counterVal>1){app.getElementById('remove'+(counterVal-1)).setEnabled(false)}      
return app; }


function remove(inst) {
  var app = UiApp.getActiveApplication();
  var counterVal = Number(inst.parameter.counter);
  var counter = app.getElementById('counter')
  if(counterVal ==1) {return app}
  var maincontainer =  app.getElementById('mainContainer')
  app.getElementById('eventContainer' + counterVal).setVisible(false)
  --counterVal
  counter.setValue(counterVal.toString())
  app.getElementById('add'+counterVal).setEnabled(true)
  app.getElementById('remove'+counterVal).setEnabled(true)
  return app; 
  }

注意：我没有使用.remove(widget），因为这是一个相当新的方法，我不确切知道它是如何工作的......我稍后会测试它。在此之前，我使用了setVisible(false)，抱歉： - ）

注意2：我没有使用缓存，因为隐藏的小部件足以跟踪发生的事情......如果您需要其他内容，那么您可以随时将其添加回来。