主界面
创新互联-专业网站定制、快速模板网站建设、高性价比钦南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式钦南网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖钦南地区。费用合理售后完善，十载实体公司更值得信赖。
添加
修改
删除
查询暂时按照单字段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+"/";
%>
最主要的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",
url:"easyDel.action",
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上传到网盘中，提供下载地址http://u.115.com/file/f46d05cd01#Download有兴趣的可以看看