Как вставить таблицу Google на сайт

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

Внимательный читатель вспомнит, что в первой части статьи мы говорили о том, что есть два способа получения данных из таблиц. В завершающей части статьи мы в основном поговорим как раз о втором способе работы с выборкой данных, который по совместительству является еще и более быстрым, красивым и удобным.

Данный способ подразумевает использование сторонней библиотеки (правда, от Google) на стороне клиента и она поддерживает SQL-подобный синтаксис. Я говорю о Google Charts, API которых можно использовать для своих нужд.

Встраиваем Google таблицу на сайт, блог и т.д.

Доп. настройки таблицы

Для того чтобы наши запросы нормально отрабатывали нам необходимо сделать следующие вещи:

1. В таблице первой строкой прописать заголовки столбцов, иначе первая строка после выполнения запроса будет помещаться в объект, хранящий заголовки (у нас это уже сделано).
2. Открыть таблицу для просмотра, а именно установить статус “Просматривать могут все у кого есть ссылка”. К сожалению, это обязательное условие.
3. Скопировать уникальный идентификатор таблицы.

Подключение библиотеки

Для подключения библиотеки достаточно в файле index.html перед ссылкой на скрипт main.js добавить две следующие строки:

Взаимодействие с таблицей через API Google Charts

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

var tasks = «1M1OKuXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXWj6Bs»;//уникальный идентификатор нашей таблицы

Пишем новую функцию (вообще-то парочку…) для получения данных из таблицы:

function loadTasks (query) < googleQuery (tasks, ‘0’, ‘A:C’, «SELECT * ORDER BY A DESC»); //Эту функцию создал я для удобства. Она принимает следующие параметры по порядку: //1. Уникальный идентификатор таблицы; //2. Числовой идентификатор листа.

По умолчанию у первого листа таблицы после ее создания он равен нулю. // При создании других листов генерируется 8-ми значный числовой идентификатор. // Увидеть его можно в адресной строке в параметре «gid» (например, «gid=99808602»). //3. Столбцы, в которых будет осуществляться поиск согласно запросу. //4. Текст запроса в SQL-подобном формате. Обратите внимание, что формат все-таки отличается от SQL. >function googleQuery (sheet_id, sheet, range, query) < google.charts.load(’45’, );//загружаем библиотеку Google Charts google.charts.setOnLoadCallback (queryTable);//обозначаем, какая функция будет запущена по готовности библиотеки function queryTable () < //объект с настройками var opts = ; //сама функция, выполняющая запрос к таблице var gquery = new google.visualization.Query(‘https://docs.google.com/spreadsheets/d/’+sheet_id+’/gviz/tq?gid=’+sheet+’headers=1 //обозначаем, какая функция будет запущена при получении результатов gquery.send (callback); > function callback (e) < if (e.isError () ) < console.log(‘Error in query: ‘ + e.getMessage () + ‘ ‘ + e.getDetailedMessage ()); return; >//если ошибка, то записываем ее в консоль var data = e.getDataTable ();//если ошибки нет, то формируем данные для дальнейшей работы tasksTable (data); //передаем их в функцию, которая обработает данные и сформирует из них нашу таблицу > >

Гугл таблицы как пользоваться. Урок 1 подключаем гугл таблицу к сайту

Модифицируем функцию вывода списка задач:

Запускаем новую функцию при готовности страницы и (!) каждый раз после добавления, удаления или обновления строк в таблице.

$( document ).ready(function() );

На первый взгляд ничего не изменилось, но это не так:

1. Формат вывода даты стал более привычным.
2. Запрос через API Google Charts работает в разы быстрее, чем тот, что написали мы в первой части.
3. Мы получили мощный инструмент получения данных из таблиц используя SQL подобный синтаксис! Если мы захотим получить задачи только со статусом «В очереди», то нам достаточно просто изменить «SELECT * ORDER BY A DESC» на «SELECT * WHERE C = 0 ORDER BY A DESC».

Имеется поддержка таких команд как SUM(), COUNT(), GROUP BY, ORDER BY, PIVOT, OFFSET, LIMIT, LABEL, FORMAT, OPTIONS. Используя их, из таблиц можно получать данные практически в любых представлениях и формах.

Конечно, данный инструмент не создавался как аналог полноценным СУБД и еще очень очень сильно отстает от любых из них по числу возможностей и, конечно, скорости работы. Однако его вполне можно использовать, если есть такая потребность. Например, если перед вами стоит задача просто вывести на сайте какие-то данные из Google таблиц, то можно смело опускать все, что написано в предыдущих частях данной статьи. Вам потребуется только подключить библиотеку, открыть таблицу (или ее копию) для просмотра и написать пару несложных скриптов на JS для обращения и вывода данных.

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

Что можно улучшить:

Финальная версия данного проекта, включающая небольшие косметические доработки, опубликована по следующей ссылке: tasks.atonko.ru

Источник: alextonkonogov.ru

Загрузка электронной таблицы Google в приложении Мастер таблиц

Вы можете загрузить электронную таблицу Google в приложении Мастер таблиц и отображать ее содержимое прямо на сайте.

Важно:

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

Подробнее:

• Публикация таблицы Google
• Добавление URL таблицы в Мастер таблиц

Шаг 1 | Опубликуйте таблицу Google

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

Чтобы опубликовать таблицу:

1. Откройте Google Таблицу.
2. Нажмите Файл в левом верхнем углу.
3. Нажмите Поделиться.
4. В раскрывающемся меню выберите Опубликовать в Интернете.
5. Нажмите Опубликовать.

1. Нажмите ОК во всплывающем окне.
2. Скопируйте URL-адрес, отображаемый во вкладке Ссылка.

Шаг 2 | Добавьте URL-адрес таблицы в Мастер таблиц

После того, как вы опубликуете свою электронную таблицу Google, вы можете добавить ее в приложение Мастер таблиц в редакторе сайта.

Чтобы добавить URL:

1. Нажмите на приложение Мастер таблиц в редакторе.
2. Нажмите Настройка.
3. Выберите Данные.
4. Выберите URL-адрес таблицы Google.
5. Вставьте скопированный в первом шаге URL в поле URL-адрес таблицы.
6. Нажмите Продолжить.

Источник: support.wix.com

Скрипт для загрузки данных в Тильду
из Google Spreadsheets

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

Этот скрипт пригодится дизайнерам собирающим сайты при помощи сервиса Tilda.cc, которые хотят добавить на сайт немного интерактива.
Например можно сделать вывод прайс-листа, бронирование на мероприятие с ограниченным количеством мест, вывести остатки товара на складе и т.д.
Конечно для этого нужно иметь некоторые навыки работы с электронными таблицами Excel или Google Spreadsheets, но это проще чем учиться программировать на Javascript.

Как это работает?
Чтобы данные из таблицы Google появились в таблице Tilda нужно выполнить 3 простых шага:
Создать Google Таблицу
Поместите в нее данные которые хотите опубликовать
Добавить блок «Таблица»

Оформите таблицу в соответствии с необходимым внешним видом, настройте ширину, цвета и шрифты строк и столбцов

Вставить блок HTML и код
Проще всего вставить код из первого примера и будут показаны все данные из любой таблицы.
Простая загрузка данных из таблицы

Это самое легкое применение скрипта. Все что для этого нужно это создать таблицу в Google.Docs и открыть доступ для чтения по ссылке, на странице Тильды добавить блок Колонки > Таблица (CL46), сразу после него добавить блок Другое > HTML-код (Т123) и вставить в него код из примера. Не забудьте поменять url на адрес вашей таблицы гугл.
Еще вам нужно в поле id указать идентификатор блока. У каждого блока Тильды есть уникальный идентификатор, его можно найти под кнопкой Настройки в самом низу. Он будет выглядеть примерно так Block id: #rec10295104. Вам нужен только номер. Вставьте его вместо 10080283.

Актуальную версию скрипта можно найти на GitHub.
Оригинальную таблицу можно посмотреть здесь.

//Script который нужно поправить под ваши задачи var prms = [ < id : «10080283», url : «https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing», req : «select *» >, ]; //Script который не стоит править, если вы не понимаете, что там происходит. var curBlock = 0; //для последовательного заполнения нескольких таблиц. var google = >>> //callback функция для получения ответа от google spreadsheets //Генератор данных для блока таблица function gss4tilda_createT431 (blockID, data) < //Заполняем заголовки таблицы var part1=»»; for(var i=0; ipart1 = part1.slice(0,-1); //Заполняем данные таблицы var part2=»»; var empty = true; for(var i=0; i else < part2 += ‘;’ >; > part2 = !empty ? part2.slice(0,-1) + «n» : part2.slice(0,- data.table.rows[i].c.length); //part2 += «n»; > part2 = part2.slice(0,-1); //Очищаем блок от старых данных $(‘#rec’ + blockID + » table»).html(«»); $(‘#rec’ + blockID + » .t431__data-part1″).html(part1); $(‘#rec’ + blockID + » .t431__data-part2″).html(part2); t431_init(blockID); > //Callback функция для полуения данных от google в формате jsonp google.visualization.Query.setResponse = function(data) < //Получаем ссылку на нужный блок var blockID = prms[curBlock].id; var blockType = $(«#rec»+blockID + » div:first»).attr(«class»); switch (blockType) < case ‘t431′ : //table gss4tilda_createT431(blockID, data); break; >//Переходим к следующему блоку или сбрасываем счетчик if (curBlock < prms.length-1) < curBlock++; getGssData(); >else < curBlock = 0; >> //функция запроса данных от google spreadsheets function getGssData() < //Проверяем наличие всех необходимых данных if («id» in prms[curBlock] «url» in prms[curBlock] «req» in prms[curBlock]) < //Если вместо id таблицы стоит 0, то берем таблицу из предыдущего блока if(prms[curBlock].id===’0’) < alert(«Укажите ID таблицы, 0 временно не работает.») //let scriptElem = document.currentScript; //prms[curBlock].id = $(scriptElem).parents(‘.r’).prev().attr(‘id’).substr(3); //$(«script[src]»).each(function()< //if(~this.src.indexOf(«gss4tilda»)) //prms[curBlock].id = $(this).parents(‘.r’).prev().attr(‘id’).substr(3); //>); > //TODO: Добавить проверку на наличие rec в начале ID и удаление //получаем код таблицы из url и отправляем запрос на получение данных var gssCode = prms[curBlock][«url»].slice( prms[curBlock][«url»].indexOf(«spreadsheets/d/») + 15, prms[curBlock][«url»].indexOf(«/edit?»)); $.ajax(< url: ‘https://docs.google.com/a/google.com/spreadsheets/d/’ + gssCode + ‘/gviz/tq?tq=’ + encodeURIComponent( prms[curBlock].req ), dataType : ‘jsonp’ >); > > function htmlentities(s) < // Convert all applicable characters to HTML entities // // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) var div = document.createElement(‘div’); var text = document.createTextNode(s); div.appendChild(text); return div.innerHTML; >$().ready(function()< //сбрасываем счетчик таблиц и получаем первую таблицу curBlock = 0; getGssData(); >)

Источник: gss4tilda.tilda.ws