如何在javascript電子表格中選擇所有複選框？

Question

描述很簡單：我有三個複選框，第三個複選框在選中時必須選擇所有其他複選框（並且一旦未選中，也取消選擇它們）。所有這一切都必須在網格中，我不能使用HTML或任何其他語言，但Google Apps腳本。

這對你來說可能是一個簡單的任務，但我掙扎了很多，都用JavaScript和英語。無論如何，這裏是代碼：

function checkboxes() { 
    var range = SpreadsheetApp.getActiveSpreadsheet(); 
    var sheet = range.getSheetId(); 
    var myapp = UiApp.createApplication().setTitle('Title').setWidth(1000).setHeight(100); 
    var mygrid = myapp.createGrid(3, 3).setCellPadding(5).setCellSpacing(5); 

    //One 
    mygrid.setWidget(0, 0, myapp.createLabel('One').setId('One')); 
    mygrid.setWidget(0, 1, myapp.createCheckBox().setName('One')); 

    //Two 
    mygrid.setWidget(1, 0, myapp.createLabel('Two').setId('Two')); 
    mygrid.setWidget(1, 1, myapp.createCheckBox().setName('Two')); 

    var handler1 = myapp.createClientHandler().forTargets(myapp.getElementById('One')).setValue(true).forTargets(myapp.getElementById('Two')).setValue(true); 

    //Last 
    mygrid.setWidget(2, 0, myapp.createLabel('Last').setId('Last')); 
    mygrid.setWidget(2, 1, myapp.createCheckBox().setName('Last').OnClickHandler(handler1)); 
    //... 
} 

Answer 1

我上次嘗試它是不可能與複選框使用ClientHandlers驗證。所以你必須堅持使用較慢的serverhandlers，所以你可能需要添加一個無限的進度gif，以便用戶知道正在完成的事情。

這是我使用該解決方案的一個例子：

function mygui() { 
    var imgUrl = 'https://f0839004-a-62cb3a1a-s-sites.googlegroups.com/site/hgabreu/files/ajax-loader.gif'; 
    //I may remove this image from this url at any time. Host yours in a place you control 

    var app = UiApp.createApplication().setTitle('CheckAll example'); 
    var panel = app.createVerticalPanel(); 

    var boxes = ['Example 1', 'Test', 'Last check']; 
    var groupName = 'myCheckBoxes'; 

    var groupAll = groupName+','+boxes.length; 
    var image = app.createImage(imgUrl).setId(groupName+',img').setVisible(false); 
    var checkAll = app.createCheckBox("Check All").setId(groupAll).setName(groupAll).addValueChangeHandler(
    app.createServerHandler('checkAll_').addCallbackElement(panel)).addValueChangeHandler(
     app.createClientHandler().forEventSource().setVisible(false).forTargets(image).setVisible(true)); 

    panel.add(checkAll).add(image); 
    for(var i in boxes) 
    panel.add(app.createCheckBox(boxes[i]).setId(groupName+','+i)); 

    SpreadsheetApp.getActive().show(app.add(panel)); 
} 

function checkAll_(e) { 
    var app = UiApp.getActiveApplication(); 
    var p = e.parameter; //just shortening 
    var checkState = p[p.source] == 'true'; 
    var parts = p.source.split(','); 
    var groupName = parts[0]; 
    var size = +parts[1]; 
    for(var i = 0; i < size; ++i) 
    app.getElementById(groupName+','+i).setValue(checkState); 
    app.getElementById(groupName+',img').setVisible(false); 
    app.getElementById(p.source).setVisible(true); 
    return app; 
} 

Answer 2

今天我終於有時間看你的代碼，感謝您的支持。

就像你在您的評論說，我不需要像可言，所以我試圖把它從功能mygui，讓我們來看看，如果我能做到這一點：

function mygui() { 
    var app = UiApp.createApplication().setTitle('CheckAll example'); 
    var panel = app.createVerticalPanel(); 

    var boxes = ['Example 1', 'Test', 'Last check']; 
    var groupName = 'myCheckBoxes'; 

    var groupAll = groupName+','+boxes.length; 
    var checkAll = app.createCheckBox("Check All").setId(groupAll).setName(groupAll).addValueChangeHandler(
    app.createServerHandler('checkAll_').addCallbackElement(panel)); 

    panel.add(checkAll); 
    for(var i in boxes) 
    panel.add(app.createCheckBox(boxes[i]).setId(groupName+','+i)); 

    SpreadsheetApp.getActive().show(app.add(panel)); 
} 

我剛剛取消了第2,3和8行，然後我打了第9和第10行。這足以讓我們意外地發現錯誤，站在錯誤信息中。

Answer 3

這裏是一個可能的解決方法與客戶端的處理程序：（測試）

我個人覺得它更容易和更清晰的使用，而不必通過ID來獲得他們的widget創建變量......幾行代碼來寫，但更容易閱讀;-)

function checkboxes() { 
    var range = SpreadsheetApp.getActiveSpreadsheet(); 
    var sheet = range.getSheetId(); 
    var app = UiApp.createApplication().setTitle('Title').setWidth(200).setHeight(150); 
    var grid = app.createGrid(4, 3).setCellPadding(5).setCellSpacing(5); 

    //One 
    var one = app.createCheckBox().setName('One'); 
    grid.setWidget(0, 0, app.createLabel('One').setId('One')); 
    grid.setWidget(0, 1, one); 

    //Two 
    var two = app.createCheckBox().setName('Two') 
    grid.setWidget(1, 0, app.createLabel('Two').setId('Two')); 
    grid.setWidget(1, 1, two); 

    //three 
    var three = app.createCheckBox().setName('Three') 
    grid.setWidget(2, 0, app.createLabel('Three').setId('Three')); 
    grid.setWidget(2, 1, three); 
    //... 
    var r1 = app.createRadioButton('radio').setHTML('All'); 
    var r2 = app.createRadioButton('radio').setHTML('None'); 
    grid.setWidget(3, 0, r1) 
    grid.setWidget(3, 1, r2) 

    var Chandler1 = app.createClientHandler().forTargets(one,two,three).setValue(true) 
    r1.addClickHandler(Chandler1) 
    var Chandler2 = app.createClientHandler().forTargets(one,two,three).setValue(false) 
    r2.addClickHandler(Chandler2) 
    app.add(grid) 
    var doc = SpreadsheetApp.getActive() 
    doc.show(app) 
} 

編輯：以下恩裏克的評論（很聰明！感謝）在這裏是一個「全複選框」版本的作品就好;-)

function checkboxes2() { 
    var range = SpreadsheetApp.getActiveSpreadsheet(); 
    var sheet = range.getSheetId(); 
    var app = UiApp.createApplication().setTitle('checkBoxes test').setWidth(200).setHeight(150); 
    var grid = app.createGrid(4, 3).setCellPadding(5).setCellSpacing(5); 

    var one = app.createCheckBox().setName('One'); 
    grid.setWidget(0, 0, app.createLabel('One').setId('One')); 
    grid.setWidget(0, 1, one); 

    var two = app.createCheckBox().setName('Two') 
    grid.setWidget(1, 0, app.createLabel('Two').setId('Two')); 
    grid.setWidget(1, 1, two); 

    var allP = app.createVerticalPanel() 
    var allA = app.createCheckBox().setName('allA'); 
    var allB = app.createCheckBox().setName('allB').setVisible(false); 
    var allP = app.createVerticalPanel().add(allA).add(allB); 
    grid.setWidget(2, 0, app.createLabel('All').setId('all')); 
    grid.setWidget(2, 1, allP); 

    var ChandlerA = app.createClientHandler().forTargets(one,two,allB).setValue(true).forTargets(allB).setVisible(true).forEventSource().setVisible(false); 
    allA.addClickHandler(ChandlerA) 
    var ChandlerB = app.createClientHandler().forTargets(one,two,allA).setValue(false).forTargets(allA).setVisible(true).forEventSource().setVisible(false); 
    allB.addClickHandler(ChandlerB) 
    app.add(grid) 
    var doc = SpreadsheetApp.getActive() 
    doc.show(app) 
}