刷新圖像陣列 - 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