一款easyUI写的界面例子，小记
后台是用strut2的；
前台界面风格easyUI，感觉挺好用的；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Basic DataGrid - jQuery EasyUI Demo</title> 6 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"> 7 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"> 8 <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script> 9 <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script> 10 <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> 11 <script> 12 var url; 13 //删除用户 14 function deleteUser(){ 15 var row=$('#dg').datagrid('getSelected'); 16 if(row){ 17 $.messager.confirm("系统提示","您确定要删除这条记录吗?",function(r){ 18 if(r){ 19 $.post('user!delete',{delId:row.id},function(result){ 20 if(result.success){ 21 $.messager.alert("系统提示","已成功删除这条记录!"); 22 $("#dg").datagrid("reload"); 23 }else{ 24 $.messager.alert("系统提示",result.errorMsg); 25 } 26 },'json'); 27 } 28 }); 29 } 30 } 31 32 //新建用户 33 function newUser(){ 34 $("#dlg").dialog('open').dialog('setTitle','添加用户'); 35 $('#fm').form('clear'); 36 url='user!save'; 37 } 38 39 //编辑用户 40 function editUser(){ 41 var row=$('#dg').datagrid('getSelected'); 42 if(row){ 43 $("#dlg").dialog('open').dialog('setTitle','编辑用户'); 44 $("#name").val(row.name); 45 $("#phone").val(row.phone); 46 $("#email").val(row.email); 47 $("#qq").val(row.qq); 48 url='user!save?id='+row.id; 49 } 50 } 51 52 //dailog页面保存用户，新建和编辑都用到 53 function saveUser(){ 54 $('#fm').form('submit',{ 55 url:url, 56 onSubmit:function(){ 57 return $(this).form('validate'); 58 }, 59 success:function(result){ 60 var result=eval('('+result+')'); 61 if(result.errorMsg){ 62 $.messager.alert("系统提示",result.errorMsg); 63 return; 64 }else{ 65 $.messager.alert("系统提示","保存成功"); 66 $('#dlg').dialog('close'); 67 $("#dg").datagrid("reload"); 68 } 69 } 70 }); 71 } 72 73 //批量导入数据，打开dialog 74 function openUploadFileDialog(){ 75 $("#dlg2").dialog('open').dialog('setTitle','批量导入数据'); 76 } 77 78 //下载批量导入模板 79 //userExporTemplate.xls位于WebContent/template/下面 80 //一个纯的js来下载模板 81 function downloadTemplate(){ 82 window.open('template/userExporTemplate.xls'); 83 } 84 85 //上传Excel文件，交给后台解析 86 function uploadFile(){ 87 $("#uploadForm").form("submit",{ 88 success:function(result){ 89 var result=eval('('+result+')'); 90 if(result.errorMsg){ 91 $.messager.alert("系统提示",result.errorMsg); 92 }else{ 93 $.messager.alert("系统提示","上传成功"); 94 $("#dlg2").dialog("close"); 95 $("#dg").datagrid("reload"); 96 } 97 } 98 }); 99 } 100 </script> 101 </head> 102 <body> 103 <!-- table列表 --> 104 <table id="dg" title="用户管理" class="easyui-datagrid" style="700px;height:365px" 105 url="user!list" 106 toolbar="#toolbar" pagination="true" 107 rownumbers="true" fitColumns="true" singleSelect="true"> 108 <thead> 109 <tr> 110 <th field="id" width="50" hidden="true">编号</th> 111 <th field="name" width="50">姓名</th> 112 <th field="phone" width="50">电话</th> 113 <th field="email" width="50">Email</th> 114 <th field="qq" width="50">QQ</th> 115 </tr> 116 </thead> 117 </table> 118 <!-- 一排操作按钮 --> 119 <div id="toolbar"> 120 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a> 121 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a> 122 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a> 123 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-export" plain="true" onclick="exportUser()">导出用户</a> 124 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-export" plain="true" onclick="exportUser2()">用模版导出用户</a> 125 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-import" plain="true" onclick="openUploadFileDialog()">用模版批量导入数据</a> 126 </div> 127 128 <!-- 新建、编辑用户的dialog --> 129 <div id="dlg" class="easyui-dialog" style="400px;height:250px;padding:10px 20px" 130 closed="true" buttons="#dlg-buttons"> 131 <form id="fm" method="post"> 132 <table cellspacing="10px;"> 133 <tr> 134 <td>姓名：</td> 135 <td><input id="name" name="user.name" class="easyui-validatebox" required="true" style=" 200px;"></td> 136 </tr> 137 <tr> 138 <td>联系电话：</td> 139 <td><input id="phone" name="user.phone" class="easyui-validatebox" required="true" style=" 200px;"></td> 140 </tr> 141 <tr> 142 <td>Email：</td> 143 <td><input id="email" name="user.email" class="easyui-validatebox" validType="email" required="true" style=" 200px;"></td> 144 </tr> 145 <tr> 146 <td>QQ：</td> 147 <td><input id="qq" name="user.qq" class="easyui-validatebox" required="true" style=" 200px;"></td> 148 </tr> 149 </table> 150 </form> 151 </div> 152 153 <div id="dlg-buttons"> 154 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a> 155 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a> 156 </div> 157 158 <!-- 批量导入数据模板Excel 的dialog --> 159 <div id="dlg2" class="easyui-dialog" style="400px;height:180px;padding:10px 20px" 160 closed="true" buttons="#dlg-buttons2"> 161 <form id="uploadForm" action="user!upload" method="post" enctype="multipart/form-data"> 162 <table> 163 <tr> 164 <td>下载模版：</td> 165 <td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="downloadTemplate()">导入模版</a></td> 166 </tr> 167 <tr> 168 <td>上传文件：</td> 169 <td><input type="file" name="userUploadFile"></td> 170 </tr> 171 </table> 172 </form> 173 </div> 174 175 <div id="dlg-buttons2"> 176 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="uploadFile()">上传</a> 177 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">关闭</a> 178 </div> 179 </body> 180 </html>
界面：