一款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的用户界面插件集 ...

随机推荐

bzoj3040
题解: 模板题,地界特斯拉+堆优化注意第一种建边代码: #include<bits/stdc++.h> using namespace std; typedef long long l ...
nested exception is java.sql.SQLException: Incorrect string value: '\xE7\x99\xBB\xE9\x99\x86...' for column 'image' at row 1
HTTP Status 500 - Hibernate operation: could not insert: [cn.itcast.shop.product.vo.Product]; uncate ...
Java 线程面试题 Top 50
--> Java 线程面试题 Top 50 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1. ...
增量打包DOC版
压缩zip的命令有的系统没有的自己去下载一个,否则关闭压缩zip的命令. 有需要的自行更改,这是满足我需求的. 执行 publish.bat 即可,当然需要将文件清单写好放在 resources.tx ...
Beta阶段第1周/共2周 Scrum立会报告+燃尽图 05
作业要求与 [https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284] 相同版本控制:https://git.coding.net/li ...
kbmMW CopyRawRecords 用法
复制一个ClientQuery数据集到另外一个ClientQuery,我们应该怎么做?并注意什么呢? kbmMW为我们提供了好几个方法,有LoadFromDataSet,CopyRawRecords, ...
Pycharm出现的部分快捷键无效问题及解决办法
为了进行python开发,下载了Pycharm.但是发现启动后,执行ctrl+c和ctrl+v等快捷键都无法生效. 网上搜索了下,参考https://blog.csdn.net/c2366994582 ...
将整个文件夹推上github
/*游戏或者运动才能让我短暂的忘记心痛,现如今感觉学习比游戏和运动还重要——曾少锋*/ 首先你要有一个本地仓库和一个远程仓库(github中的仓库).git文件夹下面不能含有 git文件夹,如果有的话 ...
Shader的函数公式以及使用的场景
Shader 是干什么的? 它的作用可以先简单理解为对屏幕上的物体,进行颜色处理. 而大家都知道,所有计算机,处理颜色的当然是显卡,也就是 GPU . 所以我们写 Shader 的目的就是告诉 GPU ...
ajax请求成功回调函数没有执行问题
如下常见的ajax前端请求,请求成功后success:function(result){ 这里的数据没有执行 }: $.ajax({ type:"post", url:" ...

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

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

随机推荐

热门专题