使用步骤：在后台首页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'
});
} });
};