使用easyui从数据库读入数据完成前端分页并更新datagrid数据表格

一、工具类

public class PageUtil {
    private int currentPageIndex;//
    private int pageSize;//每页多少笔资料
    private int startIndex;//起始是第几笔数据
    
    public PageUtil() {
        this.currentPageIndex=1;
        this.pageSize=10;
        this.startIndex=(this.currentPageIndex-1)*this.pageSize;
    }
    public PageUtil(int currentPageIndex) {
        this.currentPageIndex=currentPageIndex;
        this.pageSize=10;
        this.startIndex=(this.currentPageIndex-1)*this.pageSize;
    }
    public PageUtil(int currentPageIndex,int pageSize) {
        this.currentPageIndex=currentPageIndex;
        this.pageSize=pageSize;
        this.startIndex=(this.currentPageIndex-1)*this.pageSize;
    }
    public int getCurrentPageIndex() {
        return currentPageIndex;
    }
    public void setCurrentPageIndex(int currentPageIndex) {
        this.currentPageIndex=currentPageIndex;
        this.startIndex = (this.currentPageIndex-1)*this.pageSize;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
        this.startIndex = (this.currentPageIndex-1)*this.pageSize;
    }
    public int getStartIndex() {
        return startIndex;
    }
    @Override
    public String toString() {
        return "PageUtil [currentPageIndex=" + currentPageIndex + ", pageSize=" + pageSize + ", startIndex="
                + startIndex + "]";
    }    
}
二、INoteBiz层

public interface INoteBiz {
    public List<Note> queryAll(PageUtil util);
    public int getTotal();
    public List<Note> queryByWords(Note note,PageUtil util);
    public int getTotalByWords(Note note);
}
三、NoteBizImpl层

public class NoteBizImpl implements INoteBiz{
    NoteDao dao = new NoteDao();
    
    @Override
    public List<Note> queryAll(PageUtil util) {
        String sql="select note.*,a.employeeName as employeeName,b.employeeName as operatorName,a.cardNumber,attendancetype.typeName"
                + " from note left outer join employees as a on note.employeeId=a.employeeId "
                + " left outer join employees as b on note.operatorId = b.employeeId"
                + " left outer join attendancetype on note.noteTypeId=attendancetype.typeId";
        StringBuilder sbl = new StringBuilder(sql); 
        sbl.append(" limit "+util.getStartIndex()+","+util.getPageSize());
        System.out.println(sbl.toString());
        return (List<Note>)dao.query(sbl.toString(), Note.class, new Object[] {});
    }

    @Override
    public int getTotal() {
        String sql="select count(*) from note";
        return (int) dao.getCount(sql, new Object[] {});
    }

    @Override
    public List<Note> queryByWords(Note note, PageUtil util) {
        String sql="select note.*,a.employeeName as employeeName,b.employeeName as operatorName,a.cardNumber,attendancetype.typeName"
                + " from note left outer join employees as a on note.employeeId=a.employeeId "
                + " left outer join employees as b on note.operatorId = b.employeeId"
                + " left outer join attendancetype on note.noteTypeId=attendancetype.typeId"
                + " where 0=0 ";
        StringBuilder sbl = new StringBuilder(sql); 
        
        // 根据传入的值,动态组条件
        ArrayList<Object> params = new ArrayList<Object>();
        if(note.getIsVerify()!=null&&!"".equals(note.getIsVerify())) {
            sbl.append(" and note.isVerify = ?  ");
            params.add(note.getIsVerify());
        }
        if(note.getNoteTypeId()!=0) {
            sbl.append(" and note.noteTypeId = ?  ");
            params.add(note.getNoteTypeId());
        }
        if(note.getEmployeeName()!=null&&!"".equals(note.getEmployeeName())) {
            sbl.append(" and a.employeeName = ?  ");
            params.add(note.getEmployeeName());
        }
        if(note.getOperatorName()!=null&&!"".equals(note.getOperatorName())) {
            sbl.append(" and b.employeeName = ?  ");
            params.add(note.getOperatorName());
        }
        if(note.getStartDate()!=null&&!"".equals(note.getStartDate())) {
            //sbl.append(" and note.startDate = ?  ");
            sbl.append(" and (?>=note.startDate and ?<=note.endDate) ");
            params.add(note.getStartDate());
            params.add(note.getStartDate());
        }
        
        sbl.append(" limit "+util.getStartIndex()+","+util.getPageSize());
        List<Note> list = dao.query(sbl.toString(), Note.class, params.toArray());
        System.out.println(list);
        return list;
    }

    @Override
    public int getTotalByWords(Note note) {
        String sql="select count(*)"
                + " from note left outer join employees as a on note.employeeId=a.employeeId "
                + " left outer join employees as b on note.operatorId = b.employeeId"
                + " left outer join attendancetype on note.noteTypeId=attendancetype.typeId"
                + " where 0=0 ";
        StringBuilder sbl = new StringBuilder(sql); 
        
        // 根据传入的值,动态组条件
        ArrayList<Object> params = new ArrayList<Object>();
        if(note.getIsVerify()!=null&&!"".equals(note.getIsVerify())) {
            sbl.append(" and note.isVerify = ?  ");
            params.add(note.getIsVerify());
        }
        if(note.getNoteTypeId()!=0) {
            sbl.append(" and note.noteTypeId = ?  ");
            params.add(note.getNoteTypeId());
        }
        if(note.getEmployeeName()!=null&&!"".equals(note.getEmployeeName())) {
            sbl.append(" and a.employeeName = ?  ");
            params.add(note.getEmployeeName());
        }
        if(note.getOperatorName()!=null&&!"".equals(note.getOperatorName())) {
            sbl.append(" and b.employeeName = ?  ");
            params.add(note.getOperatorName());
        }
        if(note.getStartDate()!=null&&!"".equals(note.getStartDate())) {
            //sbl.append(" and note.startDate = ?  ");
            sbl.append(" and (?>=note.startDate and ?<=note.endDate) ");
            params.add(note.getStartDate());
            params.add(note.getStartDate());
        }
        return (int) dao.getCount(sbl.toString(), params.toArray());
    }

}
四、NoteController层

INoteBiz biz = new NoteBizImpl();
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String opt = request.getAttribute("opt").toString();
        System.out.println(opt);
        
        switch(opt) {
            case "QueryAll":
                QueryAll(request,response);
                break;
            case "QueryByWords":
            try {
                QueryByWords(request,response);
            } catch (ParseException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
                break;
            default:
                break;
        }
    }
    
    private void QueryByWords(HttpServletRequest request, HttpServletResponse response) throws ParseException, IOException {
        String isVerify;
        int typeid;
        String employeeName;
        String operatorName;
        Date attendanceDate=null;
        if(request.getParameter("isVerify")==null||request.getParameter("isVerify").equals("")){
            isVerify="";
        }else{
            isVerify= request.getParameter("isVerify");
        }
        if(request.getParameter("noteTypeId")==null||request.getParameter("noteTypeId").equals("")){
            typeid=0;
        }else {
            typeid= Integer.parseInt(request.getParameter("noteTypeId"));
        }
        if(request.getParameter("employeeName")==null||request.getParameter("employeeName").equals("")){
            employeeName="";
        }else {
            employeeName = request.getParameter("employeeName").toString().trim();
        }
        
        if(request.getParameter("operatorName")==null||request.getParameter("operatorName").equals("")){
            operatorName="";
        }else {
            operatorName= request.getParameter("operatorName").toString().trim();
        }
        
        if(request.getParameter("leaveDate")==null||request.getParameter("leaveDate").equals("")){
            attendanceDate=null;
        }else{
            String time = request.getParameter("leaveDate");
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");//yyyy-mm-dd, 会出现时间不对, 因为小写的mm是代表: 秒
            Date utilDate = sdf.parse(time);
            attendanceDate = new java.sql.Date(utilDate.getTime());//
        }
        //System.out.println(isVerify+"///"+typeid+"///"+employeeName+"///"+operatorName+"///"+attendanceDate);

        Note note = new Note();
        note.setIsVerify(isVerify);
        note.setNoteTypeId(typeid);
        note.setEmployeeName(employeeName);
        note.setOperatorName(operatorName);
        note.setStartDate(attendanceDate);
        int page = Integer.parseInt(request.getParameter("page"));//!                 !                  !
        int rows = Integer.parseInt(request.getParameter("rows"));//!           !                !
        PageUtil util = new PageUtil(page, rows);
        //System.out.println(page + "..." + rows);
        List<Note> list = biz.queryByWords(note, util);
        int count = biz.getTotalByWords(note);

        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("total", count);
        map.put("rows", list);
        PrintWriter out = response.getWriter();
        String str = JSON.toJSONStringWithDateFormat(map, "yyyy-MM-dd", new SerializerFeature[0]);
        System.out.println(str);
        out.print(str);
        out.flush();
        out.close();
        
    }

    private void QueryAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
        int page = Integer.parseInt(request.getParameter("page"));
        int rows = Integer.parseInt(request.getParameter("rows"));
        //System.out.println(page+"----"+rows);
        PageUtil util=new PageUtil(page,rows);
        List<Note> list=biz.queryAll(util);
        int count=biz.getTotal();
        //String str=JSON.toJSONString(list);
        //String str = JSON.toJSONStringWithDateFormat(list, "yyyy-MM-dd HH:mm:ss", new SerializerFeature[0]);//
        //String str = JSON.toJSONStringWithDateFormat(list, "yyyy-MM-dd", new SerializerFeature[0]);//
        //System.out.println(str);
        
        HashMap<String,Object> map=new HashMap<String,Object>();
        map.put("total", count);
        map.put("rows", list);
        PrintWriter out=response.getWriter();
        String str = JSON.toJSONStringWithDateFormat(map, "yyyy-MM-dd", new SerializerFeature[0]);
        out.print(str);
        out.flush();
        out.close();
        
    }
五、前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请假管理</title>
<link type="text/css" rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="js/jquery-easyui/themes/icon.css"/>
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function(){
            //初始化table列表
            initNoteList();
            //初始化弹出的页面
            initDialog();
            //初始化员工信息
            initEmployeeList();
            
            $("#btnAdd").click(function(){
                $("#addDiv").dialog({
                    closed:false
                });
            });
            
            //为icon注册打开事件
            $("#addForm #employeeId").textbox({
                icons:[{
                    iconCls:'icon-search',
                    handler:function(e){
                        $('#employeeListDiv').dialog({
                            closed:false
                        });
                    }
                }]
            });
            
            $("#addForm #operatorId").textbox({
                icons:[{
                    iconCls:'icon-search',
                    handler:function(e){
                        $('#employeeListDiv2').dialog({
                            closed:false
                        });
                    }
                }]
            });
            
            //为员工列表的选择按钮,注册点击事件
            $("#btnSelect").click(function(){
                var row=$("#tblEmployeeList").datagrid('getSelected');
                var employeeId=row.employeeID;
                var employeeName=row.employeeName;
                var cardNumber=row.cardNumber;
                
                //列表框关闭
                $("#employeeListDiv").dialog({
                    closed:true
                });
                $("#addForm #employeeId").textbox(
                    "setValue",employeeName+"("+employeeId+","+cardNumber+")"        
                );
            });
            
            $("#btnSelect2").click(function(){
                var row=$("#tblEmployeeList2").datagrid('getSelected');
                var employeeId=row.employeeID;
                var employeeName=row.employeeName;
                var cardNumber=row.cardNumber;
                
                //列表框关闭
                $("#employeeListDiv2").dialog({
                    closed:true
                });
                $("#addForm #operatorId").textbox(
                    "setValue",employeeName+"("+employeeId+","+cardNumber+")"        
                );
            });
            
            
            $('#noteTypeId').combobox({
                loadFilter:function(data){
                    var obj={};
                    obj.typeId='';
                    obj.typeName='-请选择-'
                    data.splice(0,0,obj)//在数组0位置插入obj,不删除原来的元素
                    return data;
                 }
             });
            
            $('#addDiv #noteTypeId').combobox({
                loadFilter:function(data){
                    var obj={};
                    obj.typeId='';
                    obj.typeName='-请选择-'
                    data.splice(0,0,obj)//在数组0位置插入obj,不删除原来的元素
                    return data;
                 }
             });
            
            $("#btnQuery").click(
                    function()
                    {
                        var isVerify= $("#queryForm #isVerify").val();
                        var employeeName=$("#queryForm #employeeName").val();
                        var operatorName=$("#queryForm #operatorName").val();
                        var noteTypeId=$("#queryForm #noteTypeId").combo("getValue");
                        var leaveDate=$("#queryForm #leaveDate").datebox("getValue");    
                        $('#tblNote').datagrid('options').url = "http://localhost:8081/KQXT/NoteController/QueryByWords";
                        $('#tblNote').datagrid('load',{
                            isVerify: isVerify,
                            employeeName:employeeName,
                            operatorName:operatorName,
                            noteTypeId:noteTypeId,
                            leaveDate:leaveDate
                        });    
                    }
            );
        });
        
        
        
        function initNoteList(){
            $('#tblNote').datagrid({
                url:'http://localhost:8081/KQXT/NoteController/QueryAll',
                singleSelect:true,
                pagination:true,
                pageSize:5,
                pageList:[5,10,15,20],
                pageNumber:1,
                toolbar:'#barNote',
                rownumbers:true,
                 queryParams:{
                        isVerify:"",
                        noteTypeId:0,
                        employeeName:"",
                        operatorName:"",
                        leaveDate:""
                    },
                    onLoadSuccess: function (data) {
                         if (data.total == 0) 
                          $(this).datagrid('appendRow', {
                              fillInTime: '<div style="text-align:center;color:red">没有相关记录!</div>'})
                            .datagrid('mergeCells', { index: 0, field: 'fillInTime', colspan: 8 }) 
                         },
                columns:[[
                    {field:'fillInTime',title:'填表时间',width:130,align:'center'},
                    {field:'cardNumber',title:'卡号',width:100,align:'center'},
                    {field:'employeeName',title:'申请人',width:100,align:'center'},
                    {field:'typeName',title:'请假类型',width:100,align:'center'},
                    {field:'startDate',title:'起始时间',width:130,align:'center',formatter:function(value,row,index){
                        return row.startDate+"     "+row.startTime;
                    }},
                    {field:'endDate',title:'结束时间',width:130,align:'center',formatter:function(value,row,index){
                        return row.endDate+"     "+row.endTime;
                    }},
                    {field:'operatorName',title:'代理人',width:100,align:'center'},
                    {field:'opt',title:'操作',width:150,align:'center',
                        formatter:function(value,row,index){
                            var a='<a href="#" id="editButton" οnclick="edit('+row.noteId+')">编辑</a>&nbsp';
                            var b='<a href="#" id="delButton" οnclick="del('+row.noteId+')">删除</a>&nbsp';
                            var c='<a href="#" id="viewButton" οnclick="view('+row.noteId+')">查看</a>&nbsp';
                            return c+a+b;
                        }    
                    }
                ]]
            });
        }
        
        function initDialog(){
            $('#employeeListDiv').dialog({
                title:'员工列表',
                width:400,
                height:380,
                closed:true,
                modal:true
            });
            $('#employeeListDiv2').dialog({
                title:'员工列表',
                width:400,
                height:380,
                closed:true,
                modal:true
            });
            $('#addDiv').dialog({
                title:'请假单管理',
                width:550,
                height:400,
                closed:true,
                modal:true
            });
        }
        
        function initEmployeeList(){
            $('#tblEmployeeList').datagrid({
                url:'http://localhost:8081/KQXT/EmployeeController/QueryAllZaizhi',
                singleSelect:true,
                columns:[[
                    {field:'employeeID',title:'员工编号',width:100},
                    {field:'employeeName',title:'员工姓名',width:100},
                    {field:'cardNumber',title:'员工卡号',width:100}
                ]]
            });
            $('#tblEmployeeList2').datagrid({
                url:'http://localhost:8081/KQXT/EmployeeController/QueryAllZaizhi',
                singleSelect:true,
                columns:[[
                    {field:'employeeID',title:'员工编号',width:100},
                    {field:'employeeName',title:'员工姓名',width:100},
                    {field:'cardNumber',title:'员工卡号',width:100}
                ]]
            });
        }
    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true" id="useBox">
    <form id="queryForm" method="post">
        <div style="text-align:center;margin-top:10px;">
            <label for="isVerify">是否审核通过:</label>
            <select class="easyui-combobox" id="isVerify" name="isVerify" data-options="editable:false">
                <option value="">--请选择--</option>
                <option value="1">通过</option>
                <option value="0">不通过</option>
            </select>
            <label for="noteTypeId">请假类型:</label>
            <input id="noteTypeId" class="easyui-combobox" name="noteTypeId" data-options="valueField:'typeId',textField:'typeName',url:'http://localhost:8081/KQXT/AttendancetypeController/QueryNoteType',editable:false">
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="employeeName">员工姓名:</label>
            <input id="employeeName" name="employeeName" class="easyui-textbox" style="width:100px">
            <label for="operatorName">代理人姓名:</label>
            <input id="operatorName" name="operatorName" class="easyui-textbox" style="width:100px">
            <label for="leaveDate">请假日期:</label>
            <input id="leaveDate" name="leaveDate" class="easyui-datebox" style="width:100px" data-options="editable:false">
        </div>
        <div style="text-align:center;margin-top:10px;">
            <a id="btnQuery" class="easyui-linkbutton" iconCls="icon-search">查询</a>
        </div>
    </form>
    <br>
    <div class="tableCon">
        <table id="tblNote"></table>
        <div id="barNote">
            <a id="btnAdd" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
        </div>
    </div>
</div>
<div id="addDiv">
    <form id="addForm">
        <div style="text-align:center;margin-top:10px;">
            <label for="employeeId">申请人:</label>
            <input id="employeeId" name="employeeId" class="easyui-textbox easyui-validatebox" data-options="required:true" style="width:300px">
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="operatorId">代理人:</label>
            <input id="operatorId" name="operatorId" class="easyui-textbox easyui-validatebox" data-options="required:true" style="width:300px">
            <!-- <input id="operatorId" name="operatorId" class="easyui-combobox" data-options="required:true,iconCls:'icon-search'" style="width:300px"/> -->
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="noteTypeId">请假类型:</label>
            <input id="noteTypeId" class="easyui-combobox" name="noteTypeId" data-options="valueField:'typeId',textField:'typeName',url:'http://localhost:8081/KQXT/AttendancetypeController/QueryNoteType',editable:false">
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="fillInTime">填表时间:</label>
            <input class="easyui-datetimebox" name="fillTime" id="fillTime" data-options="required:true,editable:false" style="width:150px">
        </div> 
        <div style="text-align:center;margin-top:10px;">
            <label for="cause">请假事由:</label>
            <input class="easyui-textbox" id="cause" name="cause" data-options="required:true,multiline:true" style="width:300px;height:50px;">
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="startDate">请假起始时间:</label>
            <input id="startDate" name="startDate" type="text" class="easyui-datebox" data-options="required:true,editable:false"/>
            <select id="endTime" class="easyui-combobox" name="endTime" style="width:200px;" data-options="editable:false">
                <option value="上午">上午</option>
                <option value="下午">下午</option>
            </select>
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="endDate">请假结束时间:</label>
            <input id="endDate" name="endDate" type="text" class="easyui-datebox" data-options="required:true,editable:false"/>
            <select id="endTime" name="endTime" class="easyui-combobox" style="width:200px;" data-options="editable:false">
                <option value="上午">上午</option>
                <option value="下午">下午</option>
            </select>
        </div>
        <div style="text-align:center;margin-top:10px;">
            <label for="directorSign">主管经理意见:</label>
            <input class="easyui-textbox" id="directorSign" name="directorSign" data-options="multiline:true" style="width:300px;height:50px;">
        </div>
        <div style="text-align:center;margin-top:10px">
            <label for="administrationSign">行政部经理意见:</label>
            <input class="easyui-textbox" id="administrationSign" name="administrationSign" data-options="multiline:true" style="width:300px;height:50px;">
        </div>
        <div style="text-align:center;margin-top:10px">
            <label for="presidentSign">总裁意见:</label>
            <input class="easyui-textbox" id="presidentSign" name="presidentSign" data-options="multiline:true" style="width:300px;height:50px;" />
        </div>
        <div style="text-align:center;margin-top:10px;">
            <a id="btnSave" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
        </div>
    </form>
</div>
<div id="employeeListDiv">
    <form id="queryEmpForm">
        <div style="text-align:center;margin-top:10px;">
            <label for="employeeName">员工姓名:</label>
            <input class="easyui-textbox" id="employeeName" name="employeeName" style="width:200px">
            <a id="btnSave" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查找</a>
        </div>
    </form>
    <div class="tableCon" style="text-align:center;">
        <table id="tblEmployeeList"></table>
        <a id="btnSelect" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">确定</a>
    </div>
</div>

<div id="employeeListDiv2">
    <form id="queryEmpForm2">
        <div style="text-align:center;margin-top:10px;">
            <label for="employeeName">员工姓名:</label>
            <input class="easyui-textbox" id="employeeName2" name="employeeName2" style="width:200px">
            <a id="btnSave2" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查找</a>
        </div>
    </form>
    <div class="tableCon" style="text-align:center;">
        <table id="tblEmployeeList2"></table>
        <a id="btnSelect2" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">确定</a>
    </div>
</div>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值