Создание выпадающего меню в настраиваемом диалоге Google Script с опциями из данных в Google Sheet - PullRequest
Новая
       10

Создание выпадающего меню в настраиваемом диалоге Google Script с опциями из данных в Google Sheet

0 голосов
/ 02 июля 2018

Я хочу создать выпадающее меню в настраиваемом диалоге при запуске сценария. Я добился успеха в этом, а также смог создать цикл в элементе, который создает выпадающий список из статического массива [т.е. массив месяцев и создать выпадающее меню. Однако мне не удалось собрать данные из листа Google и использовать эти данные для создания раскрывающегося меню.

Пример кода, который работает для создания выпадающего меню из массива: 

<form>
<select name="Month-test" id="month-selector-test" autofocus="autofocus" autocorrect="off" autocomplete="off">
  <option value="" selected="selected" id="todays-month"></option>
   <script> 
   // select this element
  var currentDayList = document.getElementById('month-selector-test');
  // array of all months
  var allMonthsAbv = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  // for every element in the array, add an option
  for (var i=0; i<allMonthsAbv.length; i++) {
    currentDayList.innerHTML += '<option value=' + allMonthsAbv[i] + '>' + allMonthsAbv[i] + '</option>';
  }    
  </script>
</select>
</form>

Пример кода, который не работает для создания выпадающего меню из данных на листе: 

<form>
<select name="Month" id="month-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
  <option value="" selected="selected"></option>
    <script>
    var monthList = document.getElementById('month-selector');
    
    var allData = SpreadsheetApp.openById('###ID###').getSheetByName('###NAME###').getDataRange().getValues();
    var list = [];
    for (var i=1;i<allData.length;i++) {
      var schoolName = allData[i][1];
      if (schoolName != "") {
      list.push(schoolName);
      }
    }
   for (var i = 0;i<list.length;i++) {
    monthList.innerHTML += '<option value=' + list[i] + '>' + list[i] + '</option>';
  }  
  </script>
</select>
</form>

Ответы [ 4 ]

0 голосов
/ 10 июля 2018

ОК - я сделал то, что должен был сделать раньше, и попытался запустить ваш код, и обнаружил ряд совершенно разных (то есть отдельных, но очень определенных) проблем. У меня остался один вопрос, который мне еще предстоит решить, но я подумал, что должен держать вас в курсе. Я постараюсь обратиться к ним всем, прежде чем вставлять рабочий код.

  • Когда запускается код? Это должно произойти в событии загрузки тела HTML, чтобы раскрывающийся список был заполнен. Единственный способ, которым я знаю, чтобы код был запущен в тот момент в GAS, - это через successHandler для вызова GAS. Следовательно: NullFunction () (GAS, т. Е. Backend) ничего не делает, он просто вызывает addMonths () при загрузке тела, а затем заполняет раскрывающийся список.
  • Какие атрибуты поддерживает тег select? Вы использовали id и связанный вызов getElementById (), но select не поддерживает атрибут id, следовательно: Затем вам нужно осознать тот факт, что getElementsByName () возвращает список узлов, поэтому вам нужно добавить к innerHtml [0] в этом списке. Следовательно: var currentDayList = document.getElementsByName ('month-selector-test') [0];
  • Где должен быть размещен блок? Здесь есть два аспекта. Вы положили это в блоке. Однако, если он находится там, он будет обрабатываться вашим кодом как часть innerHtml, поэтому он не должен идти туда! Если вы вставите его, он еще не загрузится при запуске onload, поэтому он должен идти в конце

Вот рабочий код: 

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
<body onload='google.script.run.withSuccessHandler(addMonths).nullFunction();'>
  x x x 
<select name="month-selector-test">
</select>
   <script> 
  var currentDayList = document.getElementsByName('month-selector-test')[0];
   function addMonth(monthAbv){
   text=currentDayList.innerHTML;
  var firstPart='\<option value=\"';
  var secondPart='\"\>';
  var thirdPart='\<\/option\>';
  text=text + firstPart+name  + secondPart  + monthAbv + thirdPart;
  currentDayList.innerHTML+=text;
  }
  function addMonths(){
  var allMonthsAbv = ["Jan","Feb"];
  //"Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  // for every element in the array, add an option
  for (var i=0; i<allMonthsAbv.length; i++) {
   addMonth(allMonthsAbv[i]);
    }
  }
  </script>
  </body>
</html>
0 голосов
/ 02 июля 2018

Я, конечно, написал и регулярно использую код, который делает то, что вы хотите. Так что я могу с уверенностью сказать, что это может быть сделано.

Я должен добавить примечание, что это очень и очень полезно сделать. Электронная таблица - это то, что некодировщики могут с радостью обновлять, а затем мы генерируем код из этого.

То, что меня озадачило в предлагаемом коде, - это использование SpreadsheetApp в HTML.

Я делал это только в коде GAS. Возможно, вы знаете что-то, чего я не знаю, или, возможно, это станет началом ответа на ваш вопрос.

Я много пользуюсь google.script.run А вы?

0 голосов
/ 06 июля 2018

Итак, следующий вопрос - можете ли вы легко и регулярно перемещаться между передним планом (HTML) и фоновым (GAS)

Я спрашиваю это, потому что это был ключ для меня

0 голосов
/ 02 июля 2018

Вы используете поп неправильно. Измените list.pop на list.push 

  var monthList = document.getElementById('month-selector');

  var allData = SpreadsheetApp.openById('###ID###').getSheetByName('###NAME###').getDataRange().getValues();
  var list = [];
  for (var i=1;i<allData.length;i++) {
      var schoolName = allData[i][1];
      if (schoolName != "") {
        list.push(schoolName);
      }
    }
   for (var i = 0;i<list.length;i++) {
    monthList.innerHTML += '<option value=' + list[i] + '>' + list[i] + '</option>';
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...