常用功能

于 2019-09-03 00:45:16 发布
阅读量421 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41879646/article/details/100436949
版权

---------------------------1 layui分页---------------------------------
-------------------------2 导出excel表格-----------------------------
-------------------------3 layui弹出层传值---------------------------

---------------------------1 layui分页---------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="margin:20px;">
    <a type="button" class="layui-btn layui-btn-warm" href="javascript:addUser();">添加用户</a>
</div>
<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>创建时间</th>
            <th>登录时间</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody id="tbodyId">
        </tbody>
    </table>
    <div id="page" style="text-align:right"></div>
</div>
<script>


    var curr = 1;// 当前页，初始值设为 1
    var limit = 2;// 每页条数，初始值设为 10
    var total;// 总记录数

    $(document).ready(function () {
        getInfo();// 获取数据
        toPage();// 进行分页
    });

    // 获取数据
    function getInfo() {
        $.ajax({
            type: "post",
            url: "/UserSelectServlet",
            async: false,// 设置同步请求，加载数据前锁定浏览器
            dataType: 'json',
            data: {
                "curr": curr, // 查询页码
                "limit": limit, // 每页条数
            },
            success: successFu
        });
    }

    // 数据请求成功
    function successFu(pager) {
        //console.log(data);
        // 1.清空原数据
        $("#tbodyId").html("");

        // 2.重新赋值页码、条数、总记录数
        curr = pager.start;
        limit = pager.limit;
        total = pager.total;

        // 3.渲染数据
        // 当前查询无数据时
        if (pager.total == 0) {
            $("tbody").html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
            return;
        }

        $.each(pager.data, function(index, value) {
            var $tr = $("<tr>" +
                "<td>"+value.id+"</td>" +
                "<td>"+value.username+"</td>" +
                "<td>"+value.password+"</td>" +
                "<td>"+value.mobile+"</td>" +
                "<td>"+value.email+"</td>" +
                "<td>"+value.createtime+"</td>" +
                "<td>"+value.logintime+"</td>" +
                "<td><a onclick='updateUser(this);' type='button' class='layui-btn'>修改</a></td>" +
                "<td><a onclick='deleteUser(this);' type='button' class='layui-btn'>删除</a></td>" +
                "</tr>");
            $("#tbodyId").append($tr);
        });
    }

    // 进行分页
    function toPage() {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            // 调用分页
            laypage.render({
                // 分页容器的id
                elem: 'page',// *必选参数
                // 数据总数，从服务端得到
                count: total,// *必选参数
                // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                limit:limit,//进入页面就能分页，注释掉则必须先选页才能点击上一页和下一页
                // 起始页
                //curr:Pager,
                // 连续出现的页码个数
                //groups:5,
                // 自定义每页条数的选择项
                limits: [2, 3],
                // 自定义首页、尾页、上一页、下一页文本
                first: '首页',
                last: '尾页',
                prev: '<em><<</em>',
                next: '<em>>></em>',
                // 自定义主题
                theme: "#FF5722",
                // 自定义排版
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                // 渲染数据
                jump: function (data, first) {
                    // data包含了当前分页的所有参数
                    curr = data.curr;
                    limit = data.limit;

                    // 首次不执行
                    if (!first) {
                        getInfo();
                    }
                }
            });
        })
    }




    function addUser() {
        $(".layui-body").load("addAndUpdateForm.html");
    }
    // $(function () {
    //    $.ajax({
    //        type:"post",
    //        url:"/UserSelectServlet",
    //        success:function (result) {
    //            var user = JSON.parse(result);
    //             $.each(user,function (index,value) {
    //                 var $tr = $("<tr>" +
    //                     "<td>"+value.id+"</td>" +
    //                     "<td>"+value.username+"</td>" +
    //                     "<td>"+value.password+"</td>" +
    //                     "<td>"+value.mobile+"</td>" +
    //                     "<td>"+value.email+"</td>" +
    //                     "<td>"+value.createtime+"</td>" +
    //                     "<td>"+value.logintime+"</td>" +
    //                     "<td><a onclick='updateUser(this);' type='button' class='layui-btn'>修改</a></td>" +
    //                     "<td><a onclick='deleteUser(this);' type='button' class='layui-btn'>删除</a></td>" +
    //                     "</tr>");
    //                 $("#tbodyId").append($tr);
    //             })
    //        }
    //    }) ;
    // });

    function updateUser(obj) {
        var user = new Object();
        user.id = $(obj).parent().parent().find('td:eq(0)').text();
        user.username = $(obj).parent().parent().find('td:eq(1)').text();
        user.password = $(obj).parent().parent().find('td:eq(2)').text();
        user.mobile = $(obj).parent().parent().find('td:eq(3)').text();
        user.email = $(obj).parent().parent().find('td:eq(4)').text();
        $(".layui-body").attr("user",JSON.stringify(user));
        $(".layui-body").load("addAndUpdateForm.html");
    }
    function deleteUser(obj) {
        alert("确认删除吗");
        var id = $(obj).parent().parent().find('td:eq(0)').text();
        $.ajax({
            type:"post",
            url:"/UserDeleteServlet",
            data:{"id":id},
            success:function (result) {
                if(result>0){
                    $(".layui-body").load("user.html");
                }else {
                    alert("删除失败");
                }
            }
        });
    }
</script>
</body>
</html>

2、UserSelectServlet

import com.alibaba.fastjson.JSON;
import pojo.User;
import utils.JdbcUtils;
import vo.Pager;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "UserSelectServlet",value="/UserSelectServlet")
public class UserSelectSevlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        int curr = Integer.parseInt(request.getParameter("curr"));
        int limit = Integer.parseInt(request.getParameter("limit"));
        Connection conn = JdbcUtils.getConn();
        List list = new ArrayList<User>();
        Pager<List<User>> pager = new Pager<>();
        try {
            Statement state = conn.createStatement();
            ResultSet rsCount = state.executeQuery("select * from user");
            rsCount.last();
            int total = rsCount.getRow();
            System.out.println(total);
            Statement state2 = conn.createStatement();
            ResultSet rs = state2.executeQuery("select * from user limit "+((curr-1)*limit)+","+limit);
            while(rs.next()){
                int id = rs.getInt("id");
                String username = rs.getString("username");
                String password = rs.getString("password");
                String mobile = rs.getString("mobile");
                String email = rs.getString("email");
                Date createtime = rs.getDate("createtime");
                Date logintime = rs.getDate("logintime");
                User user = new User(id, username, password, mobile, email, createtime, logintime);
                list.add(user);
                pager.setCurr(curr);
                pager.setTotal(total);
                pager.setLimit(limit);
                pager.setData(list);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        response.getWriter().print(JSON.toJSONString(pager));
    }
}

3、Pager

import java.util.List;

public class Pager<T> {
    // 当前页
    private Integer curr;
    // 每页条数
    private Integer limit;
    // 总记录数
    private Integer total;
    // 分页数据
    List<T> data;
 
    public Pager() {
    }

    public Integer getCurr() {
        return curr;
    }

    public void setCurr(Integer curr) {
        this.curr = curr;
    }

    public Integer getLimit() {
        return limit;
    }

    public void setLimit(Integer limit) {
        this.limit = limit;
    }

    public Integer getTotal() {
        return total;
    }

    public void setTotal(Integer total) {
        this.total = total;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

-------------------------2 导出excel表格-----------------------------

    @RequestMapping("/student/export")
    @ResponseBody
    public String export(HttpServletRequest request, HttpServletResponse response) throws Exception {
        //获取数据
        List<Student> list = studentService.studentSelectAll();
        //excel标题
        String[] title = {"id","姓名","电话","意向课程"};
        //excel文件名
        String fileName = "报名表"+System.currentTimeMillis()+".xls";
        //sheet名
        String sheetName = "报名表";

        String[][] content = new String[list.size()+1][title.length];
        for (int i = 0; i < list.size(); i++) {
            Student student = list.get(i);
            System.out.println(student.toString());
            content[i][0] = student.getId()+"";
            content[i][1] = student.getName();
            content[i][2] = student.getPhone();
            content[i][3] = student.getClassname();
        }
        //创建HSSFWorkbook
        HSSFWorkbook wb = ExcelUtil.getHSSFWorkbook(sheetName, title, content, null);
        //响应到客户端
        try {
            this.setResponseHeader(response, fileName);
            OutputStream os = response.getOutputStream();
            wb.write(os);
            os.flush();
            os.close();
            return "success";
        } catch (Exception e) {
            e.printStackTrace();
            return "error";
        }
    }

    //发送响应流方法
    public void setResponseHeader(HttpServletResponse response, String fileName) {
        try {
            try {
                fileName = new String(fileName.getBytes(),"ISO8859-1");
            } catch (UnsupportedEncodingException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            response.setContentType("application/octet-stream;charset=ISO8859-1");
            response.setHeader("Content-Disposition", "attachment;filename="+ fileName);
            response.addHeader("Pargam", "no-cache");
            response.addHeader("Cache-Control", "no-cache");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
 
public class ExcelUtil {
 
	public static HSSFWorkbook getHSSFWorkbook(String sheetName, String[] title, String[][] values, HSSFWorkbook wb) {
 
		// 第一步，创建一个HSSFWorkbook，对应一个Excel文件
		if (wb == null) {
			wb = new HSSFWorkbook();
		}
 
		// 第二步，在workbook中添加一个sheet,对应Excel文件中的sheet
		HSSFSheet sheet = wb.createSheet(sheetName);
 
		// 第三步，在sheet中添加表头第0行,注意老版本poi对Excel的行数列数有限制
		HSSFRow row = sheet.createRow(0);
 
		// 第四步，创建单元格，并设置值表头 设置表头居中
		HSSFCellStyle style = wb.createCellStyle();
		style.setAlignment(HSSFCellStyle.ALIGN_CENTER); // 创建一个居中格式
 
		// 声明列对象
		HSSFCell cell = null;
 
		// 创建标题
		for (int i = 0; i < title.length; i++) {
			cell = row.createCell(i);
			cell.setCellValue(title[i]);
			cell.setCellStyle(style);
		}
 
		// 创建内容
		for (int i = 0; i < values.length; i++) {
			row = sheet.createRow(i + 1);
			for (int j = 0; j < values[i].length; j++) {
				// 将内容按顺序赋给对应的列对象
				row.createCell(j).setCellValue(values[i][j]);
			}
		}
		return wb;
	}
}

-------------------------3 layui弹出层传值---------------------------

layer.open({
                type: 2,
                title: false //不显示标题栏
                ,
                closeBtn: false,
                area: ['500px', '300px'],
                shade: 0.8,
                id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,
                btn: ['确认', '取消'],
                btnAlign: 'c',
                moveType: 1 //拖拽模式，0或者1
                ,
                content: '/student/content.do',//对应content页面
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    var name = $(body.contents().find('#nameId')[0]).val();
                    var phine = $(body.contents().find('#phineId')[0]).val();
                    var className = $(body.contents().find('#classId')[0]).val();
                    var student = new Object();
                    student.name = name;
                    student.phone = phine;
                    student.classname = className;
                    layer.close(index);
                }
            });

content.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/resource/layui/css/layui.css" />
	</head>

	<body>
		<div class="layui-card">
			<div class="layui-card-header">
				<h2>参团信息</h2></div>
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">姓名：</label>
						<div class="layui-input-block">
							<input id="nameId" type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">联系方式：</label>
						<div class="layui-input-block">
							<input id="phineId" type="text" name="phine" required lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">意向课程：</label>
						<div class="layui-input-block">
							<input id="classId" type="text" name="class" required lay-verify="required" placeholder="请输入意向课程" autocomplete="off" class="layui-input">
						</div>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript" src="/resource/layui/layui.all.js"></script>
	</body>
</html>
YuYeMe
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值