EasyUI应用总结
1 <%@ page language="java" contentType="text/html; charset=utf-8"
2 pageEncoding="utf-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>库存管理系统</title>
8 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css">
9 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css">
10 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
11 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
12 <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
13 <script type="text/javascript">
14 var url;
15
16 function searchProvider(){
17 $("#dg").datagrid('load',{
18 s_proName:$("#s_proName").val()
19 });
20 }
21 function deleteProvider(){
22 var selectedRows = $("#dg").datagrid("getSelections");
23 if(selectedRows.length==0){
24 $.messager.alert("系统提示","请选择要删除的数据");
25 return;
26 }
27 var strIds=[]; //这种定义变量的方式
28 for(var i=0;i<selectedRows.length;i++){
29 strIds.push(selectedRows[i].id);
30 }
31 var ids = strIds.join(",");
32 $.messager.confirm("系统提示","您确认要删除这<font color=red>"+selectedRows.length+"</font>条数据吗?",function(r){
33 if(r){
34 $.post("${pageContext.request.contextPath}/stockManageSystem/provider!delete",{delIds:ids},function(result){
35 if(result.success){
36 $.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");
37 $("#dg").datagrid("reload");
38 }else{
39 $.messager.alert('系统提示',result.errorMsg);
40 }
41 },"json");
42 }
43 });
44 }
45
46 function openProviderAddDialog(){
47 $("#dlg").dialog("open").dialog("setTitle","添加供应商信息");
48 url="${pageContext.request.contextPath}/stockManageSystem/provider!save";
49 }
50
51 function openProviderModifyDialog(){
52 var selectedRows = $("#dg").datagrid("getSelections");
53 if(selectedRows.length!=1){
54 $.messager.alert("系统提示","请选择一条要修改的数据");
55 return ;
56 }
57 var row = selectedRows[0];
58 $("#dlg").dialog("open").dialog("setTitle","编辑供应商信息");
59 $("#proId").val(row.proId);
60 $("#proName").val(row.proName);
61 $("#linkman").val(row.linkman);
62 $("#proPhone").val(row.proPhone);
63 $("#proDesc").val(row.proDesc);
64 url="${pageContext.request.contextPath}/stockManageSystem/provider!save?id="+row.id;
65 }
66
67 function closeProviderDialog(){
68 $("#dlg").dialog("close");
69 resetValue();
70 }
71
72 function resetValue(){
73 $("#proId").val("");
74 $("#proName").val("");
75 $("#linkman").val("");
76 $("#proPhone").val("");
77 $("#proDesc").val("");
78 }
79
80 function saveProvider(){
81 $("#fm").form("submit",{
82 url:url,
83 onSubmit:function(){
84 return $(this).form("validate");
85 },
86 success:function(result){
87 if(result.errorMsg){
88 $.messager.alert("系统提示",reuslt.errorMsg);
89 return error;
90 }else{
91 $.messager.alert("系统提示","保存成功");
92 resetValue();
93 $("#dlg").dialog("close");
94 $("#dg").datagrid("reload");
95 }
96 }
97 });
98 }
99
100 function cleraValue(){
101 $("#s_proName").val("");
102 }
103
104 function exportData(){
105 window.open('${pageContext.request.contextPath}/stockManageSystem/provider!export')
106 }
107 </script>
108 </head>
109 <body style="margin: 5px;">
110 <table style="height:423px; width:1160px" id="dg" title="供应商管理" class="easyui-datagrid" fitColumns="true"
111 pagination="true" rownumbers="true" url="${pageContext.request.contextPath}/stockManageSystem/provider" toolbar="#tb">
112 <thead>
113 <tr>
114 <th field="cb" checkbox="true"></th>
115 <th field="id" width="15">编号</th>
116 <th field="proId" width="15">供应商编号</th>
117 <th field="proName" width="25">供应商名</th>
118 <th field="linkman" width="25">联系人</th>
119 <th field="proPhone" width="25">联系电话</th>
120 <th field="proDesc" width="100">供应商描述</th>
121 </tr>
122 </thead>
123 </table>
124
125 <div id="tb">
126 <div>
127 <a href="javascript:openProviderAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
128 <a href="javascript:openProviderModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
129 <a href="javascript:deleteProvider()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
130 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-redo" plain="true" onclick="exportData()">导出数据</a>
131 </div>
132 <div> 供应商名： <input type="text" name="s_proName" id="s_proName"/><a href="javascript:searchProvider()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
133 <a href="javascript:cleraValue()" class="easyui-linkbutton" iconCls="icon-no" plain="true">清空</a>
134 </div>
135 </div>
136
137 <div id="dlg" class="easyui-dialog" style="width:580px;height:350px;padding: 10px 20px"
138 closed="true" buttons="#dlg-buttons">
139 <form id="fm" method="post">
140 <table cellspacing="5px;">
141 <tr>
142 <td>供应商编号：</td>
143 <td><input type="text" name="provider.proId" id="proId" class="easyui-validatebox" required="true"/></td>
144
145 <td>供应商名：</td>
146 <td><input type="text" name="provider.proName" id="proName" class="easyui-validatebox" required="true"/></td>
147 </tr>
148 <tr>
149 <td>联系人：</td>
150 <td><input type="text" name="provider.linkman" id="linkman" class="easyui-validatebox" required="true"/></td>
151
152 <td>联系电话：</td>
153 <td><input name="provider.proPhone" id="proPhone" class="easyui-validatebox" required="true" /></td>
154 </tr>
155 <tr>
156 <td valign="top">供应商备注：</td>
157 <td colspan="3"><textarea rows="7" cols="45" name="provider.proDesc" id="proDesc"></textarea></td>
158 </tr>
159 </table>
160 </form>
161 </div>
162
163 <div id="dlg-buttons">
164 <a href="javascript:saveProvider()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
165 <a href="javascript:closeProviderDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
166 </div>
167 </body>
168 </html>
1.指定查询：
添加<a>标签设置class属性为easy-linkbutton和iconCls='icon-search'为搜索按钮
//主要通过load方法来传递参数到后台 进行 指定条件查询
1 $("#dg").datagrid('load',{
2
3 s_proName:$("#s_proName").val()
4
5 });
6
7 <a href="javascript:searchProvider()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
2.获取指定数据
1 //取得所有选中行数据，返回元素记录的数组数据。
2 var rows = $('#dg').datagrid("getSelections");
3 这里rows返回的是数组
4
5 //取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
6 var row = $('#dg').datagrid('getSelected');
3.消息框
1 //显示一个警告提示窗口。参数：
2 //title：显示在头部面板上的标题文本。
3 //msg：要显示的消息文本。
4 //icon：要显示的图标图片。可用的值是：error、question、info、warning。
5 //fn：当窗口关闭时触发的回调函数。
6
7 $.messager.alert('aaa','nnnnnnnnnnn');
8
9 //显示一个带"确定"和"取消"按钮的确认消息窗口。参数：
10 //title：显示在头部面板上的标题文本。
11 //msg：要显示的消息文本。
12 //fn(b)：回调函数，当用户点击确认按钮时传递一个 true 参数给函数，否则给它传递一个 //false 参数。
13 $.messager.confirm('操作提示','您要执行操作吗',function(r){
14 if(r){
15 alert("确定");
16 }else{
17 alert("取消");
18 }
19 });
20 $.messager.confirm("系统提示","您确认要删除这<font color=red>"+selectedRows.length+"</font>条数据吗?",function(r){
21 if(r){
22 $.post("${pageContext.request.contextPath}/stockManageSystem/provider!delete",{delIds:ids},function(result){
23 if(result.success){
24 $.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");
25 $("#dg").datagrid("reload");
26 }else{
27 $.messager.alert('系统提示',result.errorMsg);
28 }
29 },"json");
30 }
31 });
4.对话框
<div id="dlg" class="easyui-dialog" style="width:580px;height:350px;padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post">
<table cellspacing="5px;">
<tr>
<td>供应商编号：</td>
<td><input type="text" name="provider.proId" id="proId" class="easyui-validatebox" required="true"/></td> <td>供应商名：</td>
<td><input type="text" name="provider.proName" id="proName" class="easyui-validatebox" required="true"/></td>
</tr>
<tr>
<td>联系人：</td>
<td><input type="text" name="provider.linkman" id="linkman" class="easyui-validatebox" required="true"/></td> <td>联系电话：</td>
<td><input name="provider.proPhone" id="proPhone" class="easyui-validatebox" required="true" /></td>
</tr>
<tr>
<td valign="top">供应商备注：</td>
<td colspan="3"><textarea rows="7" cols="45" name="provider.proDesc" id="proDesc"></textarea></td>
</tr>
</table>
</form>
</div> 1.要现设置class属性为class="easyui-dialog" 设置为对话框窗口
//打开对话框
$("#dlg").dialog("open").dialog("setTitle","编辑供应商信息");
//关闭对话框
$("#dlg").dialog("close");
5.表单提交
'sumit' 为方法名。
url为属性，
onsubmit，success为事件
function saveProvider(){
$("#fm").form("submit",{
url:url,
onSubmit:function(){
return $(this).form("validate");
},
success:function(result){
if(result.errorMsg){
$.messager.alert("系统提示",reuslt.errorMsg);
return error;
}else{
$.messager.alert("系统提示","保存成功");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}
}
});
}
EasyUI应用总结的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- 前端框架 EasyUI （1）熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）
系列目录 前言 听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样 他 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（63）-Excel导入和导出-自定义表模导入
系列目录 前言 上一节使用了LinqToExcel和CloseXML对Excel表进行导入和导出的简单操作,大家可以跳转到上一节查看: ASP.NET MVC5+EF6+EasyUI 后台管理系统(6 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面
系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
随机推荐
- Java 学习笔记(121208)
Java 修饰符 访问修饰符 修饰符 当前类 同一包内 子孙类 其他包 public Y Y Y Y protected Y Y Y N default Y Y N N private Y N N N ...
- Linux命令四
作业一: 1) 开启Linux系统前添加一块大小为20G的SCSI硬盘 2) 开启系统,右击桌面,打开终端 安装的是命令行界面 3) 为新加的硬盘分区,一个主分区大小为10G,剩余空间给扩展分区,在扩 ...
- C++轮子队-第五周--测试与发布
Alpha版本测试报告 测试找出的BUG 测试结果bug清单: 修复的bug: 按方向下键部分情况无法合并的bug 棋盘图形布局错乱的bug 分数显示不出来的bug 重开游戏无法下坠方块的bug 无法 ...
- 理解java异常处理机制
1. 引子 try…catch…finally恐怕是大家再熟悉不过的语句了,而且感觉用起来也是很简单,逻辑上似乎也是很容易理解.不过,我亲自体验的“教训”告诉我,这个东西可不是想象中的那么简单.听话. ...
- Android 进阶12：进程通信之 Socket （顺便回顾 TCP UDP）
不要害怕困难,这是你进步的机会! 读完本文你将了解: OSI 七层网络模型 TCPIP 四层模型 TCP 协议 TCP 的三次握手 TCP 的四次挥手 UDP 协议 Socket 简介 Socket ...
- 【MFC】mfc控件位置调整和坐标确定 .
摘自DoubleLi: http://www.cnblogs.com/lidabo/archive/2012/08/24/2654678.html mfc控件位置调整和坐标确定 http://my ...
- WC2019 T1 数树
WC2019 T1 数树 传送门(https://loj.ac/problem/2983) Question 0 对于给定的两棵树,设记两颗树 \(A,B\) 的重边数量为 \(R(A,B)\),那么 ...
- vc++ windows 开始菜单添加快捷方式
开始菜单创建快捷方式 在windows软件开发中,软件安装过程中总是需要在开始菜单创建快捷方式,下面介绍一种开始菜单创建快捷方式的方法,具体代码如下: /* * 创建快捷方式 * szExePath[ ...
- test20181219 奇怪的函数
题意 奇怪的函数 [问题描述] 使得x^x达到或超过n位数字的最小正整数x是多少? [文件输入] 输入一个正整数n(n<=2*10^9). [文件输出] 输出使得x^x达到n位数字的最小正整数x ...
- 什么是镜头shading
shading分为两种: Lens Shading:由于Lens的光学特性,Sensor影像区的边缘区域接收的光强比中心小,所造成的中心和四角亮度不一致的现象. color shading:由于LEN ...