HG框架簡介

HG-Layui-UI框架，是基于layui最新版UI搭建的一套通用后臺管理框架，借鑒了市面上各大主流框架風格，采用iframe標簽頁實作，保留了傳統開發模式的簡單實用性，為快速開發減少重復代碼量，框架內部admin.js中封裝了常用的組件，包括彈窗提示、日期組件、表單監聽、表單驗證、資料表格組件、樹形組件和request獲取資料方法等，

2019-12-19更新

修改官方Layui.tree樹形組件原始碼，增加懶加載模式，data引數lazy: true 開啟子節點懶加載方式，需要配合spread事件使用，
增加spread事件，lazy為true時，展開節點時觸發該事件，obj.elem:節點元素，obj.state:狀態open/close，obj.data:節點資料，
增加tree.lazytree(treeid, elem, children)方法，懶加載子節點資料展示，
增加hg.table.datatable(layid, 'resize')方法，重置表格大小，
增加hg.ontab(layfilter, _callback)方法，監聽Tab切換事件，
增加datatable實體化物件擴展方法，table.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，LOGO和標題展示，頂部一級選單展示，
增加左側選單layui-left-nav，支持3級選單，默認手風琴展開模式，
增加hg.add_tab、hg.del_tab、hg.add_lay_tab方法，用來管理tabs頁，
增加頂部選單與左側選單聯動效果，切換tabs頁時自動定位當前選單項，
增加tabs頁選項卡操作，重繪當前頁面，關閉其他頁面，關閉全部頁面，
增加側邊伸縮按鈕，在選項卡欄最左側，改變左側選單展示狀態，
參考jquery-1.9.1插件，依賴第三方jquery插件時用到，
參考jquery.scrollBar.js插件，美化滾動條樣式，，
參考jquery.NProgress.js插件，請求進度條樣式，iframe頁面加載時顯示，
修改layui默認樣式顏色，默認主題以藍色為主，
增加hg.msg(content, title)方法，彈出提示框，
增加hg.confirm(content, title, callbackmething)方法，彈出詢問框，
增加hg.open(title, url, w, h, full)方法，打開彈出層，
增加hg.close()方法，關閉彈出層，
增加hg.base_reload()方法，重繪父視窗，
增加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自定義事件，
增加datatable，監聽行工具事件，操作行lay-event中定義值為觸發函式名，
增加hg.table.printall(cols, data)方法，列印任意資料，defaultToolbar='printall'，
增加hg.table.exportfile(layid, data)方法，匯出任意資料，defaultToolbar='exportsall'，
增加hg.table.datatablestatus，狀態屬性集合，
修改datatable，支持easyui資料格式決議方式，包括分頁引數page和rows，
修改datatable，工具條toolbar引數添加handler: function (obj, row)匿名函式方式，
增加hg.table.datatable(layid, 'reload', where)方法，多載表格，
增加hg.table.getSelected(layid, 'getSelected')方法，獲取選中行，
添加lay-height全屏高度設定屬性，lay-height='full'，'full'='full-200'，

基于layui組件封裝的一套后臺管理ui框架，永久開源，

請勿將模版傳入任何第三方素材庫

開源協議

MIT License

原始碼

GitHub：https://github.com/h-gxi/hg-layui-admin-ui
碼云：https://gitee.com/h_gxi/hg-layui-admin-ui.git

官方演示地址：http://h_gxi.gitee.io/hg-layui-admin-ui/

歡迎star~ 模板將不定期更新，持續完善功能，發現BUG，請大神PR一下，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/91971.html

標籤：Html/Css

上一篇：我的前端博客

下一篇：css position:sticky的嘗試