SSM项目员工管理系统(2)页面布局和员工信息的两种展示方式

最新推荐文章于 2023-06-26 23:56:25 发布

置顶段子手小阿鑫

最新推荐文章于 2023-06-26 23:56:25 发布

阅读量4.3k

点赞数 1

分类专栏：练手小项目文章标签： ajax SSM

本文链接：https://blog.csdn.net/geekteamxin/article/details/80314147

版权

练手小项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、bootstrap和jquery搭建前端UI

1.bootstrap和jquery的引入

   <link
            href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${APP_PATH}/static/js/jquery-1.11.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script
            src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

2.显示页面的搭建

<%--
  Created by IntelliJ IDEA.
  User: Xyz
  Date: 2018/5/10
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>员工列表页面</title>
      <%
          pageContext.setAttribute("APP_PATH", request.getContextPath());
      %>
    <!-- Bootstrap -->
    <link href="${request.getContextPath()}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="${request.getContextPath()}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- JQuery -->
    <script type="text/javascript" src="${request.getContextPath()}/static/js/jquery-1.11.0.min.js"></script>
</head>
<body>

<!--搭建显示页面-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12"></div>
        <h1>CRUD</h1>
    </div>
    <!--两个按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary btn-sm">新增</button>
            <button class="btn btn-danger btn-sm">删除</button>
        </div>
    </div>

    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">

                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="emp">
                    <tr>
                        <th>${emp.empId}</th>
                        <th>${emp.empName}</th>
                        <th>${emp.gender=="m"?"男":"女"}</th>
                        <th>${emp.email}</th>
                        <th>${emp.department.deptName}</th>
                        <th>
                            <button class="btn btn-primary">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true">
                            </span>
                                编辑
                            </button>
                            <button class=" btn btn-danger">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true">
                            </span>
                                删除
                            </button>
                        </th>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">


        <!--分页文字信息-->
        <div class="col-md-6">
            当前第${pageInfo.pageNum}页,总共${pageInfo.pages},总${pageInfo.total}条记录
        </div>
        <!--分页条-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="${request.getContextPath()}/emps?pn=1">首页</a></li>
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li>
                            <a href="${request.getContextPath()}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>


                    <c:forEach items="${pageInfo.navigatepageNums }" var="currentPageNum">
                        <c:if test="${currentPageNum == pageInfo.pageNum }">
                            <li class="active"><a href="#">${currentPageNum}</a></li>
                        </c:if>
                        <c:if test="${currentPageNum != pageInfo.pageNum }">
                            <li><a href="${APP_PATH }/emps?pn=${currentPageNum}">${currentPageNum}</a></li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${pageInfo.hasNextPage }">
                            <li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum+1}" aria-label="Next"> <span
                            aria-hidden="true">&raquo;</span>
                        </a></li>
                    </c:if>
                    <li><a href="${APP_PATH }/emps?pn=${pageInfo.pages}">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>


</div>
</body>
</html>

员工管理系统

进行员工信息的查询:方式一(servlet中发送请求)

//1.查询员工数据
    // @RequestMapping("/emps")
    public String getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {


        //为了进行更方便的分页查询 引入 PageHelper

        //在查询之前 只需要调用 pageHelper
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询

        List<Employee> emps = employeeService.getAll();
//page页面 里封装了 许多详细的信息     连续传入显示的页数
        PageInfo page = new PageInfo(emps, 5);

        model.addAttribute("pageInfo", page);

        return "list";
    }

service中


    /**
     * 查询所有员工信息
     *
     * @return
     */
    public List<Employee> getAll() {

        return employeeMapper.selectByExampleWithDept(null);
    }

使用ajax请求

1.service中

   public List<Employee> getAll() {

        return employeeMapper.selectByExampleWithDept(null);
    }

2.请求时发送的json键值对

 @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
        //在查询之前 只需要调用 pageHelper
        PageHelper.startPage(pn, 5);
        //startPage后面紧跟的查询就是一个分页查询

        List<Employee> emps = employeeService.getAll();
//page页面 里封装了 许多详细的信息     连续传入显示的页数
        PageInfo page = new PageInfo(emps, 5);
        return Msg.success().add("pageInfo", page);
    }

搭建显示页面

!--搭建显示页面-->
<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12"></div>
        <h1>员工管理系统</h1>
    </div>
    <!--两个按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
        </div>
    </div>

    <!--显示表格数据-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="check_all"/></th>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>email</th>
                    <th>deptName</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!--显示分页信息-->
    <div class="row">


        <!--分页文字信息-->
        <div class="col-md-6" id="page_info_area">

        </div>
        <!--分页条-->
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>

进行ajax请求,解析json

 var currentPage;
    //页面加载完成后,直接发送ajax请求
    $(function () {
        //页面一进来直接去首页
        to_page(1);
    });


    //跳转页面的请求发送
    function to_page(pn) {
        $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                //1.解析并显示员工数据
                //  console.log(result);
                //2.解析显示分页信息
                build_emps_table(result);
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    function build_emps_table(result) {
        //每次请求前都先清空表格
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;

        $.each(emps, function (index, item) {
            var checkboxIdTd=$("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender == 'm' ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptName = $("<td></td>").append(item.department.deptName);

            var editBtn = $("<button>").addClass("btn btn-primary btn-sm edit_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑");
            //创建编辑按钮的时候添加一个自定义的属性  来表示当前员工的ID
            editBtn.attr("edit-id", item.empId);

            var delBtn = $("<button>").addClass("btn btn-danger btn-sm delete_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-remove").append("删除");
            delBtn.attr("del-id", item.empId);

            var btn_d = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            $("<tr></tr>").append(checkboxIdTd).append(empIdTd).append(empNameTd).append(genderTd)
                .append(emailTd).append(deptName).append(btn_d).appendTo("#emps_table tbody");
        });

    }

    //解析显示分页信息
    function build_page_info(result) {
        //首先清空表格数据
        $("#page_info_area").empty();
        $("#page_info_area").append("  当前第" + result.extend
                .pageInfo.pageNum + "页,总" + result.extend.pageInfo.pages + "共,总"
            + result.extend.pageInfo.total + "条记录");

        currentPage=result.extend.pageInfo.pageNum;
    }

    //导航条   点击信息要有动作
    function build_page_nav(result) {
//page_nav_area
        $("#page_nav_area").empty();
        //构建元素
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

        //是否有前一页和首页的判断
        if (result.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素点击翻页添加动作
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));

        //末页 下一页的判断
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //为元素点击翻页添加动作
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }


        //构造添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);
        //遍历分页
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item));

            //判断一下
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item)
            });
            ul.append(numLi);
        });
        //添加下一页和末页的提示
        ul.append(nextPageLi).append(lastPageLi);
        //把ul放入nav元素
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

显示结果

段子手小阿鑫

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
SSM项目员工管理系统(2)页面布局和员工信息的两种展示方式

一、bootstrap和jquery搭建前端UI1.bootstrap和jquery的引入 &lt;link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;!-- jQuery (Boo...
复制链接

扫一扫