刷新图像阵列 - Google脚本

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