Question

我想知道如何使用“添加产品”按钮在上一个现有面板（“productOtherPanel”）下面添加一个重复的面板。我希望将新面板插入现有“productOtherPanel”下方和“Add Product”按钮上方。我还希望这个新面板包含与原始“productOtherPanel”相同的下拉列表和文本框。我需要这个面板复制无数次。这可能吗？

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

  var productOtherPanel = app.createHorizontalPanel().setId('productOtherPanel');
  var productPanel = app.createVerticalPanel().setId('productPanel');
  var productList = app.createListBox().setName("productList").setId('productList');
  productList.addItem("8:1 Compressed Blocks");
  productList.addItem("8:1 Compressed Briquettes");

  var pricePerTonPanel = app.createVerticalPanel().setId('pricePerTonPanel');
  var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox")
  .setText("$0.00");

  var buttonPanel = app.createVerticalPanel().setId('buttonPanel');
  var button = app.createButton("Add Product");

  app.add(productOtherPanel);
  productOtherPanel.add(productPanel);
  productPanel.add(productList);

  productOtherPanel.add(pricePerTonPanel);
  pricePerTonPanel.add(pricePerTonTextBox);

  app.add(buttonPanel);
  buttonPanel.add(button);

  return app;
}

Answer 1

尝试查看此代码是否符合您的要求：

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

  var productOtherPanel = app.createVerticalPanel().setId('productOtherPanel');
  var productPanel = app.createHorizontalPanel().setId('productPanel');

  // Product list dropdown
  var productList = app.createListBox().setName("productList").setId('productList');
  productList.addItem("8:1 Compressed Blocks");
  productList.addItem("8:1 Compressed Briquettes");

  // Product Price Textbox
  var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox").setText("$0.00");

  productPanel.add(productList);
  productPanel.add(pricePerTonTextBox);

  var buttonPanel = app.createVerticalPanel().setId('buttonPanel');
  var button = app.createButton("Add Product");
  button.addClickHandler(app.createServerHandler("addProductHandler").addCallbackElement(productOtherPanel));

  app.add(productOtherPanel);
  productOtherPanel.add(productPanel);

  app.add(buttonPanel);
  buttonPanel.add(button);

  return app;
}

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

    var productPanel = app.createHorizontalPanel().setId('productPanel');

    // Product list dropdown
    var productList = app.createListBox().setName("productList").setId('productList');
    productList.addItem("8:1 Compressed Blocks");
    productList.addItem("8:1 Compressed Briquettes");

    // Product Price Textbox
    var pricePerTonTextBox = app.createTextBox().setId("pricePerTonTextBox").setName("pricePerTonTextBox").setText("$0.00");

    productPanel.add(productList);
    productPanel.add(pricePerTonTextBox);

    var panel = app.getElementById("productOtherPanel");
    panel.add(productPanel);

    return app;
 }

如何在Google Apps脚本中添加重复的面板？

1 个答案: