前面已经搭建好了ssm框架了，这一章节就写一下员工的crud了，都是一步步来操作，前台页面使用的Bootstrap来操作。如果idea中搭建ssm不会的可以去看一下《idea-ssm-crud项目实战（二）》好了现在开始了。
最终效果：
使用bootstrap布局很简单，使用bootstrap的栅格系统、按钮、表格以及分页插件就好了。
这个布局很简单了就是分为上中下3行就可以了，这个直接使用bootstrap的栅格系统，由于这个很简单直接在代码中写上注释.
首先使用bootstrap的栅格系统https://v3.bootcss.com/css/#grid，如图
看代码
class="container"> <%--按钮--%> <div class="row"> <%--站4格偏移8格--%> <div class="col-md-4 col-md-offset-8"> div> div> <%--内容--%> <div class="row"> <div class="col-md-12"> div> div> <%--分页--%> <div class="row"> <%--显示前面--%> <div class="col-md-6"> div> <%--分页显示--%> <div class="col-md-6"> div> div> div>
以上代码很简单了，就是分为了上中下3行，现在开始填代码了。
1.在按钮注释的div中添加一个按钮，这个按钮也在bootstrap官方文档中找如图：
找到自己觉得合适的按钮然后复制代码到按钮的div部分
<%--站4格偏移8格--%><div class="col-md-4 col-md-offset-8"> <button type="button" class="btn btn-primary">添加button>div>
声明一下栅格系统是宽度总共是12个格子,现在来解释一下col-md-4 clo-md-offset-8。
这2个样式是该div占4个格子，偏移8个格子，也就是说从第五个格子开始占位。
2.在内容的div中添加一个表格，这个按钮也在bootstrap官方文档中找如图：
在内容区域直接输入以下代码,由于表格的tbody区域都是使用ajax来加载的所以只需要一个table的架子即可。
class="table table-hover"> <thead> <tr> <th>员工IDth> <th>员工名称th> <th>员工性别th> <th>员工邮箱th> <th>所属部门th> <th>操作th> tr> thead> tbody></table>
3.分页显示位置填上分页插件的代码，这个分页插件也在bootstrap官方文档中找如图：
直接复制以上代码到分页显示的div就可以了，这里都需要使用ajax来获取真实数据来加载所以就先不粘贴了。好了差不多这里已经布局玩了，添加后续在加。
这个查询员工所有数据上一章节已经测试通过了，这里就不再赘述了，现在稍微改造几个地方。
1.为了spring结构更加清晰，将applicationContext.xml分为2个文件，一个是applicationContext-dao.xml和applicationContext-service.xml,代码几乎都没有改变，具体查看github源码。
2.所有ajax返回数据都应该为json格式返回，这样有利于其它平台调用，为了使用返回json方便，统一创建一个message类来返回。
message类代码：
public class Message { /** * code=200成功代码，其它代码可以自定义 */ private int code; /** * 表示成功还是错误 */ private boolean isSuccess; /** * 返回信息 */ private String msg; /** * 返回前台数据源 */ private Mapmaps = new HashMap<>(); getter和setter省略....... /** * 成功返回 * @return */ public static Message getSuccess() { Message message = new Message(); message.setCode(200); message.isSuccess = true; message.setMsg("操作成功"); return message; } /** * 错误返回 * @return */ public static Message getError() { Message message = new Message(); message.setCode(100); message.isSuccess = false; message.setMsg("操作失败"); return message; } /** * 数据源添加数据 * @param key * @param value * @return */ public Message addAttribute(String key,Object value) { maps.put(key,value); return this; }}好了现在可以写前后台交互的代码了，前台使用ajax交互后台的/employyee/list对应的控制器方法。
1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数
2.首先需要在页面加载之后加载数据需要使用到$(function(){});
查看前端js代码
<script type="text/javascript"> /** * 1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数 * 2.首先需要在页面加载之后加载数据需要使用到$(function(){}); */ $(function(){ //默认获取第一页 pageload(1); }); function pageload(pageIndex) { $.ajax({ url:"${pagePath}/employee/list", data:{ pageIndex : pageIndex, time : new Date().getDate() }, type:"GET", success : function (result) { console.log(result) } }); }script>控制器代码
@RequestMapping("/list") @ResponseBody public Message list(@RequestParam(value = "pageIndex",defaultValue = "1") Integer pageIndex) throws Exception { PageHelper.startPage(pageIndex, pageSize); Listemployees = employeeService.findALL(null); //用PageInfo对结果进行包装,每次连续显示为5页 PageInfopageInfo = new PageInfo<>(employees,5); return Message.getSuccess().addAttribute("pageInfo",pageInfo); }web.xml的配置就不用多说了，如果需要的可以直接github地址上查看代码,现在运行结果。
从上图可以看出数据获取到前端了,并且非常详细，分页信息，数据源，多少页，多少记录数等等都显示出来了。现在就直接可以拼接前端的标签代码了。
前台页面显示需要以下几个方法：
1.显示table内容的方法
function loadTable(employeeList) { //给table加上一个id，这里好获取对象 var employeeTable = $("#employeeTable"); $.each(employeeList,function (index, item) { var tr = $(""); //将下面的td全部都添加到tr中 $("").append(item.empId).appendTo(tr); $("").append(item.empName).appendTo(tr); $("").append(item.gender).appendTo(tr); $("").append(item.email).appendTo(tr); $("").append(item.department.deptName).appendTo(tr); //创建修改和删除按钮 var btn_eidt_employee = $('修改'); var btn_del_employee = $('删除'); $("").append(btn_eidt_employee).append(btn_del_employee).appendTo(tr); //在将tr添加到tbody中 employeeTable.append(tr); }); }2.显示分页的方法，我将分页绑定插件的方法分拆了多个方法，上一页，下一页，首页，尾页，和中间页码的一共5个方法
/** * 显示分页详细信息 */function page_info_show(pageInfo) { var page_info_area = $("#page_info_area"); page_info_area.empty(); page_info_area.append("当前"+pageInfo.pageNum+"页,总"+ pageInfo.pages+"页,总"+ pageInfo.total+"条记录"); pages = pageInfo.pages; pageIndex = pageInfo.pageNum;}/** * 分页方法 */function paginationFun(pageInfo) { //添加时都需要先清空一下 pagination.empty(); //首页 firstPageFun(); //将上一页控件添加到分页ul中 previousPageFun(); //分页插件中间部分 page_lis(pageInfo); //下一页 nextPageFun(); //尾页 lastPageFun();}最后的显示结果
每个页码绑定事件就很简单了。在写pageload方法当时就只是传入一个pageIndex页码就可以了，现在也就是只需要为页号绑定个事件。
现在就需要给页码的li上加上class="page_li" pageIndex="'+item+'"，为了后期绑定事件使用，在用jquery事件绑定一下就可以了，看代码。
pagination = $("#pagination");/** * 页码绑定事件 */pagination.on("click",".page_li",function () { pageIndex = $(this).attr("pageIndex"); pageload(pageIndex);});首页，尾页，上一页，下一页也类似，看看代码吧。
/** * 首页事件绑定 */pagination.on("click",".firstPage",function () { pageload(1);});/** * 上一页 */pagination.on("click",".previous",function () { if(pageIndex > 1) { pageload(pageIndex - 1); }});/** * 下一页 */pagination.on("click",".next",function () { if(pageIndex < pages) { pageload(pageIndex + 1); }});/** * 尾页事件绑定 */pagination.on("click",".lastPage",function () { pageload(pages);});
还没有评论，来说两句吧...