Заполните раскрывающееся меню HTML из столбца в электронной таблице Google - PullRequest
Новая
       8

Заполните раскрывающееся меню HTML из столбца в электронной таблице Google

0 голосов
/ 16 января 2019

Я новичок в .gs, так что это не должно быть сложно.

У меня есть Google Spreadsheet со значениями в столбце (скажем, в столбце A). Я создал пользовательское меню, используя .gs, где пользователь выберет опцию.

При нажатии на один из параметров (новый компонент) появляется всплывающее меню с раскрывающимся меню, в котором пользователь должен выбрать одно из значений.

CustomMenu.gs 

 function onOpen() {
 var ui = SpreadsheetApp.getUi();
 // Or DocumentApp or FormApp.
 ui.createMenu('bq Library Menu')
  .addItem('Add new component', 'newComponent')
  .addSeparator()
  .addSubMenu(ui.createMenu('Modify existing component')
      .addItem('Remove component', 'removeComponent'))
  .addToUi();
 }

 function newComponent() {

 var html = HtmlService.createHtmlOutputFromFile('NewComponentForm')
     .setWidth(400)
     .setHeight(300);
 SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
     .showModalDialog(html, 'New Component Form');
 }

NewComponentForm.html 

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
  <h2>Clickable Dropdown</h2>
  <p>Select manufacturer from the list</p>

  <div class="dropdown">
     <button onclick="loadManufacturers()" class="dropbtn">Dropdown</button>
     <div id="myDropdown" class="dropdown-content"></div>
  </div>

</body>

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

Итак, как мне перейти к реализации процесса заполнения выпадающего списка?

1 Ответ

0 голосов
/ 17 января 2019
  • Вы хотите создать поле выбора и поместить значения из столбца «А» электронной таблицы.
  • Когда выбрано значение из поля выбора, вы хотите получить его.

Если мое понимание верно, как насчет этой модификации? Я думаю, что для вашей ситуации есть несколько ответов, поэтому, пожалуйста, подумайте об этом как об одном из них.

Последовательность действий этого модифицированного скрипта следующая.

  1. Открытие диалогового окна.
  2. Нажмите кнопку «Выпадающий».
  3. С помощью google.script.run запустите функцию getValuesFromSpreadsheet() на стороне скрипта Google Apps.
  4. В getValuesFromSpreadsheet() значения извлекаются из электронной таблицы и возвращаются в Javascript.
  5. В withSuccessHandler() возвращенные значения извлекаются. Используя значения, создается поле выбора.
  6. Когда выбрано значение в поле выбора, selected() запускается и получает выбранное значение.

Когда отражается вышеуказанный поток, модифицированный скрипт выглядит следующим образом.

ГАЗ:

Добавьте следующий скрипт Google Apps в CustomMenu.gs. 

function getValuesFromSpreadsheet() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues(); // Retrieve values and send to Javascript
}
  • В этом примере сценария значения извлекаются из «Лист1» активной электронной таблицы. Значения находятся в столбце «А».
    • Если вы хотите получить данные из другого диапазона и листа, пожалуйста, измените это.

HTML:

Пожалуйста, добавьте следующий Javascript в NewComponentForm.html. 

<script>
  function loadManufacturers() {
    google.script.run.withSuccessHandler(function(ar) {
      let select = document.createElement("select");
      select.id = "select1";
      select.setAttribute("onchange", "selected()");
      document.getElementById("myDropdown").appendChild(select);
      ar.forEach(function(e, i) {
        let option = document.createElement("option");
        option.value = i;
        option.text = e;
        document.getElementById("select1").appendChild(option);
      });
    }).getValuesFromSpreadsheet();
  };

  function selected() {
    const value = document.getElementById("select1").value;
    console.log(value);
  }
</script>
  • Используйте google.script.run для извлечения значений из электронной таблицы.
  • Используя withSuccessHandler, получить значения из Google Apps Script.
  • При нажатии кнопки «Раскрывающийся список» создается поле выбора.
  • Выбранное значение можно увидеть на консоли.

Примечание:

  • Это простой пример сценария. Поэтому, пожалуйста, измените его для вашей ситуации.

Ссылки:

Если я неправильно понял ваш вопрос, извините.

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

Нет похожих вопросов

...