浅析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。

Column 1	Column 2
Row 1 Data 1	Row 1 Data 2
Row 2 Data 1	Row 2 Data 2

$（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.