一款easyUI写的界面例子，小记
2017-02-22 00:51
246 查看
后台是用strut2的；
前台界面风格easyUI，感觉挺好用的；
界面：
前台界面风格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="width: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="width: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="width: 200px;"></td>
136 </tr>
137 <tr>
138 <td>联系电话：</td>
139 <td><input id="phone" name="user.phone" class="easyui-validatebox" required="true" style="width: 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="width: 200px;"></td>
144 </tr>
145 <tr>
146 <td>QQ：</td>
147 <td><input id="qq" name="user.qq" class="easyui-validatebox" required="true" style="width: 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="width: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>界面：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- easyui 界面框架小记
- 一个jQuery EasyUI tree+Struts2+MyBatis例子
- Easyui Combobox 使用例子
- libgdx游戏引擎开发笔记（八）SuperJumper游戏例子的讲解（篇二）---- 游戏界面跳转
- 界面几个例子
- 基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面
- 以目录形式存树结构，用json lib拼接，用easyui显示（例子）
- EasyUI 动态tab页界面小结
- C#实例：5个.net经典例子（窗体与界面设计）
- android开发之欢迎界面的小例子
- 关于easyui中引用Tabs后，子界面事件弹出“缺少对象”
- springmvc+easyui实现界面控制quartz的暂停、恢复、修改、添加
- SpringMVC+easyUI实现上传图片功能小例子
- 快速使用 Thinkphp 之三： 用easyUI搭建Rbac界面
- 推荐 git 一款图形化界面管理客户端
- Jqueryui+easyui+easywidgets做的后台界面
- android应用——一款精致的锁屏界面设计
- Tour de Flex经典例子（三）------SkinnableContainer(登陆界面)
- android程序界面自动适应屏幕分辨率例子
- 【开源】OSharp框架解说系列（2.1）：EasyUI的后台界面搭建及极致重构