[開源] 基於Layui組件封裝的後臺模版,HG-Layui-UI通用後臺管理框架V1.0版

HG框架簡介

HG-Layui-UI框架,是基於layui最新版UI搭建的一套通用後臺管理框架,借鑑了市面上各大主流框架風格,採用iframe標籤頁實現,保留了傳統開發模式的簡單實用性。 爲快速開發減小重複代碼量,框架內部admin.js中封裝了經常使用的組件,包括彈窗提示、日期組件、表單監聽、表單驗證、數據表格組件、樹形組件和request獲取數據方法等。html

 

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插件,美化滾動條樣式,class="scrollBox"。
  • 引用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 Licensejquery

源碼

GitHub:https://github.com/h-gxi/hg-layui-admin-ui (先佔個位置~)
碼雲:https://gitee.com/h_gxi/hg-layui-admin-ui.gitgit

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

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

原文出處:https://www.cnblogs.com/han1982/p/12003454.html網絡

相關文章
相關標籤/搜索