在網站中嵌入Google表格的特定範圍，以便網站用戶可以編輯

我想從Google文檔電子表格中嵌入特定範圍的單元格（或者，如果該表格無法在沒有標題和工具欄的情況下運行整個表格）一個網站，以便任何網站訪問者可以輸入他們的數據。在網站中嵌入Google表格的特定範圍，以便網站用戶可以編輯

我知道如何將特定範圍的單元格嵌入html表格，但不允許網站用戶編輯表格。

幾年前問過一個類似的問題here但建議的解決方案似乎不再有效。

2017-08-20 F Bert

我稱之爲htmlSpreadsheet，您可以將其用作對話框或將其部署爲webapp，doGet已經可以使用了。它仍然是一個非常簡單的應用程序。有很多定製的romm。

這裏的code.gs文件：

function onOpen() 
{ 
    SpreadsheetApp.getUi().createMenu('HTML Spreadsheet') 
    .addItem('Run Spreadsheet in Dialog', 'htmlSpreadsheet') 
    .addToUi(); 
} 

var SSID='SpreadSheetID'; 
var sheetName='Sheet1'; 

function htmlSpreadsheet(mode) 
{ 
    var mode=(typeof(mode)!='undefined')?mode:'dialog'; 
    var br='<br />'; 
    var s=''; 
    var hdrRows=1; 
    var ss=SpreadsheetApp.openById(SSID); 
    var sht=ss.getSheetByName(sheetName); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    s+='<table>'; 
    for(var i=0;i<rngA.length;i++) 
    { 
    s+='<tr>'; 
    for(var j=0;j<rngA[i].length;j++) 
    { 
     if(i<hdrRows) 
     { 
     s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>'; 
     } 
     else 
     { 
     s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>'; 
     } 
    } 
    s+='</tr>'; 
    } 
    s+='</table>'; 
    //s+='<div id="success"></div>'; 
    s+='</body></html>'; 
    switch (mode) 
    { 
    case 'dialog': 
     var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450); 
     userInterface.append(s); 
     SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName()); 
     break; 
    case 'web': 
     var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450); 
     return userInterface.append(s).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 
    } 
} 

function updateSpreadsheet(i,j,value) 
{ 
    var ss=SpreadsheetApp.openById(SSID); 
    var sht=ss.getSheetByName(sheetName); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    rngA[i][j]=value; 
    rng.setValues(rngA); 
    var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j}; 
    return data; 
} 

function doGet() 
{ 
    var output=htmlSpreadsheet('web'); 
    return output; 
}

這是htmlss.html文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
    $(function() { 

    }); 
    function updateSS(i,j) 
    { 
     var str='#txt' + String(i) + String(j); 
     var value=$(str).val(); 
     $(str).css('background-color','#ffff00'); 
     google.script.run 
     .withSuccessHandler(successHandler) 
     .updateSpreadsheet(i,j,value) 
    } 
    function successHandler(data) 
    { 
     $('#success').text(data.message); 
     $('#txt' + data.ridx + data.cidx).css('background-color','#ffffff'); 
    } 
    console.log('My Code'); 
    </script> 
    <style> 
     th{text-align:left} 
    </style> 
    </head> 
    <body> 
    <div id="success"></div>

來源

2017-08-20 23:04:07 Cooper

感謝您的回覆。我正在使用Wordpress，所以我認爲你的解決方案不適用於我的情況，不幸的是。有什麼辦法可以使用Wordpress來做到這一點？ –

並非如此。只需將其作爲webapp和iframe部署到您的站點即可。 [這是一個類似情況的例子。]（http://www.wiechman4lakewood.com/resources/city-council-archives）這是我管理的網站。這是一個WordPress的網站，檔案分鐘和檔案視頻是網站的應用程序已被iframed。 – Cooper

我喜歡這個！請注意，它不會更新包含公式的最終用戶單元格，因此只是從用戶的角度進行直接編輯而沒有公式的好處，但它確實限制了用戶的功能。它也似乎將單元格的格式更改爲自定義日期格式。我還沒有嘗試過其他格式如果問題表中沒有公式，那麼一切都很好。我不知道有什麼方法可以知道哪些單元格具有引用給定單元格的公式，但不會循環遍歷所有單元格。 –

以下職位將是有益的： https://support.google.com/docs/answer/37579?hl=fr&ref_topic=2818998

並與一些增值，以下是您可能要嘗試的模板，其中------是您的工作表的特定代碼

<iframe style="border: 0;" src="https://docs.google.com/spreadsheets/-----/pubhtml?gid=--------&amp;range=C2:E&amp;chrome=false&amp;single=true&amp;widget=false&amp;headers=false" width="800" height="750" frameborder="0" scrolling="yes"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

來源

2018-02-18 18:27:22 ThePatissier

在網站中嵌入Google表格的特定範圍，以便網站用戶可以編輯

回答

相關問題