2017-08-20 1 views
1

Googleドキュメントスプレッドシートの特定の範囲のセルを埋め込みたいのですが(ヘッダーとツールバーのないシート全体が機能しない場合)どのウェブサイトの訪問者も自分のデータを入力できるようにする。ウェブサイトのユーザーが編集できるように、Googleスプレッドシートの特定の範囲をウェブサイトに埋め込みます。

セルの特定の範囲をhtmlテーブルに埋め込む方法はわかっていますが、ウェブサイトのユーザーはシートを編集できません。

同じような質問が数年前にhereに尋ねられましたが、提案された解決策はもう機能していないようです。

答えて

1

私はこれをhtmlSpreadsheetと呼びます。これは、ダイアログとして使用するか、doGetが既に実行されているwebappとしてデプロイすることができます。それはまだかなり単純なアプリです。カスタマイズのための多くのrommがあります。ここで

がcode.gsファイルです: https://support.google.com/docs/answer/37579?hl=fr&ref_topic=2818998

そして、いくつかの付加価値を持つ:投稿が参考になっなります後

<!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> 
+0

ご返信ありがとうございます。私はWordpressを使用していますので、あなたのソリューションは私のケースには当てはまらないと思います。 Wordpressを使ってこれを行う方法はありますか? –

+0

そうではありません。 webappとiframeをサイトに展開するだけです。 [これは同様の状況の例です](http://www.wiechman4lakewood.com/resources/city-council-archives)これは私が管理しているサイトです。これはWordPressのサイトで、アーカイブの分とアーカイブビデオはサイトにiframeされたWebアプリケーションです。 – Cooper

+0

私はこれが好きです!数式を含むエンドユーザーのセルは更新されないため、数式の恩恵なしにユーザーの立場からまっすぐに編集できますが、ユーザーの機能は制限されます。また、カスタム日付形式でセルの書式設定を[自動]に変更しているようです。私は他のフォーマットのためにそれを試していない問題のシートが式を持っていない場合は、すべてが良いです。私は、どの細胞が、ある細胞を参照する数式を持っているかを知る方法を認識していません。 –

0

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ファイルです次のテンプレートを試してみてください。ここで------はシートに固有のコードです

<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> 
関連する問題