EasyUI应用总结

最新推荐文章于 2020-07-17 21:57:24 发布

weixin_33851177

最新推荐文章于 2020-07-17 21:57:24 发布

阅读量119

点赞数

文章标签： json java javascript ViewUI

  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" οnclick="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     }