上一篇文章介紹了配置文件以及目錄的結構，下面介紹前端的代碼
首先是前端頁面：
<%@ 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方法就不放上去了
這樣一個簡單的數據表格綁定數據就做好了，剛剛開始寫博客，也不知道如何去寫，希望前輩們多多指教，也希望在前輩的指導下進步，有錯誤之處，請大家予以糾正.