0

目的は、いつでも最後の行だけを、最後の削除ボタンだけで削除することです。

同じ行の乗算として構築されるユーザーインターフェイスがあります。行数は、行の要素でもある「追加」および「削除」ボタンによって制御されます。問題は、行番号を格納することによってインスタンスを区別するために各行に適用される非表示のウィジェットが、最後の番号とまったく同じ番号を格納していることです。適切な番号（0）を格納する最初の（0）非表示ウィジェットを除きます。どこにポイントがありませんか？これはどのように解決する必要がありますか？

削除ボタンには2つの異なる目的があるため（ここでは詳しく説明しません）、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を使用してみませんか？前の「削除」ボタンをターゲットにして、新しいボタンを作成するたびに無効にし、1つの行を削除するたびに変更/更新することができます。

編集：私はあなたに何かを提案することができます、見てみてください、私はアプローチを少し変更しましたが、それは機能しています、そしてあなたがそれを少なくとも面白いと思うことを願っています;-)

オンラインテストへのリンク

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 に答える