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

随机推荐

cf935E
题解: 树形dp 要记录一个最小的,一个最大的然后转移代码: #include<bits/stdc++.h> using namespace std; ; ][],f[N*][],T[ ...
bzoj3105
题解: 一道博弈论题目要求取得最少,那么就是留下的最多把石子从大到小排序从打的开始刘如果可以留,那么就留下了如果留下了与前面留下来的异或后不为0,那么就可以留代码: #include< ...
第n次考试
题目: 1.堆方块 [题目描述] 给定N个方块,排成一行,将它们编号1到N. 再给出P个操作: M i j表示将i所在的那一堆移到j所在那一堆的顶上. C i表示一个询问,询问i下面有多少个方块. ...
Java——IO类，字节流读数据
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
python运维01-获取系统基础信息
1.获取系统主机名,IP,MAC地址 import socket import uuid macs = uuid.UUID(int = uuid.getnode()).hex[-12:] mac = ...
在ant中将依赖jar包一并打包的方法
一般jar包里面是不包含jar文件的,如果自己的类有依赖其他jar包,可以通过ant命令将这些jar包解析,然后和自己的class文件打在一起,命令如下: build.xml 1 2 3 4 5 6 ...
DevExpress v18.1新版亮点——WinForms篇（五）
用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress WinForms v18.1 的新功能,快来下载试用新版本! ...
MyEclipse持续性开发教程：用JPA和Spring管理数据（五）
MyEclipse 3.15 Style——在线购买低至75折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于JPA / Spring的功能.有 ...
mysql的字符拼接
在Mysql 数据库中存在两种字符串连接操作.具体操作如下一. 语法: 1. CONCAT(string1,string2,…) 说明 : string1,string2代表字符串,concat ...
SHA1
整理于互动百科安全哈希算法(Secure Hash Algorithm)主要适用于数字签名标准(Digital Signature Standard DSS)里面定义的数字签名算法(Digital ...

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

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

随机推荐

热门专题