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.对话框

 1 <div id="dlg" class="easyui-dialog" style="width:580px;height:350px;padding: 10px 20px"
 2     closed="true" buttons="#dlg-buttons">
 3         <form id="fm" method="post">
 4             <table cellspacing="5px;">
 5                 <tr>
 6                     <td>供应商编号:</td>
 7                     <td><input type="text" name="provider.proId" id="proId" class="easyui-validatebox" required="true"/></td>
 8                     
 9                     <td>供应商名:</td>
10                     <td><input type="text" name="provider.proName" id="proName" class="easyui-validatebox" required="true"/></td>
11                 </tr>
12                 <tr>
13                     <td>联系人:</td>
14                     <td><input type="text" name="provider.linkman" id="linkman" class="easyui-validatebox" required="true"/></td>
15                     
16                     <td>联系电话:</td>
17                     <td><input  name="provider.proPhone" id="proPhone" class="easyui-validatebox" required="true" /></td>
18                 </tr>
19                 <tr>
20                     <td valign="top">供应商备注:</td>
21                     <td colspan="3"><textarea rows="7" cols="45" name="provider.proDesc" id="proDesc"></textarea></td>
22                 </tr>
23             </table>
24         </form>
25     </div>
26 
27 
28 1.要现设置class属性为class="easyui-dialog" 设置为对话框窗口
29 //打开对话框
30 $("#dlg").dialog("open").dialog("setTitle","编辑供应商信息");
31 //关闭对话框
32 $("#dlg").dialog("close");

 

 

5.表单提交

'sumit' 为方法名。

url为属性,

onsubmit,success为事件

 1     function saveProvider(){
 2         $("#fm").form("submit",{
 3             url:url,
 4             onSubmit:function(){
 5                 return $(this).form("validate");
 6             },
 7             success:function(result){
 8                 if(result.errorMsg){
 9                     $.messager.alert("系统提示",reuslt.errorMsg);
10                     return error;
11                 }else{
12                     $.messager.alert("系统提示","保存成功");
13                     resetValue();
14                     $("#dlg").dialog("close");
15                     $("#dg").datagrid("reload");
16                 }
17             }
18         });
19         
20     }

 

posted on 2016-08-08 16:49  Sharpest  阅读(444)  评论(0编辑  收藏  举报