Einbetten interaktiver Google-Tabellen api

Mit Google Tabellenkalkulation API, ist es möglich, Tabellenkalkulation auf der Website, die bearbeitbar ist, ohne Speichern auf Google Drive des Benutzers?Einbetten interaktiver Google-Tabellen api

Für jeden Benutzer, der sich bei unserem Webservice anmeldet, möchten wir die Daten des Benutzers aus unserer Datenbank abrufen und dem Benutzer in einer Tabelle anzeigen. Der Benutzer kann bearbeiten, und nach der Bestätigung werden die Daten in der Tabelle in unsere Datenbank hochgeladen. Während des Prozesses möchten wir nicht, dass die Daten auf dem Google-Laufwerk des Nutzers gespeichert werden, und der Nutzer sollte nicht berechtigt sein, den Zugriff auf sein Google-Laufwerk zu autorisieren. Ist dies mit Google Tabellenkalkulationsprogramm möglich?

Auch, Ich bin auf der Suche nach ein paar gute Beispiele, die so funktioniert, aber keine finden konnte. Irgendwelche Vorschläge? Vielen Dank.

Quelle

2017-07-21 Kwai

Hier ist ein einfaches Beispiel für die Erstellung und editierbare HTML-Version Ihrer Tabelle. Sie können dies als eine Webanwendung bereitstellen, wenn Sie möchten. Ich habe es als einen modeless Dialog entwickelt. Um eine Zelle zu bearbeiten, nehmen Sie einfach die Änderung vor und drücken Sie Enter. Der Hintergrund wird gelb, und nachdem die Tabelle aktualisiert wurde, wird die Hintergrundfarbe wieder weiß angezeigt. Es gibt keine anderen Steuerelemente.

Ich stelle mir vor, dass Sie viele zusätzliche Verbesserungen hinzufügen können, aber dies deckt einige der Grundlagen einschließlich Client zu Server und Server zurück zu Client-Kommunikation.

Der Google-Script-Code:

function htmlSpreadsheet() 
{ 
    var br='<br />'; 
    var s=''; 
    var hdrRows=1; 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getActiveSheet(); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    s+='<table width="100%">'; 
    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="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>'; 
     } 
     else 
     { 
     s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="8" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>'; 
     } 
    } 
    s+='</tr>'; 
    } 
    s+='</table>'; 
    //s+='<div id="success"></div>'; 
    s+='</body></html>'; 

    var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450); 
    userInterface.append(s); 
    SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName()); 
} 

function updateSpreadsheet(i,j,value) 
{ 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getActiveSheet(); 
    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; 
}

Die htmlss.html Datei:

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

Quelle

2017-07-21 04:57:00 Cooper

Einbetten interaktiver Google-Tabellen api

Antwort

Verwandte Themen