Question

我希望能够通过单击按钮清除整个图像阵列，然后使用更新的值重新加载数组。我无法通过清除vertPanel来实现这一点。这可以通过某种方式重置所有数据吗？任何帮助将不胜感激。

var maxImgs = 6;      // Number of images in grid
var colUrl = 0;       // Column containing URL
var colName = 2;      // Column containing Name
var colAttr = 1;      // Column containing Attributes

function doGet(e) {
var app = UiApp.createApplication().setTitle('Not Here');
var abspanel = app.createAbsolutePanel().setStyleAttribute('padding','25px');
var grid = app.createGrid(8, 8);

var titleLabel = app.createLabel('Not Here');
titleLabel.setStyleAttribute('margin-left','85px');
titleLabel.setStyleAttribute("font-size", "135%");
titleLabel.setStyleAttribute("font-weight", "bold");
var insertlabel = app.createLabel('Which Schedule? (Insert Document Key)');
var inserttxtbox = app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
var loadbtn = app.createButton('Load Pictures').setId('loadbtn');
var resetbtn = app.createButton('Refresh').setId('rbtn').setVisible(false);
var daylabel = app.createLabel('Select Day');
var mon = "P - Mon"
var tues = "P - Tues"
var wed = "P - Wed"
var thurs = "P - Thurs"
var fri = "P - Fri"
var dayListBox = app.createListBox().setWidth('140px').setId('day').setName('sday')
dayListBox.addItem(mon);
dayListBox.addItem(tues);
dayListBox.addItem(wed);
dayListBox.addItem(thurs);
dayListBox.addItem(fri);

// Borrowed from https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-    code-snippets/progress-indicators
var spinner = app.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif')
                            .setVisible(false)
                            .setId('spinner');
// Client handler for loadbtn will start spinner when button clicked
// Server handler will stop spinner when done loading pictures
var loadSpinner = app.createClientHandler()
              .forTargets(spinner)
              .setVisible(true);
loadbtn.addClickHandler(loadSpinner);  

var loadhandler = app.createServerHandler('loadPics');
loadhandler.addCallbackElement(abspanel);
loadbtn.addClickHandler(loadhandler);

grid
.setWidget(1, 0, insertlabel)
.setWidget(1, 1, inserttxtbox)
.setWidget(2, 0, daylabel)
.setWidget(2, 1, dayListBox)
.setWidget(3, 1, loadbtn)
.setWidget(3, 2, resetbtn)
.setWidget(2, 2, spinner)
.setCellSpacing(5);

for (var img = 0, row = 5; img < maxImgs; img++) {
var image = app.createImage().setPixelSize(350, 350).setId('image' + img);
var imageName = app.createLabel('name').setId('name'+img);
var imageAttr = app.createLabel('attr').setId('attr'+img);
   var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image).setStyleAttributes({'padding':'15px','borderStyle':'solid','border-radius':'15px','background':'silver'}).setVisible(false).setId('vertPanel'+img);
 grid.setWidget(row + Math.floor(img / 4), 1 + (img % 4), vertPan)
 }
 abspanel.add(titleLabel);
 abspanel.add(grid);
 app.add(abspanel);

 return app;
 }


 function loadPics(e) {
 var app = UiApp.getActiveApplication();
 var ss = SpreadsheetApp.openById(e.parameter.ttbox);
 var list = ss.getSheetByName(e.parameter.sday);
 var data = list.getRange("A121:C230").getValues().splice(1); // Get whole spreadsheet, without  headers

 for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
 var rowData = data[row];
 if (rowData[0] != '') {
  var image = app.getElementById('image' + img);
  var imageName = app.getElementById('name'+img);
  var imageAttr = app.getElementById('attr'+img);
  var vertPan = app.getElementById('vertPanel'+img).setVisible(true);
  image.setUrl(rowData[colUrl])
       .setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName]);
  imageName.setText(rowData[colName]).setStyleAttribute("font-size", "150%");
  imageAttr.setText(rowData[colAttr]);
  img++;
  }
 }

 // Done loading, hide spinner
 app.getElementById('spinner').setVisible(false);
 return app;
 }

Answer 1

更好地定义另一个网格并将其添加到abspanel，在处理函数中，按ID调用图像网格，然后使用方法clear();清除网格。然后重新构建新图像。

我希望你能得到我想说的话。

在doGet()函数中使用

var imgGrid = app.createGrid(1,1).setId('imgGrid');
abspanel.add(imgGrid);

在你的处理函数中使用

var imgGrid = app.getElementById('imgGrid').clear();
imgGrid.resize(row, column);
//Now manipulate this grid to show new images

刷新图像阵列 - Google脚本

1 个答案: