使用步驟：在后台首頁index.html下引入layui.js和layui.css
<script type="text/javascript" src="layui-v2.4.5/layui/layui.all.js"></script>
然后在html下寫以下腳本
<script>
layui.use("options",function(){});
</script>
第一個參數是一個數組，是使用哪些模塊，例如,['form','table','element']
第二個參數是執行的函數
使用layui常用組件：快速布局，導航，面包屑導航，datatable（數據表格），富文本編輯器
例：在導航標簽上綁定一個函數
var getUserList = function(){ $("#content").html("<table id='user-table' lay-filter='user'></table>");
var table = layui.table;
table.render({ elem:'#user-table',
url:'/manage/user/testApi.do',
height:315,
page:true,
limit:5,
cols:[[ {field:'id',width:80,sort:true,title:'ID'},
{field:'username',width:80,title:'用戶名'},
{field:'password',width:80,title:'密碼'},
{field:'tel',width:80,title:'性別'},
{field:'nickname',width:80,title:'昵稱'},
{field:'head',width:150,title:'頭像'},
{field:'question',width:80,title:'問題'},
{field:'answer',width:80,title:'答案'},
{field:'role',width:80,title:'角色'},
{field:'createTime',width:100,title:'創建時間'},
{field:'updateTime',width:100,title:'更新時間'},
{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} ]],
response: { statusName: 'status' //數據狀態的字段名稱，默認：code
,statusCode: 0 //成功的狀態碼，默認：0
,msgName: 'hint' //狀態信息的字段名稱，默認：msg
,countName: 'total' //數據總數的字段名稱，默認：count
,dataName: 'data' //數據列表的字段名稱，默認：data
} });
table.on('tool(user)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data; //獲得當前行數據
var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
var tr = obj.tr; //獲得當前行 tr 的DOM對象
if(layEvent === 'detail'){ //查看
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(layEvent === 'del'){ //刪除
layer.confirm('真的刪除行么', function(index){ obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
layer.close(index);
//向服務端發送刪除指令
});
} else if(layEvent === 'edit'){ //編輯
//do something
//同步更新緩存對應的值
obj.update({ username: '123'
,title: 'xxx'
});
} });
};