easyui实现前端页面CURD
easyui version: jquery-easyui-1.4.3 此版本解决 $.messager.progress('close'); 报错的问题
列表效果
搜索效果
编辑效果
页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"> <script type="text/javascript" src="/easyui/jquery.min.js"></script> <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="/style/js/common.js"></script> <script type="text/javascript"> var url = ""; function newEmployment() { //新建 $('#dlg').dialog('open').dialog('setTitle','新建'); $('#fm').form('clear'); url = '<%= request.getContextPath() %>/manage/employment/save.json'; } function editEmployment() { //编辑 var rows = $('#dg').datagrid('getSelections'); if (rows.length != 1) { showMsg('请选择一行编辑'); return; } $('#dlg').dialog('open').dialog('setTitle','编辑'); $('#fm').form('load',rows[0]); url = '<%= request.getContextPath() %>/manage/employment/update.json'; } function saveEmployment() { //保存或更新 $('#fm').form('submit', { url: url, onSubmit: function() { //验证表单&防止重复提交 $.messager.progress(); var isValid = $(this).form('validate'); if (!isValid) { $.messager.progress('close'); } return isValid; }, success: function(data) { var d = JSON.parse(data); if (d.ok) { showMsg(d.msg); $('#dg').datagrid('reload'); $('#dlg').dialog('close'); } $.messager.progress('close'); } }); } function destroyEmployment() { //批量删除选中行 var rows = $('#dg').datagrid('getSelections'); if (rows.length > 0){ $.messager.confirm('Confirm','确定删除选中行?',function(r) { if (r) { $.messager.progress(); var ids = new Array(); $.each(rows, function(index, row) { ids.push(row.id); }) $.post('<%= request.getContextPath() %>/manage/employment/batDelete.json',{ ids:ids } ,function(data) { if (data.ok) { showMsg(data.msg); $('#dg').datagrid('reload'); } $.messager.progress('close'); },'json'); } }); } } function searchEmployment() { //查询 $('#dg').datagrid('load', { flowStatus: $('#queryFlowStatus').combobox('getValue'), userId: $('#queryUserId').combogrid('getValue') }); } function loadSuccess() { //表格加载成功后, 在分页工具栏上添加按钮 $('#dg').datagrid('getPager').pagination({ buttons:[{ iconCls: 'icon-add', text:'新建', handler: function () { newEmployment(); } }, { iconCls: 'icon-edit', text:'编辑', handler: function () { editEmployment(); } }, { iconCls: 'icon-remove', text:'删除', handler: function () { destroyEmployment(); } }] }); } //自定义数据表格列formatter function formatFlowStatus(value) { if (value == '00') { return '保存'; } else if (value == '09') { return '已通过'; } else if (value == '11') { return '未通过'; } } </script> <title>就业信息管理</title> </head> <body> <!-- 数据表格顶部工具栏 --> <div id="tb" style="padding:3px"> <span>状态:</span> <select class="easyui-combobox" editable="false" panelHeight="auto" id="queryFlowStatus" > <option value=""> </option> <option value="00">保存</option> <option value="09">已通过</option> <option value="11">未通过</option> </select> <span>所属:</span> <input class="easyui-combogrid" id="queryUserId" data-options=" url: '/manage/teacher/list.json' ,panelHeight: 300 ,panelWidth: 500 ,idField : 'id' ,textField: 'name' ,striped: true ,editable: false ,pagination: true ,rownumbers: true ,fitColumns: true ,onBeforeLoad:function(param){ param.pageNo = param.page; param.pageSize = param.rows; } ,loadFilter:function(data) { return {'rows':data.page.data, 'total':data.page.totalCount}; } ,columns: [[{ field: 'departmentName', title: '部门', width: 120 }, { field: 'name', title: '姓名', width: 60 }, { field: 'phone', title: '手机', width: 120 }, { field: 'email', title: 'Email', width: 150 }]]"> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="searchEmployment()">查询</a> </div> <!-- 数据表格 --> <div class="easyui-layout" data-options="fit:true" style="padding: 5px;"> <table id="dg" class="easyui-datagrid" data-options="url:'/manage/employment/my/list.json' ,rownumbers:true ,toolbar:tb ,singleSelect:false ,striped:true ,pagination:true ,pageSize:20 ,fit:true ,fitColumns:true ,onBeforeLoad:function(param){ param.pageNo = param.page; param.pageSize = param.rows; } ,loadFilter:function(data) { return {'rows':data.page.data, 'total':data.page.totalCount}; } ,onLoadSuccess: function(data) { loadSuccess(); }"> <thead> <tr> <th checkbox="true" field="id"></th> <th field="graduateYear" width="50">毕业年份</th> <th field="graduateFrom" width="100">毕业院校</th> <th field="realName" width="50">真实姓名</th> <th field="workUnit" width="100">就业单位</th> <th field="job" width="100">岗位</th> <th field="flowStatus" width="100" formatter="formatFlowStatus">状态</th> </tr> </thead> </table> </div> <!-- 编辑页dialog底部按钮 --> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveEmployment()">保存</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a> </div> <!-- 编辑页 --> <div id="dlg" class="easyui-dialog" style="width:400px;height:460px;padding:10px 20px" resizable="true" closed="true" modal="true" buttons="#dlg-buttons"> <form id="fm" method="post"> <input type="hidden" name="id"> <table> <tr> <td><label>毕业年份:</label></td> <td><input class="easyui-combobox" name="graduateYear" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_GRADE" editable="false" panelHeight="auto" required="true" /></td> </tr> <tr> <td><label>毕业院校:</label></td> <td><input name="graduateFrom" class="easyui-textbox" required="true"></td> </tr> <tr> <td><label>身份证:</label></td> <td><input name="idCard" class="easyui-textbox" required="true" validType="idCardRex"></td> </tr> <tr> <td><label>真实姓名:</label></td> <td><input name="realName" class="easyui-textbox" required="true"></td> </tr> <tr> <td><label>户籍所在地:</label></td> <td><input name="domicile" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td> </tr> <tr> <td><label>家庭住址:</label></td> <td><input name="familyAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td> </tr> <tr> <td><label>email:</label></td> <td><input name="email" class="easyui-textbox" required="true" validType="email"></td> </tr> <tr> <td><label>毕业去向:</label></td> <td><input class="easyui-combobox" name="destination" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_DESTINATION" editable="false" panelHeight="auto" required="true" /></td> </tr> <tr> <td><label>就业单位:</label></td> <td><input name="workUnit" class="easyui-textbox" required="true"></td> </tr> <tr> <td><label>岗位:</label></td> <td><input name="job" class="easyui-textbox" required="true"></td> </tr> <tr> <td><label>工资:</label></td> <td><input name="salary" class="easyui-numberbox" min="0" required="true"></td> </tr> <tr> <td><label>工作单位地址:</label></td> <td><input name="workUnitAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td> </tr> <tr> <td><label>签约情况:</label></td> <td><input class="easyui-combobox" name="contract" valueField="code" textField="name" url="/manage/dict/queryByPCode/CUST_CONTRACT" editable="false" panelHeight="auto" required="true" /></td> </tr> <tr> <td><label>档案派遣地址:</label></td> <td><input name="fileDispatchAddress" class="easyui-textbox" multiline="true" style="width: 240px; height: 60px;" required="true"></td> </tr> </table> </form> </div> </body> </html>
common.js代码
$.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return m+'/'+d+'/'+y; } $.fn.datebox.defaults.parser = function(s){ if(s == null || s == '') { return new Date(); } return new Date(s); } var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} function isCardID(sId){ var iSum=0 ; var info="" ; if(!/^\d{17}(\d|x)$/i.test(sId)) return "输入的身份证长度或格式错误"; sId=sId.replace(/x$/i,"a"); if(aCity[parseInt(sId.substr(0,2))]==null) return "身份证地区非法"; sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2)); var d=new Date(sBirthday.replace(/-/g,"/")) ; if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法"; for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ; if(iSum%11!=1) return "输入的身份证号非法"; return true; } $.extend($.fn.validatebox.defaults.rules,{ idCardRex: { //验证身份证号 validator: function(value,param){ var flag= isCardID(value); return flag==true?true:false; }, message: '不是有效的身份证号码' } }); function showMsg(msg) { $.messager.show({ title: '提示', msg: msg }); }
