主界面
添加
修改
删除
查询暂时按照单字段id查询
页面主要代码easyDemo1.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <base href="<%=basePath%>"> <title>easyDemo1.jsp</title> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"> <script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="jslib/easyCrud.js"></script> </head> <body> <h2><b>测试easyui的DataGrid的CRUD操作</b></h2> <table id="tt"> </table> <form id="ff" method="post"> <div> 姓名:<input class="easyui-validatebox" type="text" id="name" name="name" required="true"></input> </div> <div> 年龄:<input class="easyui-numberbox" type="text" id="age" name="age" required="true"></input> </div> <div> 性别:<input class="easyui-validatebox" type="text" id="sex" name="sex" required="true"></input> </div> <div> 出生:<input class="easyui-validatebox" type="text" id="birthday" name="birthday" required="true"/> </div> <div> 班级:<input class="easyui-validatebox" type="text" id="className" name="className" required="true"/> </div> </form> <div id="add" class="easyui-window" title="添加" style="padding: 10px;width: 300;height:200;" iconCls="icon-add" closed="true" maximizable="false" minimizable="false" collapsible="false"> <div id="aa"> </div> <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" οnclick="add()">添加</a> <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" οnclick="close1()">取消</a> </div> <div id="edit" class="easyui-window" title="修改" style="padding: 10px;width: 300;height: 200;" iconCls="icon-edit" closed="true" maximizable="false" minimizable="false" collapsible="false"> <div id="ee"> </div> <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" οnclick="edit()">修改</a> <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" οnclick="close2()">取消</a> </div> <div id="query" class="easyui-window" title="查询" style="padding: 10px;width: 360px;height:100;" iconCls="icon-search" closed="true" maximizable="false" minimizable="false" collapsible="false"> <div> <table> <tr> <td>学生学号:</td> <td><input type="text" name="id" id="qq" class="easyui-numberbox" required="true"></td> <td><a class="easyui-linkbutton" iconCls="icon-search" href="javascript:void(0);" οnclick="query()">查询</a></td> </tr> </table> </div> </div> </body> </html>
最主要的easyCrud.js代码如下:
$(function(){
$('#ff').hide(); $('#tt').datagrid({ title:'datagrid增删查该小例子', iconCls:'icon-save', width:500, height:350, //pageSize:5, pageList:[5,10,15,20], nowrap:false, striped: true, collapsible:true, url:'easyAction.action', loadMsg:'数据装载中......', sortName:'code', sortOrder:'desc', remoteSort:false, frozenColumns:[[ {field:'ck',checkbox:true} ]], columns:[[ {title:'学号',field:'id',width:'50',rowspan:2,align:'center'}, {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'}, {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'}, {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'}, {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'}, {title:'班级',field:'className',width:'100',rowspan:2,align:'center'} ]], pagination:true, rownumbers:true, toolbar:[{ text:'全部', iconCls:'icon-ok', handler:function(){ $('#tt').datagrid({url:'easyAction.action'}); } },'-',{ text:'添加', iconCls:'icon-add', handler:function(){$('#add').window('open'); $('#ff').show(); $('#ff').form('clear'); $('#ff').appendTo('#aa');} },'-',{ text:'修改', iconCls:'icon-edit', handler:getSelect },'-',{ text:'删除', iconCls:'icon-remove', handler:del },'-',{ text:'查询', iconCls:'icon-search', handler:function(){ $('#query').window('open'); } } ] }); displayMsg(); }); function displayMsg(){ $('#tt').datagrid('getPager').pagination({displayMsg:'当前显示从{from}到{to}共{total}记录'}); } function close1(){ $('#add').window('close'); } function close2(){ $('#edit').window('close'); } function add(){ $('#ff').form('submit',{ url: 'easyAdd.action', onSubmit:function(){ return $('#ff').form('validate');}, success:function(){ close1(); } }); $.messager.alert('add','添加信息成功!!!','info',function(){ $('#tt').datagrid({ url:'easyAction.action', loadMsg:'更新数据中......' }); displayMsg(); }); } var id; function getSelect(){ var select = $('#tt').datagrid('getSelected'); if(select){ $('#edit').window('open'); $('#ff').show(); $('#ff').appendTo('#ee'); $('#name').val(select.name); $('#age').val(select.age); $('#sex').val(select.sex); $('#birthday').val(select.birthday); $('#className').val(select.className); id = select.id; }else{ $.messager.alert('warning','请选择一行数据','warning'); } } function edit(){ $('#ff').form('submit',{ url: 'easyUpdate.action?id='+id, onSubmit:function(){ return $('#ff').form('validate');}, success:function(){ $.messager.alert('edit','修改信息成功!!!','info'); close2(); } }); $('#tt').datagrid({ url:'easyAction.action', loadMsg:'更新数据......' }); } function del(){ var selected = $('#tt').datagrid('getSelected'); if(selected){ $.messager.confirm('warning','确认删除么?',function(id){ if(id){ id = selected.id; $.ajax({ type:"POST", ", data:"id="+id, dataType:"xml", success:function callback(){} }); $('#tt').datagrid('reload'); } }); }else{ $.messager.alert('warning','请选择一行数据','warning'); } } function query(){ var queryParams = $('#tt').datagrid('options').queryParams; queryParams.queryWord = $('#qq').val(); $('#tt').datagrid({ url:'easyQuery.action' }); displayMsg(); $('#query').window('close'); }
上述js代码写的有点臃肿，但是绝对能够精简的，只是时间关系和个人在js这块开发较少。
后台代码较多，本人已经将源码jquery_easyUI_demo.rar上传到网盘中，提供下载地址有兴趣的可以看看
数据库操作(easyui):