一款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的用户界面插件集 ...
随机推荐
- pyinstaller又踩一坑， configparser os.mknod
在使用pyinstaller时,有使用configparser模块. 使用相对路径.在pycharm中测试,正常,打包成exe,就出错了 换用绝对路径, print(os.getcwd()) fp_d ...
- js之表单记忆功能
在项目中,我们难免会遇到希望相同用户操作本次打开页面时可以展现或者自动记录上次登录系统点击过的的复选框,单选按钮等操作的状态,也就是表单记忆功能,这时,一个很重要的技术便派上了用场,即cookie. ...
- Mathematica 迭代函数
学习Mathematica迭代函数的几个画图例子: 1.三角形沿着某一点旋转 verticse = {{0, 0}, {1, 0}, {1/2, Sqrt[3]/2}}; tri = Line[ver ...
- 炸掉你的城堡！（pygame獾兔大战）
代码修改bug,添加注释等,獾的速度加快之后很难-- git地址: https://github.com/Jailman/blowupyrcastle.git 游戏资源使用了文章中附带的下载,原版文章 ...
- 截图保存 matlab
file=dir('D:\Program Files\MATLAB\R2014a\bin\MyPro\OCR\图像中时间识别\')for i=3:length(file) path= strcat(' ...
- Wiz写Blog? 不会再爱了，全面拥抱Markdown+Pandoc
Wiz写Blog? 不会再爱了,全面拥抱Markdown+Pandoc 文章转载自 http://iout.in/archives/454.html 我们为什么写作? 自从人们开始写作,写作便是记录. ...
- hdu 5185 dp（完全背包）
BC # 32 1004 题意:要求 n 个数和为 n ,而且后一个数等于前一个数或者等于前一个数加 1 ,问有多少种组合. 其实是一道很水的完全背包,但是没有了 dp 的分类我几乎没有往这边细想,又 ...
- window.location.href跳转问题2
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- jsp页面九大内置对象
资源转载自网上,不可用于商用,学习可以.内置对象又叫隐式对象/隐含对象是由WEB容器加载的一组类的实例,不需要预先声明就可以在脚本代码和表达式中随意使用的对象. 这九大隐式对象可以按照期作用分类为: ...
- Vue2.x directive自定义指令
directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...