一款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的用户界面插件集 ...
随机推荐
- Java——多线程练习
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Swift网络封装库Moya中文手册之Providers
Providers 使用Moya,你可以通过一个 MoyaProvider 的实例发送所有网络请求,通过枚举来指定你要访问的具体API.在配置你的 Endpoint 之后,你差不多就做好了基础配置: ...
- 玩转X-CTR100 l 平台-4WD智能小车
我造轮子,你造车,创客一起造起来!更多塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍使用X-CTR100控制器搭建4WD智能 ...
- 大数开根号java模板
利用逼近的思路直接二分开方找出值 package lanqiao; import java.math.BigInteger; import java.util.Scanner; public clas ...
- magento的必备插件（转）
标签: 插件 magento magento插件 必备插件 Magento插件 ,插件,我要常见Magento必备插件 .. 都是免费的Magento插件,多而杂,乡亲们自己挑~~ [因收集而强大 & ...
- linux下源码安装jdk1.8和tomcat8.5
Java是目前可移植性较高的语言,相当火热,tomcat运行就需要Java语言环境 0.java简介 1)tomcat运行需要对应的Java环境,Java环境通过安装jdk来获得2)为了防止兼容性问题 ...
- Wiz写Blog? 不会再爱了，全面拥抱Markdown+Pandoc
Wiz写Blog? 不会再爱了,全面拥抱Markdown+Pandoc 文章转载自 http://iout.in/archives/454.html 我们为什么写作? 自从人们开始写作,写作便是记录. ...
- Windows自动执行java脚本
1.打包 idea 1).File-Project Structure-Arifacts 2). 3). 4). 5). 目录位于 根目录/out\artifacts\ 2.Windows定时任务 ...
- 使用struts框架后的404错误
访问jsp界面后出现404错误,我开始以为是因为struts没有配置好,在网上找了很多解决方法, 试了一遍,无效, 最后在参考书上看到“struts2推荐把所有的视图界面存放在WEB-INF目录下,这 ...
- Python 操作Excel之通过xlutils实现在保留原格式的情况下追加写入数据
在Python操作Excel 的模块有 xlrd.xlwt.xlutils等. xlrd:读取Excel文件数据 xlwt:写入Excel 数据,缺点是Excel格式无法复用,为了方便用户,写入的话, ...