Веб-приложение - Google листы - HTML-таблица с полем ввода - PullRequest
1 голос
/ 30 октября 2019

У нас есть требование отслеживать и проверять производство, по сути, у нас много заказов, которые, похоже, теряют некоторые из наших продуктов в пути (портит и т.д.).

Чтобы остановить это, мы имеем сейчасразместив заказы на листах Google и указав, сколько их должно быть, сотрудник затем напишет, сколько было получено.

В веб-приложении я хочу показать таблицу и указать поле, в которомсотрудник может ввести количество,

Так что, если бы у меня был лист Google, я мог бы иметь в столбце A [Название продукта] столбец b [Начальное количество] и в столбце C [Подсчитанное количество]

Вкл. веб-приложение отображает все 3 столбца, но позволяет пользователю вводить счет в столбец [Подсчитанное количество].

Возможно ли это? (Предполагается, что мне нужно либо поле ввода в HTML-таблице или редактируемой таблице?

Спасибо

1 Ответ

0 голосов
/ 30 октября 2019

Это позволит получить все данные в вашем спреде, но вы можете редактировать только последний столбец. Он построен в виде диалога, но его легко можно изменить на веб-приложение.

У меня были некоторые проблемы с областями видимости, поэтому я подумал, что они могут вам понадобиться. Если вы не знаете, что с ними делать, пропустите их и вернитесь, если у вас возникли проблемы.

"oauthScopes": ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/script.container.ui"]

ordercounts.gs:

function getOrders() {
  var ss=SpreadsheetApp.getActive();
  var osh=ss.getSheetByName("Orders");
  var org=osh.getDataRange();
  var vA=org.getValues();
  var rObj={};
  var html='<style>th,td{border: 1px solid black}</style><table>';
  vA.forEach(function(r,i){
    html+='<tr>';
    r.forEach(function(c,j){
      if(i==0){
        html+=Utilities.formatString('<th>%s</th>',c);
      }else if(j<r.length-1){
        html+=Utilities.formatString('<td>%s</td>', c);
      }else{
        html+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + c + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
      }
    });
    html+='</tr>';
  });
  html+='</table>';
  return html;
}

function updateSpreadsheet(updObj) {
  var i=updObj.rowIndex;
  var j=updObj.colIndex;
  var value=updObj.value;
  var ss=SpreadsheetApp.getActive();
  var sht=ss.getSheetByName("Orders");
  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 launchOrdersDialog(){
 var userInterface=HtmlService.createHtmlOutputFromFile('orders');
 SpreadsheetApp.getUi().showModelessDialog(userInterface, "OrderCounts");
}

orders.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function(){
      google.script.run
      .withSuccessHandler(function(hl){
        console.log('Getting a Return');
        $('#orders').html(hl);
      })
      .getOrders();

    });
    function updateSS(i,j) {
      var str='#txt' + String(i) + String(j);
      var value=$(str).val();
      var updObj={rowIndex:i,colIndex:j,value:value};
      $(str).css('background-color','#ffff00');
      google.script.run
      .withSuccessHandler(updateSheet)
      .updateSpreadsheet(updObj);
    }

    function updateSheet(data) {
      //$('#success').text(data.message);
      $('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
    }
    console.log('My Code');
  </script>
  </head>
  <body>
    <div id="orders"></div>
  </body>
</html>

Вот как выглядит инструмент:

enter image description here

enter image description here

enter image description here

Все, что вам нужно сделать, это ввести обновленный счетчик и нажать Enter, и таблица изменится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...