下面是我们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>