0

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

有一个用户界面，它建立为同一行的乘法。行数由“添加”和“删除”按钮控制，这些按钮也是行的元素。问题是隐藏的小部件 - 应用于每一行以通过存储它们的行号来区分实例 - 存储的是最后一个相同的数字。除了存储正确数字 (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; }

每个实例都由一个水平面板保存，其中包含提到的隐藏小部件、通知实例编号的标签以及添加和删除按钮。

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; }

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

非常感谢。

4

1 回答 1

1

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

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

链接到在线测试

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：我没有使用缓存，因为隐藏的小部件足以跟踪正在发生的事情......如果您需要它来做其他事情，那么您可以随时将其添加回来。

于 2012-08-20T08:27:36.897 回答