JFormParser

Плагин JFormParser: генерирует страницы на основе структуры JSON, что позволяет разработчикам серверной части сосредоточиться на разработке внутренних сервисов и интерфейсов, а не на создании фронтенда. Цель — освободить разработчиков серверной части от необходимости уделять внимание разработке фронтенд-части. На начальном этапе плагин поддерживает только элементы форм, но в будущем планируется добавить поддержку других элементов страниц.

Зависимости JFormParser:

• В настоящее время основными зависимостями являются популярные компоненты Bootstrap CSS framework и jQuery.
• Идея разработки заключается в снижении зависимости от различных плагинов и обеспечении возможности замены элементов, созданных с помощью других плагинов, для повышения разнообразия и гибкости дизайна.

Компоненты:

— bootstrap: v3.3.5; — jQuery: 1.9.1; — layer: v2.2; — WdatePicker: v4.8; — jQWidgets: v3.9.1.

Элементы JFormParser:

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

1. Editor (богатый текстовый плагин): используется ewebeditor.
2. Textarea (многострочное текстовое поле): многострочное текстовое поле.
3. Select (выпадающий список): содержит данные, которые загружаются через удалённый URL.
4. Panel (панель): компонент контейнера.
5. Grid (таблица): таблица без особого значения, просто для организации макета страницы, как и панель, является компонентом контейнера.
6. CheckboxGroup (группа флажков): группа компонентов флажков.
7. RadioGroup (группа радиокнопок): группа радиокнопок.
8. Button (кнопка): обычные кнопки, кнопки отправки, возврата и т. д.
9. ButtonGroup (группа кнопок): контейнер, содержащий группу кнопок.
10. Datagrid (компонент отображения таблицы): зависит от компонента запроса метаданных.
11. Fileupload (загрузка файлов): загрузка файлов.
12. Images (компонент загрузки изображений): компонент загрузки изображений.
13. BMap (компоненты сбора координат по карте): зависит от карты Baidu JS (http://lbsyun.baidu.com/index.php?title=jspopular).
14. Text (основное текстовое поле): текстовое поле, которое является мощным элементом формы. JFormParser в настоящее время поддерживает несколько типов данных для текстовых полей:
    • normal: обычное текстовое поле без специальных эффектов;
    • email: поддерживает ввод только электронной почты и автоматически проверяет другие форматы данных;
    • number: целое число, поддерживает только ввод целых чисел и автоматически проверяет другие форматы данных;
    • decimal: десятичное число;
    • datetime: тип даты, в настоящее время использует плагин My97DatePicker для дат, поэтому зависит от файла WdatePicker.js.

Шаблоны страниц JFormParser: В настоящее время существует два основных шаблона: шаблон списка и шаблон формы FORM.

Пример структуры тела JSON для шаблона списка:

{ "component_name": "scenic_form", "component_title": "景区 form", "template_type": "list", "navs_title": "Управление стандартизацией туристических объектов > Управление туристическими объектами > Список туристических объектов", "navs": [ { "title": "Стандартизация туристических объектов", "icon": "", "url": "" }, { "title": "Туристические объекты", "icon": "" }, { "title": "Список туристических объектов", "icon": "" } ], "resource_name": "scenic_info", "submit_url": "/cms/template/submit.htm", "childrens": [ { "element_type": "panel", "element_title": "Поиск туристического объекта", "whether_header": false, "whether_border": false, "container": true, "childrens": [ { "element_type": "datagrid", "element_title": "Поиск туристического объекта", "is_remote": true, "is_operate": true, "operate_title": "Операция", "operate_buttons": [ { "element_type": "button", "type": "edit", "element_title": "Редактировать", "remote_url": "/cms/template/template_form.htm", "params": { "url": "/json/baotou/scenic/scenic_form.json" } }, { "element_type": "button", "type": "delete", "element_title": "Изображение", "remote_url": "/cms/template/delete.htm" }, { "element_type": "button", "type": "delete", "element_title": "Видео", "remote_url": "/cms/template/delete.htm" }, { "element_type": "button", "type": "delete", "element_title": "Аудио", "remote_url": "/cms/template/delete.htm" }, { "element_type": "button", "type": "delete", "element_title": "Удалить", "remote_url": "/cms/template/delete.htm" } ], "pagination": true, "remote_url": "/cms/template/get_remote_list.htm", "columns": [ { "field": "title", "title": "Название туристического объекта" }, { "field": "level", "title": "Уровень туристического объекта" }, { "field": "lawyer", "title": "Представитель юридического лица" }, { "field": "person_liable", "title": "Ответственное лицо" }, { "field": "phone", "title": "Номер телефона" }, { "field": "tel", "title": "Телефон" }, { "field": "fax", "title": "Факс" }, { "field": "approve_date", "title": "Дата утверждения" }, { "field": "approve_date", "title": "Географическое положение" } ] } ] } ] } Элемент «Название»: Группа операционных кнопок.

Выравнивание: Левое.

«Дети» (childrens):

• Тип элемента: Кнопка.
  • Тип ссылки: Ссылка.
    • Название элемента: Добавить район.
    • Удалённый URL: /cms/template/template_form.htm.
    • Параметры:
      • URL: /json/baotou/scenic/scenic_form.json.
• Тип элемента: Кнопка.
  • Тип ссылки: Ссылка.
  • Название элемента: Удалить.
  • Удалённый URL: /cms/template/template_form.htm. * Параметры:
    • URL: /json/baotou/scenic/scenic_form.json.
• Тип элемента: Кнопка.
  • Тип ссылки: Ссылка.
  • Название элемента: Импортировать.
  • Удалённый URL: /cms/template/template_form.htm. * Параметры:
    • URL: /json/baotou/scenic/scenic_form.json.
• Тип элемента: Кнопка.
  • Тип ссылки: Ссылка.
  • Название элемента: Экспортировать.
  • Удалённый URL: /cms/template/template_form.htm. * Параметры:
    • URL: /json/baotou/scenic/scenic_form.json.

Эффект:

![Файл списка шаблонов][1]

Шаблон формы

Пример структуры JSON:

{ "component_name": "trips_form", "component_title": "Форма поездки", "template_type": "form", "navs_title": "Управление информацией > Управление поездками > Обслуживание поездок", "navs": [ { "title": "Управление информацией", "icon": "", "url": "" }, { "title": "Управление поездками", "icon": "" }, { "title": "Обслуживание поездок", "icon": "" } ], "resource_name": "trips_info", "submit_url": "/cms/template/submit.htm", "init_url": "/cms/template/get_form_data.htm", "childrens": [ { "element_type": "panel", "element_title": "Основная информация", "container": true, "childrens": [ { "element_type": "grid", "cols": 3, "rows": "3", "childrens": [ { "element_type": "text", "element_title": "Название поездки", "meta_column": "title", "is_required": true }, { "element_type": "select", "element_title": "Тип поездки", "is_required": true, "meta_column": "type", "is_fk": true, "fk_resource_name": "scenic_spot_info", "fk_meta_column": "id", "fk_meta_column_show": "title", "data": [ { "text": "Транспорт", "value": "jt" }, { "text": "Конференция", "value": "hy" }, { "text": "Проживание", "value": "rz" }, { "text": "Питание", "value": "yc" }, { "text": "Исследование", "value": "kc" } ], "is_remote": false, "remote_url": "" }, { "element_type": "text", "element_title": "Время начала", "meta_column": "start_time", "is_required": true }, { "element_type": "checkboxGroup", "element_title": "Участвующие группы", "is_required": true, "meta_column": "team_infos", "fk_resource_name": "team_info", "fk_meta_column": "id", "fk_meta_column_show": "name", "is_remote": true, "width": "100%", "remote_url": "/cms/template/get_remote_data.htm" } ] } ] }, { "element_type": "panel", "element_title": "Подробности", "container": true, "childrens": [ { "element_type": "editor", "meta_column": "intro", "width": "400px", "height": "300px" } ] }, { "element_type": "buttonGroup", "element_title": "", "align": "center", "childrens": [ { "element_type": "button", "type": "submit", "element_title": "Отправить", "remote_url": "/cms/template/submit.htm", "width": "80px", "action_url": "/cms/template/template_list.htm", "params": { "url": "/json/shengsi/trips/trips_list.json" } }, { "element_type": "button", "type": "link", "element_title": "Вернуться", "remote_url": "/cms/template/template_list.htm", "params": { "url": "/json/shengsi/trips/trips_list.json" }, "width": "80px" } ] } ] }

Эффект шаблона:

![Эффект шаблона][2] Данный текст представляет собой ссылки на изображения, для его перевода необходима дополнительная информация.