下面是我们jsp文件使用easyUI框架的简单实现。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%
String contextPath = request.getContextPath();
%>
<!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">
<title>学生信息</title>
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="http://www.jeasyui.com/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="stuDg"></div>
<div id="stuDlg">
<form id="stuForm" method="post">
<div
style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">学生信息</div>
<div style="margin-bottom: 10px">
<input name="stuId" class="easyui-textbox" required="true"
label="学生编号:" style="width: 100%">
</div>
<div style="margin-bottom: 10px">
<input name="stuName" class="easyui-textbox" required="true"
label="学生姓名:" style="width: 100%">
</div>
<div style="margin-bottom: 10px">
<input name="stuSex" class="easyui-textbox" required="true"
label="学生性别:" style="width: 100%">
</div>
<div style="margin-bottom: 10px">
<input name="stuAge" class="easyui-textbox" required="true"
label="学生年龄:" style="width: 100%">
</div>
<div style="margin-bottom: 10px">
<input name="stuRemark" class="easyui-textbox" required="true"
label="备注:" style="width: 100%">
</div>
</form>
</div>
<script type="text/javascript">
var ctx = '<%=contextPath%>';
$(function(){
$('#stuDlg').dialog({
width: 450,
height: 330,
closed: true, //是否关闭
modal: true,
buttons:[{
text :'保存',
iconCls : 'icon-add',
handler :function(){
$('#stuForm').submit(); //提交表单信息
}
},{
text:'关闭',
iconCls : 'icon-no',
handler:function(){
$('#stuDlg').dialog('close');
}
}]
});
$('#stuDg').datagrid({
url : ctx+'/demo/getStuPage.action', //action地址 不可以设为绝对路径 通过ctx变量获取工程名再加namespace...
pagination : true, //显示分页控件
fit : true,
//striped : false; //斑马线效果
singleSelect : true, //为true 则为单选 默认值是false 即多选
rownumbers : true, //如果为true,则显示一个行号列。
fitColumns : true, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
columns : [[
{field:'stuId',title:'学生编号',width:120},
{field:'stuName',title:'学生姓名',width:120},
{field:'stuSex',title:'学生性别',width:120},
{field:'stuAge',title:'学生年龄',width:120},
{field:'stuRemark',title:'学生备注',width:120},
]],
toolbar: [{
iconCls : 'icon-add',
text : "添加学生信息",
handler: function(){
$('#stuDlg').dialog('setTitle','新增学生信息');
$('#stuDlg').dialog('open');
$('#stuForm').form({
url : ctx+'/demo/addStu.action',
onSubmit: function(){
// 校验 返回false则不提交
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuDg').datagrid('reload'); //重新加载dg页面
}else{
alert(data.message + '请重试');
};
}
});
}
},'-',{
iconCls: 'icon-edit',
text : "修改学生信息",
handler : function(){
//获取所有选中行
var rows = $('#stuDg').datagrid('getSelections');
//判断是否有选中行 如果数量不是1 提示选择一条 如果数量<1 提示没有选中
if(rows.length > 1){
$.messager.alert('错误提示','请选择一条记录','error');
}else if(rows.length < 1){
$.messager.alert('错误提示','您还没有选择一条记录','error');
}else{
//获取行数据
//表单加载数据
$('#stuForm').form('load',rows[0]); //方法就这样调用 先调方法的API
//弹出修改的对话框
$('#stuDlg').dialog('setTitle','修改学生信息');
$('#stuDlg').dialog('open');
$('#stuForm').form({
url : ctx+'/demo/updateStu.action',
onSubmit: function(){
// 校验 返回false则不提交
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuDg').datagrid('reload'); //重新加载dg页面
}else{
alert(data.message+'请重试');
};
}
});
}
}
},'-',{
iconCls: 'icon-remove',
text : "删除学生信息",
handler : function(){
//获取所有选中行
var row = $('#stuDg').datagrid('getSelected');
if (row){
$.messager.confirm('确认','您确认想要删除此条记录吗?',function(r){
if (r) {
$.ajax({
url : ctx + '/demo/delStu.action?stuId='+row.stuId,
traditional:true,
type:'post',
cache:false,
dataType:'text',
success : function(data) {
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDg').datagrid('reload'); //重新加载dg页面
}else{
alert(data.message);
};
}
});
}
});
}else{
$.messager.alert('错误信息','请至少选择一条记录!','error');
}
}
},'-',{
iconCls : 'icon-help',
handler : function(){alert('帮助按钮')}
}]
});
});
</script>
</body>
</html>