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>&nbsp;供应商名：&nbsp;<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 ...

随机推荐

hdu1845
题解: 只要输出n/2即可代码: #include<cstdio> #include<cmath> #include<cstring> #include<a ...
【Codeforces】894D. Ralph And His Tour in Binary Country 思维+二分
题意给定一棵$n$个节点完全二叉树,$m$次询问,每次询问从$a$节点到其它所有节点(包括自身)的距离$L$与给定$H_a$之差$H_a-L$大于$0$的值之和对整棵树从叶子节点到父节点从上往下预 ...
.net学习路线（转）
入门篇1. 学习面向对象(OOP)的编程思想许多高级语言都是面向对象的编程,.NET也不例外.如果您第一次接触面向对象的编程,就必须理解类.对象.字段.属性.方法和事件.封装.继承和 ...
jsp中的session
浏览器和服务器的异常通话常用方法 setAttribute(String key,Object value);//设置值 getAttribute(String key); //取值 Invalid ...
maven install时自动施行单元测试
maven install时自动执行单元测试 1.maven-surefire-plugin简介 Maven本身并不是一个单元测试框架,它只是在构建执行到特定生命周期阶段的时候,通过插件来执行JUni ...
So sad! ,Asphyre Closure
So sad ! Asphyre Closure! 不过我相信开发App用Delphi应该是快的. 越与平台无关,优势越明显. 积累的组件市场. 虽然objc 有很多开源支持. 但总感觉还不够delp ...
C++中cin的使用总结
在学习C++时大家肯定迷惑过关于输入输出各种输出函数的功能,现在来总结一下各种函数的简单用法. cin建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将输入的数据存入输入缓冲 ...
linux之使用samba实现文件共享
早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序,NFS是一个能够将多台L ...
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
使用Audition录制自己的歌曲
Audition专为在照相室.广播设备和后期制作设备方面工作的音频和视频专业人员设计,可提供先进的音频混合.编辑.控制和效果处理功能.最多混合 128 个声道,可编辑单个音频文件,创建回路并可使用 4 ...

EasyUI应用总结

EasyUI应用总结的更多相关文章

随机推荐

热门专题