Вывод таблицы из БД 1С на веб-страницу. Knockout.js

Таблицей может быть, например, прайс-лист, который содержит много записей, не помещающихся на одном экране. 

Поэтому следует сделать таблицу “многостраничной” (Paged grid) и добавить элементы управления сортировкой (по наименованию, артикулу)
Весь этот функционал можно реализовать при помощи свободного js-каркаса веб-приложений Knockout.js

Настройка http-сервиса в 1С

В конфигурации нужно создать новый http-сервис. Его обработчик будет возвращать http-ответ, тело которого будет содержать данные в формате json – список объектов json (массив соответствий в терминологии 1С)

http-сервис, возвращающий данные в формате JSON

Чтобы данные воспринимались JavaScript не как текст, а как json-данные, нужно указать тип содержимого в заголовке ответа:

Ответ.Заголовки.Вставить("Content-type","application/json; charset=utf-8");

http-сервис отдал JSON

Создание веб-страницы

В заголовке подключаем скрипты и таблицу стилей:

<script src=’knockout-3.3.0.js’></script>
<script src=’knockout.simpleGrid.1.3.js’></script>
<script src=’jquery-1.11.3.min.js’></script>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

В блок<div data-bind=’simpleGrid: gridViewModel’> </div> будет выводиться таблица

Здесь будет выведена таблица

Функция

$(function(){

}

будет выполнена после загрузки/обновления страницы.
В её теле опишем обработчики кнопок сортировки, представление колонок таблицы, а также выполним привязку к данным. После чего таблица будет отрисована на странице.

Knockout.js в действии 🙂

Пример для УТ 11.1

В архиве содержатся следующие файлы:

  • В папке www – файлы для размещения на веб-сервере
  • price.cf – файл конфигурации, содержащий единственный объект метаданных – http-сервис price

Тестировалось на демо-УТ 11.1.10.102. Предопределенных настроек нет, поэтому [не мы такие, жизнь (с)] ссылки на виды цен, передаваемые в параметр запроса, находятся по наименованиям

Файлы для загрузки на веб-сервер

Настройка примера

1. Установите рекомендованный веб-сервер
2. Подготовьте БД Управление Торговлей редации 11.1 (включите возможность изменения)
3. Создайте новую пустую базу, загрузите конфигурацию из файла price.cf
4. Скопируйте через буфер обмена (ctrl+c, ctrl+v) http-сервис price в УТ 11.11
5. Опубликуйте http-сервис на веб-сервере
6. Скопируйте файлы в директорию веб-сервера
На этом настройка закончена, можно обратиться из браузера к URL каталога, куда были скопированы файлы из папки www

Полученная таблица

Механизм расширений

В следующем релизе платформы (8.3.7) разработчики обещали расширить функциональность расширений – добавить возможность создания web- и http-сервисов. Это означает то, что скоро возможным станет добавление подобных разработкок без изменения конфигурации БД. То есть пункты 1-4 заменит простая установка расширения. Так что ждем выхода 8.3.7 🙂

В КАТАЛОГ »