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

Программирование - Инструментарий

В публикации рассмотрен способ вывода на веб-страницу таблицы динамически выбранных из БД 1С данных с использованием js-библиотеки Knockout.js. Разработка демонстрирует работу с JSON и http-сервисами в 1С 8.3.6+.

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

Поэтому следует сделать таблицу "многостраничной" (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 :)

Скачать файлы

Наименование Файл Версия Размер
Веб-прайс для УТ 11.1
.zip 60,75Kb
10.12.16
19
.zip 60,75Kb 19 Скачать

См. также

Комментарии
1. Алексей Роза (DoctorRoza) 14.08.15 06:56 Сейчас в теме
Конечно, интересно, но только где это можно применить? Является ли озвученный подход нечто отдаленный Битрикс?
2. Ivan Khorkov (vano-ekt) 911 14.08.15 07:15 Сейчас в теме
(1) совсем не Битрикс, ибо тот - полноценная cms, а здесь просто сервис - например, запрос статуса заказа на сайте можно реализовать.
3. Роман Озеряный (rozer) 191 14.08.15 13:51 Сейчас в теме
В качестве развития - статье плюс, но на практике зачем так "загоняться": JS, jQuery, стили...?
в УТ11 результат отчета - табличныйдокумент сохранить в html и отдать клиенту типа ...

ТабДок.Записать(ИмяФайлаОжидаемыеПлатежи,ТипФайлаТабличногоДокумента.HTML4);
ОтветХТТП.УстановитьИмяФайлаТела(ИмяФайлаОжидаемыеПлатежи);

Не?
4. Ivan Khorkov (vano-ekt) 911 14.08.15 14:10 Сейчас в теме
(3) html? ни слова в публикации о нем нет, потому что она не о нем :)
есть условный сайт на joomla, wordpress, и прочих битриксах.
в него нужно встроить на главной странице, например, кнопку проверки статуса заказа и заказчик не хочет никаких ссылок, выгружалок, etc
Ем у надо, чтобы пользователь видел поле и кнопку, а по её нажатию получил сообщение.
Таких покупателей у заказчика 10 из 2 000 в день. Означает ли это, что оптимальным решением будет перманентная выгрузка тысяч заказов на сайт через ТабДок.Записать(ИмяФайлаОжидаемыеПлатежи,ТипФайлаТабличногоДокумента.HTML4); ?
вся суть ajax в том, что мы получаем только нужные данные, в нужный момент на лету, именно поэтому динамические сайты - тру, а статические -суксь
5. Роман Озеряный (rozer) 191 14.08.15 14:18 Сейчас в теме
(4) vano-ekt, что мешает сделать на тех же CMS сдедать по кнопке/полю post-запрос с id-заказа и получить только данные по одному заказу? Какие тонны строк? При чем здесь ajax ? зачем тут асинхронность?
6. Ivan Khorkov (vano-ekt) 911 14.08.15 14:22 Сейчас в теме
(5) а зачем тут перегрузка страницы и изменение серверного кода?
7. Ivan Khorkov (vano-ekt) 911 14.08.15 14:27 Сейчас в теме
задача - получить данные на клиенте из БД (100 байт)
решение №1 - выгрузить всю базу на сервер в страницы html(100мб)
решение №2 - переписать код сервера
???
8. Роман Озеряный (rozer) 191 14.08.15 15:04 Сейчас в теме
(7) vano-ekt, да не, все понятно - навигация и сортировка без перегрузки страницы это круть ) Но 1с программисту тогда нужно для реализации нормального сервиса знать весь набор html, css, js+jquery+нокаут. Т.е. разбираться в вебе круче чем в 1с. Уверен что тут 0,1% таких. А это собственно ресурс 1с прогов ... Ну да ладно вы молодец... Удачи!
9. Ivan Khorkov (vano-ekt) 911 14.08.15 15:10 Сейчас в теме
10. Allexey (alex_4x) 73 14.08.15 17:59 Сейчас в теме
Мне кажется полезная возможность. Но получается что до сервиса 1С будет доступ из внешней среды ? А вдруг дыры в безопасности обнаружатся ?
Как минимизировать взаимодействие с 1С и в то же время выдавать клиенту статусы его заказов, или например прайс лист ?
NewLifeMan; +1 Ответить 1
11. Роман Озеряный (rozer) 191 14.08.15 19:52 Сейчас в теме
(10) alex_4x, публиковать хттп сервис в промежуточной базе а уж из нее по dcom или вебсервисом брать из рабочей.
12. Александр Анисков (vandalsvq) 747 15.08.15 19:27 Сейчас в теме
(0), вопрос, почему нокаут, а не ангулар, у того функциональность поболее будет. Я не так знаком с нокаутом, но так пишут в сравнениях.
Вот кстати хорошая статья про сравнение возможностей - http://habrahabr.ru/post/187808/.

(8), (9) кстати можно весь функционал обернуть в 1С-овский код, который бы собирал готовые html, css, js. Тогда можно было бы серьезно понизить порог вхождения в разработку. Например: css можно написать используя возможности less, и тогда наружу выставить установку параметров, а остальное бы компилировалось на ходу. По поводу html и js, что там стоит или нет выставлять на управление - это уже внутрь смотреть надо. Получилось бы что-то вроде сервиса для создания онлайн отчетов с минимальными знаниями, хотя ограничений бы хватало, но для локальных сетей - вообще неплохо
13. Артур Хасанов (gigabyte_artur) 19.08.15 10:50 Сейчас в теме
Изящное решение, которое по сути лежало на поверхности. Хорошая демонстрация новых возможностей.
PS. Http-сервисы появились в версии 8.3.5: http://v8.1c.ru/o7/201312http/index.htm
14. Ivan Khorkov (vano-ekt) 911 19.08.15 11:08 Сейчас в теме
(13) а нативные ЗаписьJSON, ЧтениеJSON в 8.3.6 :)
15. Никита Грызлов (nixel) 143 22.08.15 15:13 Сейчас в теме
Я правильно понимаю, что вместо самописного http-сервиса можно было использовать REST? Или вся проблема в том, что Knockout.js заточен под именно такой формат входящих данных?
16. Ivan Khorkov (vano-ekt) 911 22.08.15 19:16 Сейчас в теме
(15) можно, через REST и срез цен получить, только стоит ли оно того? тону js-кода, думаю, проще заменить одним запросом.
17. Прогер Нуллов (progersan) 28.08.15 10:06 Сейчас в теме
(8) rozer, похоже я в этот процент вхожу. уже плюсик в карму )))
18. Александр Анисков (vandalsvq) 747 30.08.15 01:23 Сейчас в теме
(0) вопрос автору: что-то мне подсказывает, что стоит разместить данный запрос за пределы localhost (достаточно даже просто порт другой) и уже ничего не будет работать, ибо кросс-доменный запрос возникает. А там уже совсем другая история и проблема. Если использовать заголовки (см. CORS) то попадешь на вопрос передачи данных для авторизации при запросе.
Я собственно к чему пишу, сам не знаю как решить эту проблему. У меня предполагается что страничка может находится на домене "А", а 1С http сервис на домене "Б" и я никак сколько бы уже не бился не могу решить проблему. Решил с кросс-доменными, попал на авторизацию. Если есть идеи можно тут, или в ЛС. Заранее спасибо
19. Ivan Khorkov (vano-ekt) 911 06.09.15 09:54 Сейчас в теме
(18) в подсети 2 компа, домен - domain.com
web (linux, apache) - на нем лежат веб-страница, скрипты, стили
serv1c (win, apache, опубликован hs 1C)
80 порт снаружи перенаправлен на web:80
8081 снаружи перенаправлен на serv1c:80
в скрипте в $ajax() указываем url:domain.com:8081/ut/hs/price
в таком виде работал прием заказов на демо-сервере в одной публикации
20. Алексей Шачнев (saa@kuzov.org) 04.04.17 12:18 Сейчас в теме
(18)
Почти 2 года прошло, а проблема все еще актуальна.
У меня и кросс-домен, и http-сервис в 1С закрыт basic-аутентификацией.

А хочется чтобы пользователь вводил данные в поля моей формы.

Пока что решено через промежуточный самописный прокси-сервер (С#), но решение видится некрасивым.

Вы смогли что-то нарыть за это время?
Оставьте свое сообщение