<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学生表</title> <!-- 1jQuery的js包 --> <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script> <!-- 2css资源 --> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css"> <!-- 3图标资源 --> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> <!-- 4easyui的js包 --> <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <!-- 5本地语言包 --> <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head> <body> <script type="text/javascript"> $(function(){ //创建DataGrid $("#dg").datagrid({ url:'StudentServlet', //数据来源 //冻结列 frozenColumns:[[{field:'id',checkbox:true}, {field:'sno',title:'学生编号',100}]], //列的定义 columns:[[ {field:'sname',title:'学生名',100}, {field:'ssex',title:'性别',100}, {field:'sclass',title:'班级',100,align:'right'}, {field:'sbirthday',title:'生日',100,align:'center', formatter: function(value,row,index){ var valuee = new Date(value).toLocaleString(); if(valuee == 'Invalid Date') { return '无' ; } else { return valuee; } } } ]], fitColumns:false,//列自适应宽度 ，不能和冻结列同时设置为true striped:true,//斑马线效果 idField:'sno',//主键列 rownumbers:true,//显示行号 singleSelect:false,//是否单选 pagination:true,//显示分页栏 pageList:[10,20,30,40],//每页行数选择列表 pageSize:10,//初始每页行数 remoteSort:false,//是否服务器端排序 multiSort:true,//是否允许多列排序 toolbar:[{iconCls:'icon-search',text:'查询', handler:function(){$("#dg").datagrid('load');} },{iconCls:'icon-add',text:'添加', handler:function(){ //清除表单旧数据 $("#form1").form("reset"); $("#saveStu").dialog('open');} },{iconCls:'icon-remove',text:'删除', handler:function(){alert('删除按钮被点击');} },{iconCls:'icon-remove',text:'删除', handler:function(){alert('删除按钮被点击');} }] }); }) </script> <table id="dg" > </table> <div class="easyui-dialog" id="saveStu" style="400px;height:300px" title="添加学生" data-options="{closed:true,modal:true, buttons:[{text:'保存',iconCls:'icon-save',handler:function(){ $('#form1').form('submit',{ url:'SaveStudentServlet', onSubmit:function(){ var isValid =$(this).form('validate'); if(!isValid){ $.messager.show({ title:'消息', msg:'数据验证未通过' }); } return isValid; }, success:function(data){ var msg=eval('('+data+')'); if(!msg.success) { alert(msg.message); } else { // $('#dg').datagrid('reload'); $.messager.show({title:'提示',msg:msg.message}); $('#saveStu').dialog('close'); } } }); }}, {text:'取消',iconCls:'icon-cancel',handler:function(){ $('#saveStu').dialog('close'); }}]}"> <form action="" id="form1" method="post"> <br><br> <table> <tr> <td align="right" width=30%>学号：</td> <td><input class="easyui-textbox" id="sno" name="sno" data-options= "{required:true,validType:'length[3,5]'}"></td> </tr> <tr> <td align="right" width=30%>名称：</td> <td><input class="easyui-textbox" name="sname" data-options= "{required:true,validType:'length[2,4]'}"></td> </tr> <tr> <td align="right" width=30%>性别：</td> <td><input type="radio" name="ssex" checked value="男">男 <input type="radio" name="ssex" value="女">女</td> </tr> <tr> <td align="right" width=30%>班级：</td> <td><input class="easyui-textbox" name="sclass" data-options= "{required:true,validType:'length[2,4]'}"></td> </tr> <tr> <td align="right" width=30%>生日：</td> <td><input class="easyui-datebox" name="sbirthday" ></td> </tr> </table> </form> </div> </body> </html>