Итак, во время курса rnet я узнал, как подключить свои данные в Google Sheet к веб-приложению и как обновлять мои данные в листах. Все выглядит хорошо, у меня есть таблица html, где я могу изменить значения, и они обновят мой Google Sheet. Но я хочу сделать некоторые модификации и не знаю как. Я хотел бы добиться двух вещей: если в одной из ячеек найдено конкретное c слово, я бы хотел, чтобы вся строка меняла цвет, например, на красный, если в любой ячейке есть слово «кошка» и вторая проблема - Я хотел бы создать еще один столбец, в котором в каждой строке будут отображаться параметры для выбора (всегда те же 3 параметра в форме раскрывающегося списка), и после выбора одного из них данные в электронной таблице будут обновлены до выбранный вариант. Не совсем уверен, какую часть кода я должен изменить.
Вот мой код:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Options').addItem('PopUp','showDialog').addToUi();
}
function showDialog(){
var htmlTemplate = HtmlService.createTemplateFromFile("page-html");
var ss = SpreadsheetApp.openById("1iiIkFURQLkqQOLXETe2IZPRhWFbZTELkwmP6IzHpDRo");
var sheet = ss.getSheetByName("Test");
var range = sheet.getDataRange();
var values = range.getValues();
htmlTemplate.data = values;
var html = htmlTemplate.evaluate().setHeight(1200).setWidth(600);
SpreadsheetApp.getUi().showModalDialog(html,"My data")
}
function doGet(){
var htmlTemplate = HtmlService.createTemplateFromFile("page-html");
var ss = SpreadsheetApp.openById("1iiIkFURQLkqQOLXETe2IZPRhWFbZTELkwmP6IzHpDRo");
var sheet = ss.getSheetByName("Test");
var range = sheet.getDataRange();
var values = range.getValues();
htmlTemplate.data = values;
var html = htmlTemplate.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function sheetUpdate(r,c,v){
var ss = SpreadsheetApp.openById("1iiIkFURQLkqQOLXETe2IZPRhWFbZTELkwmP6IzHpDRo");
var sheet = ss.getSheetByName("Test");
var range = sheet.getDataRange();
var values = range.getValues();
values[r][c] = v;
range.setValues(values);
var data = {
'info':'Success! You changed value to: '+v
};
return data;
}
А вот HTML код:
<script>
var datags = <?!= JSON.stringify(data) ?>;
console.log(datags);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1, shrink-to-fit=no">
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
td {
font-style: 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="flashMessage"></div>
<div id="output"></div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
var row = '<table class="table">';
for(var i=0;i < (datags.length); i++){
if(i != 0 ){
row+='<tr>';
}
else {
row+='<thead class ="thead-dark"><tr>';
}
for(var j=0;j < datags[i].length; j++){
if(datags[i][j]){
if(i != 0 ){
row=row+'<td ><input data-row ="'+i+'" data-col="'+j+'" type="text" value="'+datags[i][j]+'" class="dtValue"></td>'
}
else {
row=row+'<th>'+datags[i][j]+'</th>';
}
}
}
if(i != 0 ){
row+='</tr>';
}
else {
row+='</thead></tr>';
}
}
$('#output').html(row);
$('#output').on('change','.dtValue',function(){
console.log(this.dataset.row, this.dataset.col, this.value);
google.script.run.withSuccessHandler(onSuccess)
.sheetUpdate(this.dataset.row, this.dataset.col, this.value);
});
})
function onSuccess(data) {
$('#flashMessage').html('<div class="alert alert-success" role="alert">'+data.info+'</div>');
}
</script>
</body>
</html>