<!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:'學生編號',width:100}]], //列的定義 columns:[[ {field:'sname',title:'學生名',width:100}, {field:'ssex',title:'性別',width:100}, {field:'sclass',title:'班級',width:100,align:'right'}, {field:'sbirthday',title:'生日',width: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="width: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>