Введение в фреймворк HG

Фреймворк HG-Layui-UI основан на последней версии UI layui и представляет собой универсальный фреймворк управления backend, который использует iframe-теги для реализации. Он включает в себя стильные решения, взятые с различных популярных фреймворков, и сохраняет простоту и практичность традиционной модели разработки.

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

Обновление от 10 августа 2021 года

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

Обновление от 10 августа 2020 года

• Устранено ограничение совместимости 360-браузера с режимом IE.
• В toolbar hg.datatable добавлено поле class для возможности настройки внешнего вида кнопок.
• Добавлен пример использования сторонних компонентов dtree и treeTable.## Обновление от 23 марта 2020 года
• Выпущена версия 1.1 фреймворка HG-Layui-UI.
• Удалён старый набор иконок и заменён на Font Awesome V4.7.
• Оптимизированы страницы стилей, все иконки были заменены новыми.
• Добавлена возможность изменения темы в конфигурационном файле skin.json, где можно установить цвета и размер шрифта; текущий размер шрифта может быть изменён только для текста tabs.
• Устранена проблема "тусклого" экрана при использовании Firefox для изменения темы.## Обновление от 24 февраля 2020 года
• Добавлены пользовательские события hg-event для клика.
• Добавлен полноэкранный режим fullscreen, совместимый с hg-event.
• Устранена проблема использования полноэкранного режима в iframe.
• Устранена проблема конфликта lay-height='full' с layui-col.
• Добавлен lay-height='auto', который позволяет вычислять высоту относительно следующего элемента.
• Устранена проблема некорректного отображения иконки выхода из полноэкранного режима после нажатия клавиши Esc.
• Добавлено подсвечивание выбранного узла в дереве данных, когда отключены флажки выбора нескольких узлов; также добавлен доступ к выбранным узлам через tree.getChecked().
• Добавлено автоматическое инициализирование компонента формы при загрузке admin.js.
• Добавлено прослушивание событий инструментов строки в datatable, которое теперь возвращает параметры obj и field, где field — это id текущего узла.
• Добавлено событие одиночного клика на строку в datatable, вызываемое через onrowclick(функция).## Обновление от 3 января 2020 года
• Устранена проблема неверного выравнивания ширины при использовании плагина скроллинга scrollBar.
• Добавлены кнопки прокрутки влево и вправо для tab-панелей.
• Изменены стили для малых экранов, чтобы список расширенных пунктов в левой панели содержал только иконки.
• При сворачивании/разворачивании левой панели отменяется действие сворачивания.
• Добавлена возможность загрузки заранее известных данных в hg.table.datatable, где url-параметры могут быть прямым массивом объектов.
• Добавлен hg.msghide(content, time), который выводит полупрозрачное сообщение.
• Добавлен hg.load(callbackmething), который выводит загрузочное сообщение.
• Добавлена документация по использованию HG.

Обновление от 19 декабря 2019 года

• Изменено исходное код официального Layui.tree деревьев, добавлен режим ленивой загрузки, параметр data с ключом lazy: true включает ленивую загрузку дочерних узлов, требует использования события spread.
• Добавлено событие spread, при lazy: true событие вызывается при раскрытии узла, obj.elem: элемент узла, obj.state: состояние открыт/закрыт, obj.data: данные узла.
• Добавлен метод tree.lazytree(treeid, elem, children) для ленивой загрузки данных дочерних узлов.
• Добавлен метод hg.table.datatable(layid, 'resize') для перезапуска размера таблицы.
• Добавлен метод hg.ontab(layfilter, _callback) для прослушивания события переключения Tab.
• Добавлены расширенные методы экземпляра объекта datatable: table.````markdown getSelected() для получения выделенной строки, table.reload(where) для перезагрузки таблицы, table.resize() для изменения размера таблицы.
• Добавлен метод hg.tree.datatree(layid, data, showCheckbox, showLine, accordion, onlyIconControl, isJump) для базового компонента дерева.
• Добавлены события и методы экземпляра объекта datatree: onclick(), oncheck(), onspread(), getChecked(), setChecked(), reload().
• В событии spread() добавлен метод this.lazytree(data) для запуска ленивой загрузки дочерних узлов.

Обновление от 2019-11-01

• Внедрённая версия layui-v2.5.5.
• Добавлен основной макет страницы, состоящий из шапки layui-header, левой навигационной панели layui-left-nav и области содержимого layui-page-content.
• Добавлена шапка layui-header с отображением логотипа и заголовка, а также первичного меню.
• Добавлена левая навигационная панель layui-left-nav, поддерживающая до трёх уровней вложенности, с режимом "аккордеон".
• Добавлены методы hg.add_tab, hg.del_tab и hg.add_lay_tab для управления вкладками.
• Добавлена связь между верхним меню и левой навигационной панелью, позволяющая автоматически выделять текущий пункт меню при переходе между вкладками.
• Добавлены действия с вкладками: перезагрузка текущей страницы, закрытие других страниц, закрытие всех страниц.
• Добавлены кнопки расширения/сворачивания слева от панели вкладок, меняющие состояние левой навигационной панели.
• Внедрён jQuery v1.9.1, используемый как зависимость для сторонних плагинов.
• Внедрён плагин jquery.scrollbar.

Все необходимые исправления выполнены, сохранено исходное форматирование.js для оформления полос прокрутки, class="scrollBox".
* Внедрен плагин jQuery. NProgress.js для отображения прогресса запросов, используется при загрузке iframe.
* Изменены цвета по умолчанию layui, тема теперь основана на синих тонах.
* Добавлен метод hg.msg(content, title) для вывода сообщений.
* Добавлен метод hg.confirm(content, title, callbackMethod) для вывода диалоговых окон с подтверждением.
* Добавлен метод hg.open(title, url, w, h, full) для открытия модальных окон.
* Добавлен метод hg.close() для закрытия модальных окон.
* Добавлен метод hg.baseReload() для перезагрузки родительского окна.
* Добавлен метод hg.datetime(bTime, eTime, options) для выбора базового периода времени.
* Добавлен метод hg.datetime2(elem, type, min, max) для выбора составного периода времени.
* Добавлен метод hg.getdate(type, e) для получения даты и времени.
* Добавлен метод hg.request(url, data, type, contentType, dataType, async, funSuccess) для выполнения сетевых запросов.
* Добавлен метод hg.form.onsubmit(layFilter, _callback) для прослушивания событий отправки формы.
* Добавлен метод hg.form.onswitch(layFilter, _callback) для прослушивания событий переключения switch.
* Добавлен метод hg.form.verify(options) для создания пользовательских правил проверки формы.
* Добавлен метод hg.table.datatable(layId, title, url, where, cols, toolbar, page, height, defaultToolbar, totalRow) для создания таблицы данных.
* Добавлен метод hg.table.toolbaronclick(layId, index) для прослушивания событий кликов на toolbar.
* Добавлен метод hg.table.printAll(cols, data) для печати произвольных данных, defaultToolbar='printall'.exportfile(layid, data) для экспорта произвольных данных, defaultToolbar='exportall'. коллекция атрибутов состояния datatablestatus.
  * Изменение datatable для поддержки парсинга данных в формате easyui, включая параметры пагинации page и rows.
  * Изменение datatable с добавлением анонимной функции handler: function (obj, row) для параметра toolbar.
  * Добавление метода hg.table.datatable(layid, 'reload', where) для перезагрузки таблицы.
  * Добавление метода hg.table.getSelected(layid, 'getSelected') для получения выделенной строки.
  * Добавление свойства lay-height для установки полной высоты экрана, lay-height='full', 'full'='full-200'. ![](https://images.gitee.com/uploads/images/2019/1207/203434_c07033c1_1282578.png "Основной экран")Официальный адрес демо-версии: [http://hgxi.gitee.io/hg-layui-admin-ui/](http://hgxi.gitee.io/hg-layui-admin-ui/)