上一篇文章介绍了配置文件以及目录的结构，下面介绍前端的代码
首先是前端页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
//layui的样式表，直接引入用就可以啦，样式详细的请去layui的官网看
<link rel="stylesheet" href="js/layui/css/layui.css" />
<style type="text/css">
*{
padding:0px;
margin:0px;
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<a>首页</a>
</li>
<li class="layui-nav-item">
<a>最新活动</a>
<dl class="layui-nav-child">
<dd>
<a href="">活动1</a>
</dd>
<dd>
<a href="">活动2</a>
</dd>
<dd>
<a href="">活动3</a>
</dd>
<dd>
<a href="">活动4</a>
</dd>
<dd>
<a href="">活动5</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">商品展示</a>
</li>
<li class="layui-nav-item">
<a href="">关于我们</a>
</li>
<li class="layui-nav-item">
<a href="">联系我们</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="js/layui/images/face/0.gif" class="layui-nav-img"> admin
</a>
<dl class="layui-nav-child">
<dd>
<a href="">基本资料</a>
</dd>
<dd>
<a href="">安全设置</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="">退出</a>
</li>
</ul>
</div>
<div class=" layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item">
<a>对象管理</a>
<dl class="layui-nav-child">
<dd>
<a id="userManage" >用户管理</a>
</dd>
<dd>
<a id="provinceCity">省市信息</a>
</dd>
<dd>
<a href="">列表3</a>
</dd>
<dd>
<a href="">列表4</a>
</dd>
<dd>
<a href="">列表5</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a>云计算</a>
<dl class="layui-nav-child">
<dd>
<a href="">表单1</a>
</dd>
<dd>
<a href="">表单2</a>
</dd>
<dd>
<a href="">表单3</a>
</dd>
<dd>
<a href="">表单4</a>
</dd>
<dd>
<a href="">表单5</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a>大数据</a>
<dl class="layui-nav-child">
<dd>
<a href="">表单1</a>
</dd>
<dd>
<a href="">表单2</a>
</dd>
<dd>
<a href="">表单3</a>
</dd>
<dd>
<a href="">表单4</a>
</dd>
<dd>
<a href="">表单5</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a>机器学习</a>
<dl class="layui-nav-child">
<dd>
<a href="">表单1</a>
</dd>
<dd>
<a href="">表单2</a>
</dd>
<dd>
<a href="">表单3</a>
</dd>
<dd>
<a href="">表单4</a>
</dd>
<dd>
<a href="">表单5</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body "style="padding: 0;margin: 0;overflow: hidden;">
<iframe src="default.jsp" height="100%" width="100%" id="iframe"></iframe>
</div>
<div class="layui-footer" align="center">
copyright © 版权所有
</div>
</div>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<script>
//模块化引用layui组件，但是我上面直接引用了全部
layui.use(['layer', 'element','jquery'], function() {
var layer = layui.layer;
var element = layui.element;
var $=layui.$;
element.init();
//下面的代码懂jquery的就很好说啦
//点击usermanage按钮动态改变iframe的src，也就是跳转页面显示用户的相关信息
$("#userManage").click(function (){
$("#iframe").attr("src","sysUserList.jsp");
});
//下面的是跳转到使用treetable做的一个树形table，下次详细的介绍下简单的用法。
$("#provinceCity").click(function(){
$("#iframe").attr("src","provinceAndCity.jsp");
});
});
</script>
</body>
</html>
页面点击完用户管理之后是这样的
还算可以吧，不是特别的丑，能看是吧。
下面介绍如何使用layui的数据表格。尽管官方文件已经做出了使用说明，但是我读起来的时候，有些吃力，所以转成我糙话
<div id="usermenu" class="layui-border-box" align="center" style="margin-top:25px">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="userName" placeholder="输入用户名" autocomplete="off" class="layui-input" id="txtUserName">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">登录名</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="loginName" placeholder="输入登录名" autocomplete="off" class="layui-input" id="txtLoginName">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input id="btnGet" type="button" value="查询" class="layui-btn" autocomplete="off"/>
</div>
</div>
<div class="layui-btn-container" style="float: right;">
<button class="layui-btn" id="btnAdd">
<i class="layui-icon" ></i> 添加
</button>
<button class="layui-btn layui-btn-danger" id="btnDel">
<i class="layui-icon" ></i> 删除
</button>
<button class="layui-btn layui-btn-normal" id="btnImport">
<i class="layui-icon"></i> 导入
</button>
<button class="layui-btn layui-btn-normal" id="btnExport">
<i class="layui-icon"></i> 导出
</button>
</div>
</div>
</div>
<table id="dataTbl" lay-filter="tblFilter" class="layui-table"></table>
这是使用layui的简单样式做的页面，数据表格绑定数据的代码如下：
//模块化的使用layui的组件，通过使用use方法
layui.use(['layer', 'element','table','jquery'], function() {
var layer = layui.layer;
var element = layui.element;
var table = layui.table;
var $=layui.$;
element.init();
//渲染数据表格绑定数据
table.render({
elem : '#dataTbl',//要绑定的表格的id 我的是dataTbl
skin: 'row',//皮肤美化，隔行显示不同的颜色
even: true,
url : '/demo/sysUser/getSysUserPageBean.do',//请求数据的路径，我是使用ssm框架做的，由controller向前端返回数据
page : true,//是否开启分页，如果开启，那么他会自动通过get的方式传两个参数过去，一个是page表示当前页数，一个是limit表示每页显示数据记录的数量
limits: [3, 5, 10],//前端每页显示记录数量的选择，每页可以选择显示3或5或10条记录
limit: 5,//设置默认每页显示记录的数量
cols : [ [ {type: 'checkbox', fixed: 'left'},//为表格添加一列checkbox
{type: 'numbers', title:'序号', width:50},//为表格添加一列序号列
{field : 'id', title:'Id', width:50, sort:true, align:'center'},//field表示后端传递的数据名字，title表示表格当前列显示的列名
{field : 'loginName', title : '登录名', width : 150, align:'center'}, //width表示当前列的宽度，一般我们都是将可以确定长度列的宽度设置为固定值，比如电话号就是11位，名字最多4个汉字，我们为这些设定指定的宽度，将不确定的不设置，table会自动设置宽度，最好是设置(列数-1)列
{field : 'userName', title : '用户名', width : 150, align:'center'},
{field : 'email', title : '电子邮箱', align:'center'},//align是设置居中。
{field : 'telephone', title : '手机号码', width : 150, align:'center'},
{field : 'phone', title : '电话号码', width:150, align:'center'},
{title : '操作', width:150, align:'center', toolbar:'#opera'},
] ],//toobar是layui数据表格的一个可以根据数据记录数量动态生成对应的工具栏，这个工具栏用的就是前段代码里script的id所包裹的html代码指定的东西，我指定的是两个input标签也就是两个按钮。一个是编辑一个是删除
parseData:function(map) {//格式绑定后端传递过来的数据，我使用的是map对象，为了符合数据表格接受数据的样式，所以这么做的
return {
"code":map["code"],
"msg":"",
"count":map["count"],
data:map["data"]//这个data才是表格所需要的数据，里面其实是一个list集合，存放的是n条数据记录。
}
}
});
这样就完成了前端数据表格的数据绑定，然后其他的功能编辑更新删除导入导出等功能我明天我会继续更新的，今天太晚了，有需要的也可以直接私信我。
下面放一下后端contoller返回的数据格式：
/**
* 分页查询.
* @param sysUserBean 分页的实体.
* @return 数据表格所需要的数据.
*/
@RequestMapping("/getSysUserPageBean")
@ResponseBody
public Object getSysUserPageBean(SysUserBean sysUserBean) {
return sysUserService.getSysUserBeanByPage(sysUserBean);
}
上面是controller层代码
下面是Service层代码
/** {@inheritDoc} */
@Override
public Object getSysUserBeanByPage(SysUserBean sysUserBean) {
HashMap<String, Object> map = new HashMap<String, Object>();
Integer currentPage = sysUserBean.getPage();//获得当前页
Integer limit = sysUserBean.getLimit();//获取每页显示记录的数量
Integer count = getCountByUserNameAndLoginName(sysUserBean);//查询符合条件的记录数量。用来在前端显示记录的数量
sysUserBean.setPage((currentPage - 1) * limit);
map.put("code", 0);
map.put("msg", "");
map.put("count", count);
map.put("data", sysUserDao.getSysUserBeanByPage(sysUserBean));//dao层查询返回list数据
map.put("currentPage", currentPage);//返回当前页
map.put("pageSize", limit);//每页显示记录的数量
return map;
}
//通过map将数据表格需要的数据格式返回给他，前端将数据进行格式化，也就是parseData函数所做的。这样简单的数据绑定就OK了
sysUserBean集成了PageBean类，PageBean的属性如下
/**
* 当前页数.
*/
private Integer page;
/**
* 每页显示的记录数.
*/
private Integer limit;
/**
* 总记录数.
*/
private Integer totalCount;
/**
* 总页数.
*/
private Integer totalPage;
就这几个通用的属性，所有的javabean都可以继承他。
sysUserbean代码：
/**
* sysUser实体对象.
*/
public class SysUserBean extends PageBean {
/**
* id.
*/
private Long id;
/**
* 用户名.
*/
private String userName;
/**
* 登录名.
*/
private String loginName;
/**
* 电子邮箱.
*/
private String email;
/**
* 座机电话.
*/
private String telephone;
/**
* 手机电话.
*/
private String phone;
}
get和set方法就不放上去了
这样一个简单的数据表格绑定数据就做好了，刚刚开始写博客，也不知道如何去写，希望前辈们多多指教，也希望在前辈的指导下进步，有错误之处，请大家予以纠正.