淺析AmazeUI 框架下結合 datatables表格和layui組件開發web后臺界面制作過程

梁鈞儒

【摘要】Amaze UI采用國際最前沿的“組件式開發”以及“移動優先”的設計理念，基于其豐富的組件，開發者可通過簡單拼裝即可快速構建出HTML5網頁應用。Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能，具有分頁，即時搜索和排序。layui是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。非常適合界面的快速開發。layui更多是面向于后端開發者，所以在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。

【關鍵詞】AmazeUIDatatables layui web后臺界面

有了bootstrap，為什么還要做amaze ui？

一般來說，bootstrap只是對HTML增加了CSS進行美化。而amaze ui則在bootstrap美化的基礎上，主要增加JS添加了動態，以及更多樣式。

搭建后臺界面框架

用AmazeUI 框架，制作網頁風格，可以用AmazeUI提供的組件工具，一點點拼接起來，也可以引入第三方jQuery插件，比如引入基于swiper的兩邊疊加輪播圖，引入文件規則，是先引入第三方的，再引入AmazeUI的。對于界面風格要求比較間潔可以引入 AmazeUI模板，在AmazeUI模板的基礎上，做二次界面開發。

使用方法

將amaze ui對應的zip下載，解壓后查看該文件夾下的問assets文件，assets文件夾下又包括css、js文件夾，這兩個文件就是amaze ui中封裝，可供用用戶直接使用的樣式，把上述提到的css、js文件夾拷貝到web項目的WebRoot下，在項目中對樣式進行使用。<！DOCTYPE html>

aaa

datatables安裝

Amazeui也有表格樣式，但datatables，具有分頁，即時搜索和排序，可以減輕后臺開發人員的工作量。在你的項目中使用 DataTables，只需要引入三個文件即可，jQuery庫，一個DT的核心js文件和一個DT的css文件，添加如下 HTML 代碼，并初始化Datatables。

$（document）.ready（ function （） {

$（'#table_id_example'）.DataTable（）;

} ）;

layui安裝

獲得 layui 后，將其完整地部署到你的項目目錄（或靜態資源服務器），你只需要引入下述兩個文件：

我們用到layer 只是作為 layui 的一個彈層模塊，在 layui 中使用 layer

layui.use（'layer'， function（）{

var layer = layui.layer;

layer.msg（'layui'）;

}）;

參考文獻：

[1]單頁Web應用：JavaScript從前端到后端 . 人民郵電出版社.米可夫斯基 （Michael S. Mikowski）/鮑威爾 （Josh C.?Powell）.2014.

[2]高性能網站建設指南 .電子工業出版社.（美國）（SteveSounders）桑德斯.2008.

[3]CSS權威指南 .中國電力出版社.美 Eric A.Meyer.2007.

[4]HTML 5用戶指南 .機械工業出版社.（美）Bruce Lawson?Remy Sharp.2011.