一款easyUI写的界面例子，小记

后台是用strut2的；

前台界面风格easyUI，感觉挺好用的；

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Basic DataGrid - jQuery EasyUI Demo</title>

     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">

     <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">

     <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>

     <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>

     <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>

     <script>

         var url;

         //删除用户

         function deleteUser(){

             var row=$('#dg').datagrid('getSelected');

             if(row){

                 $.messager.confirm("系统提示","您确定要删除这条记录吗?",function(r){

                     if(r){

                         $.post('user!delete',{delId:row.id},function(result){

                             if(result.success){

                                 $.messager.alert("系统提示","已成功删除这条记录!");

                                 $("#dg").datagrid("reload");

                             }else{

                                 $.messager.alert("系统提示",result.errorMsg);

                             }

                         },'json');

                     }

                 });

             }

         }

         //新建用户

         function newUser(){

             $("#dlg").dialog('open').dialog('setTitle','添加用户');

             $('#fm').form('clear');

             url='user!save';

         }

         //编辑用户

         function editUser(){

             var row=$('#dg').datagrid('getSelected');

             if(row){

                 $("#dlg").dialog('open').dialog('setTitle','编辑用户');

                 $("#name").val(row.name);

                 $("#phone").val(row.phone);

                 $("#email").val(row.email);

                 $("#qq").val(row.qq);

                 url='user!save?id='+row.id;

             }

         }

         //dailog页面保存用户，新建和编辑都用到

         function saveUser(){

             $('#fm').form('submit',{

                 url:url,

                 onSubmit:function(){

                     return $(this).form('validate');

                 },

                 success:function(result){

                     var result=eval('('+result+')');

                     if(result.errorMsg){

                         $.messager.alert("系统提示",result.errorMsg);

                         return;

                     }else{

                         $.messager.alert("系统提示","保存成功");

                         $('#dlg').dialog('close');

                         $("#dg").datagrid("reload");

                     }

                 }

             });

         }

         //批量导入数据，打开dialog

         function openUploadFileDialog(){

             $("#dlg2").dialog('open').dialog('setTitle','批量导入数据');

         }

         //下载批量导入模板

         //userExporTemplate.xls位于WebContent/template/下面

         //一个纯的js来下载模板

         function downloadTemplate(){

             window.open('template/userExporTemplate.xls');

         }

         //上传Excel文件，交给后台解析

         function uploadFile(){

             $("#uploadForm").form("submit",{

                 success:function(result){

                     var result=eval('('+result+')');

                     if(result.errorMsg){

                         $.messager.alert("系统提示",result.errorMsg);

                     }else{

                         $.messager.alert("系统提示","上传成功");

                         $("#dlg2").dialog("close");

                         $("#dg").datagrid("reload");

                     }

                 }

             });

         }

     </script>

 </head>

 <body>

     <!-- table列表 -->

     <table id="dg" title="用户管理" class="easyui-datagrid" style="width:700px;height:365px"

             url="user!list"

             toolbar="#toolbar" pagination="true"

             rownumbers="true" fitColumns="true" singleSelect="true">

         <thead>

             <tr>

                 <th field="id" width="50" hidden="true">编号</th>

                 <th field="name" width="50">姓名</th>

                 <th field="phone" width="50">电话</th>

                 <th field="email" width="50">Email</th>

                 <th field="qq" width="50">QQ</th>

             </tr>

         </thead>

     </table>

     <!-- 一排操作按钮 -->

     <div id="toolbar">

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-export" plain="true" onclick="exportUser()">导出用户</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-export" plain="true" onclick="exportUser2()">用模版导出用户</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-import" plain="true" onclick="openUploadFileDialog()">用模版批量导入数据</a>

     </div>

     <!-- 新建、编辑用户的dialog -->

     <div id="dlg" class="easyui-dialog" style="width:400px;height:250px;padding:10px 20px"

             closed="true" buttons="#dlg-buttons">

         <form id="fm"  method="post">

             <table cellspacing="10px;">

                 <tr>

                     <td>姓名：</td>

                     <td><input id="name"  name="user.name" class="easyui-validatebox" required="true" style="width: 200px;"></td>

                 </tr>

                 <tr>

                     <td>联系电话：</td>

                     <td><input id="phone"  name="user.phone" class="easyui-validatebox" required="true" style="width: 200px;"></td>

                 </tr>

                 <tr>

                     <td>Email：</td>

                     <td><input id="email"  name="user.email" class="easyui-validatebox" validType="email" required="true" style="width: 200px;"></td>

                 </tr>

                 <tr>

                     <td>QQ：</td>

                     <td><input id="qq" name="user.qq" class="easyui-validatebox" required="true" style="width: 200px;"></td>

                 </tr>

             </table>

         </form>

     </div>

     <div id="dlg-buttons">

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>

     </div>

     <!-- 批量导入数据模板Excel 的dialog -->

     <div id="dlg2" class="easyui-dialog" style="width:400px;height:180px;padding:10px 20px"

             closed="true" buttons="#dlg-buttons2">

         <form id="uploadForm" action="user!upload" method="post" enctype="multipart/form-data">

             <table>

                 <tr>

                     <td>下载模版：</td>

                     <td><a href="javascript:void(0)" class="easyui-linkbutton"  onclick="downloadTemplate()">导入模版</a></td>

                 </tr>

                 <tr>

                     <td>上传文件：</td>

                     <td><input type="file" name="userUploadFile"></td>

                 </tr>

             </table>

         </form>

     </div>

     <div id="dlg-buttons2">

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="uploadFile()">上传</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">关闭</a>

     </div>

 </body>

 </html>

界面：

一款easyUI写的界面例子，小记的更多相关文章

Java 快速开发几 MB 独立 EXE，写图形界面很方便
Java 写的桌面软件带上运行时只有 6 MB,而且还是独立 EXE 文件,是不是难以置信? 想一想 Electron 没写多少功能就可能超过百 MB 的体积,Java 写的桌面软件算不算得上小.轻 ...
用thinkphp写的一个例子：抓取网站的内容并且保存到本地
我需要写这么一个例子,到电子课本网下载一本电子书. 电子课本网的电子书,是把书的每一页当成一个图片,然后一本书就是有很多张图片,我需要批量的进行下载图片操作. 下面是代码部分: public func ...
【转】忙里偷闲写的小例子---读取android根目录下的文件或文件夹
原文网址:http://www.cnblogs.com/wenjiang/p/3140055.html 最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还 ...
EasyUI的后台界面
EasyUI的后台界面搭建及极致重构〇.前言要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用 ...
两款【linux字符界面下】显示【菜单】，【选项】的powershell脚本模块介绍
两款[linux字符界面下]显示[菜单],[选项]的powershell脚本模块介绍 powershell linux ps1 menu choice Multiselect 传教士菜单 powe ...
忙里偷闲写的小例子---读取android根目录下的文件或文件夹
最近几天真的是各种意义上的忙,忙着考试,还要忙着课程设计,手上又有外包的项目,另一边学校的项目还要搞,自己的东西还在文档阶段,真的是让人想死啊!! 近半个月来,C#这方面的编码比较多,android和 ...
python使用pyqt写带界面工具
上篇介绍的使用python自带tkinter包,来写带界面的工具. 此篇介绍使用pyqt来开发测试工具. tkinter的好处是python官方自带,上手容易(但手写控件复杂),布局和摆放都不直观和容 ...
EasyUI写的登录界面
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...
【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面
1.引入资源包在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC.这一节,我们先来画页面,前端框架采用EasyUI来实现. easyui是一种基于jQuery的用户界面插件集 ...

随机推荐

Python 数据类型--Bytes类型
一.Bytes类型在Python3以后,字符串和bytes类型彻底分开了.字符串是以字符为单位进行处理的,bytes类型是以字节为单位处理的. bytes数据类型在所有的操作和使用甚至内置方法上和字 ...
《Python》面向对象初识
一.面向对象初识: 1.结构上理解:类由两部分组成 class A: # class是类的关键字,类名首字母默认大写 name = 'alex' # 静态属性,静态变量,静态字段 def func ...
eclipse中使用Maven新建Servlet2.5的Web项目
前言我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的 ...
1.2 C++命名空间（namespace）
参考:http://www.weixueyuan.net/view/6326.html 总结: C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespac ...
C#如何提取.txt文件中的每个字符串
C#如何提取.txt文件中的每个字符串,并将其存放到一个类中. 将其中的编号菜名价格分别存入不同的数组中. 注:在用ReadLine读取一行信息时为什么读取的中文字符变成了乱码. 20 满意答案 ...
题目1003：A+B
题目1003:A+B 时间限制:1 秒内存限制:32 兆题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式 ...
Wiz写Blog? 不会再爱了，全面拥抱Markdown+Pandoc
Wiz写Blog? 不会再爱了,全面拥抱Markdown+Pandoc 文章转载自 http://iout.in/archives/454.html 我们为什么写作? 自从人们开始写作,写作便是记录. ...
DHT11
主机开始发送信号:先拉低至少18ms,然后在拉高20~40us,然后DHT11响应, 拉低数据线40~50us,接着在拉高40~50us,之后再开始输出数据. 输出0是的时序:先12.14us低电平, ...
如何设置鼠标右键单击返回ppt上一页
点击“powerpoint选项”,选择“高级” 将“幻灯片放映”选项下“鼠标右键单击时显示菜单(E)”前面的钩去掉.图为处理过的.
ajax 跨域的问题用js绕过跨域
之前遇到一个ajax跨域的问题,搜索了很多方法才找到解决方案,也怪自己菜鸟一个这些经验还是要慢慢来的尤其是最近来回顾一下竟然发现自己忘记了所以还是把它记下来啊免得到时候忘记这个方法原 ...

一款easyUI写的界面例子，小记

一款easyUI写的界面例子，小记的更多相关文章

随机推荐

热门专题