Asp.Net+Oracle+EasyUI简单增删查改
概要:网上有很多关于EasyUI前端框架的资料,本人在学习的基础上,基于自己之前搭建的框架(Oracle+Ado.Net),配合EasyUI实现一套简单的增删查改.
正文:
在实体层新建一个EMP.cs,继承至BaseModel
1 namespace myOracle.Model 2 { 3 public class Emp:BaseModel 4 { 5 public Emp() 6 { 7 base.PrimaryKey = "empNo"; 8 base.IsAutoId = false; 9 } 10 private int empNo; 11 12 public int EmpNo 13 { 14 get { return empNo; } 15 set { empNo = value; } 16 } 17 private string eName; 18 19 public string EName 20 { 21 get { return eName; } 22 set { eName = value; } 23 } 24 private string job; 25 26 public string Job 27 { 28 get { return job; } 29 set { job = value; } 30 } 31 private int mgr; 32 33 public int Mgr 34 { 35 get { return mgr; } 36 set { mgr = value; } 37 } 38 private DateTime hiredate; 39 40 public DateTime Hiredate 41 { 42 get { return hiredate; } 43 set { hiredate = value; } 44 } 45 private decimal sal; 46 47 public decimal Sal 48 { 49 get { return sal; } 50 set { sal = value; } 51 } 52 private decimal comm; 53 54 public decimal Comm 55 { 56 get { return comm; } 57 set { comm = value; } 58 } 59 private int deptNo; 60 61 public int DeptNo 62 { 63 get { return deptNo; } 64 set { deptNo = value; } 65 } 66 } 67 }
新建业务层和数据持久层相应类:
1 namespace myOracle.Dal 2 { 3 using myOracle.Model; 4 public class EmpDal:BaseDal<Emp> 5 { 6 } 7 } 8 namespace myOracle.Bll 9 { 10 using myOracle.Model; 11 public class EmpBll:BaseBll<Emp> 12 { 13 } 14 }
新建一个EMPList.html页面:
1 <body> 2 <table id="tab"></table> 3 <div id="tool"> 4 <table border="0" cellspacing="0" cellpadding="0" width="100%"> 5 <tr> 6 <td style=" padding-left:2px"> 7 <a href="#" class="easyui-linkbutton" id="id_add" iconcls="icon-add" plain="true" onclick="add_dg();" >添加</a> 8 <a href="#" class="easyui-linkbutton" id="id_edit" iconCls="icon-edit" plain="true" onclick="edit_dg();">修改</a> 9 <a href="#" class="easyui-linkbutton" id="id_cancel " onclick="delete_dg();" iconcls="icon-cancel" plain="true">删除</a> 10 </td> 11 </tr> 12 </table> 13 </div> 14 <br /> 15 <div id="dd_dg" style=" display:none"> 16 <form id="fm_dg"> 17 <input type="hidden" id="id" name="id"/> 18 EMPNO:<input type="text" id="EMPNO" name="EMPNO" class="easyui-validatebox" required="true" missingMessage="请输入EMPNO" /> 19 <br /> 20 ENAME:<input type="text" id="ENAME" name="ENAME" class="easyui-validatebox" required="true" missingMessage="请输入ENAME" /> 21 <br /> 22 JOB:<input type="text" id="JOB" name="JOB" class="easyui-validatebox" required="true" missingMessage="请输入JOB" /> 23 <br /> 24 MGR:<input type="text" id="MGR" name="MGR" class="easyui-validatebox" required="true" missingMessage="请输入MGR" /> 25 <br /> 26 HIREDATE:<input type="text" id="HIREDATE" name="HIREDATE" class="easyui-validatebox" required="true" missingMessage="请输入HIREDATE" /> 27 <br /> 28 SAL:<input type="text" id="SAL" name="SAL" class="easyui-validatebox" required="true" missingMessage="请输入SAL" /> 29 <br /> 30 COMM:<input type="text" id="COMM" name="COMM" class="easyui-validatebox" required="true" missingMessage="请输入COMM" /> 31 <br /> 32 DEPTNO:<input type="text" id="DEPTNO" name="DEPTNO" class="easyui-validatebox" required="true" missingMessage="请输入DEPTNO" /> 33 <br /> 34 </form> 35 </div> 36 </body>
其中构造表格数据(分页)的js代码如下:
1 <script type="text/javascript"> 2 $(function () { 3 $("#tab").datagrid({ 4 width: 1000, //宽度 5 height: 600, //高度 6 singleSelect: true, //选中一行的设置 7 rownumbers: true, //行号 8 url: "/Ajax/EmpHandler.ashx", //请求路径 9 title: "EMP员工信息", //标题 10 iconCls: "icon-save", //图标 11 collapsible: true, //隐藏按钮 12 //冻结列 13 frozenColumns: [[{ field: "chk", "checkbox": true }]], 14 //列 15 columns: [[ 16 { field: "JSON_empno", title: "EMPNO", width: 80 }, 17 { field: "JSON_ename", title: "ENAME", width: 100 }, 18 { field: "JSON_job", title: "JOB", width: 100 }, 19 { field: "JSON_mgr", title: "MGR", width: 100 }, 20 { field: "JSON_hiredate", title: "HIREDATE", width: 150, formatter: formatterdate }, 21 { 22 field: "JSON_sal", title: "SAL", width: 100, styler: function (value, row, index) { 23 var ival = parseInt(value); 24 if (ival > 2000) { 25 return 'background-color:#ffee00;color:red;'; 26 } 27 } 28 }, 29 { field: "JSON_comm", title: "COMM", width: 100 }, 30 { field: "JSON_deptno", title: "DEPTNO", width: 100 } 31 ]], 32 //传输参数 33 queryParams: { "action": "query" }, 34 pagination: true,//指示分页导航 35 toolbar: "#tool" 36 }); 37 $("#tab").datagrid('getPager').pagination({ 38 beforePageText: "第", 39 afterPageText: "页", 40 displayMsg: "当前 {from} - {to}条数据 共{total} 条数据", 41 pageSize: 10, 42 pageList: [5, 10, 15, 20, 30] 43 44 }); 45 }) 46 47 </script>
增删改js代码如下:
1 // easyui datagrid dateFormatter 2 function formatterdate(val, row) { 3 if (val != null) { 4 var date = new Date(val); 5 return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' 6 + date.getDate(); 7 } 8 } 9 function delete_dg() { 10 var selected = $("#tab").datagrid('getSelected'); 11 if (selected != null) { 12 $.messager.confirm('提示', '是否确定要删除？', function (yes) { 13 if (yes) { 14 var ids = ""; 15 var checked = $("#tab").datagrid('getChecked'); 16 $.each(checked, function (i, row) { 17 ids += row.JSON_empno + ","; 18 }) 19 ids = ids.substring(0, ids.length - 1); 20 $.post("/Ajax/EmpHandler.ashx", { "action": "del", id: ids }, function (data) { 21 $.messager.alert('提示', data); 22 $("#tab").datagrid('reload'); 23 }); 24 } 25 }) 26 } else { 27 $.messager.alert('提示', '您还没有选中一行数，请选中在删除！'); 28 } 29 } 30 function add_dg() { 31 //表单清空 32 $("#fm_dg")[0].reset(); 33 //显示 34 $("#dd_dg").show(); 35 //以窗体的形式展示 36 $("#dd_dg").dialog({ 37 title: "添加EMP信息",//标题 38 iconCls: "icon-add",//图标 39 width: 600,//窗体的宽度 40 height: 400,//窗体的高度 41 modal: true, //遮罩层 42 //按钮集合 43 buttons: [ 44 { 45 text: "添加",//添加按钮的文本值 46 iconCls: "icon-ok", //添加按钮的图标 47 handler: function () { 48 //将数据序列化 49 var parm = $("#fm_dg").serialize(); 50 //中文格式转换 51 var pp = decodeURIComponent(parm, true); 52 //post异步提交 53 $.post("/Ajax/EmpHandler.ashx", { "action": "add", data: pp }, function (data) { 54 $.messager.alert('提示', data); 55 //重新加载datagrid 56 $("#tab").datagrid('reload'); 57 //关闭 58 $("#dd_dg").window('close'); 59 }); 60 } 61 }, 62 { 63 text: "取消", 64 iconCls: "icon-cancel", 65 handler: function () { 66 $("#dd_dg").window("close"); 67 } 68 } 69 ] 70 }); 71 } 72 function edit_dg() { 73 //选中一行，获取这一行的属性的值 74 var selected = $("#tab").datagrid('getSelected'); 75 //判断是否选中 76 if (selected != null) { 77 //$("#id").val(selected.JSON_id); 78 $("#id").val(selected.JSON_empno); 79 $("#EMPNO").val(selected.JSON_empno); 80 $("#ENAME").val(selected.JSON_ename); 81 $("#JOB").val(selected.JSON_job); 82 $("#MGR").val(selected.JSON_mgr); 83 $("#HIREDATE").val(selected.JSON_hiredate); 84 $("#SAL").val(selected.JSON_sal); 85 $("#COMM").val(selected.JSON_comm); 86 $("#DEPTNO").val(selected.JSON_deptno); 87 //取值显示性别 88 //if (selected.JSON_sex == "男") { 89 // $("#sex option").eq(0).attr("selected", "selected"); 90 //} else { 91 // $("#sex option").eq(1).attr("selected", "selected"); 92 //} 93 $("#dd_dg").show(); //显示修改窗体 94 $("#dd_dg").dialog({ 95 title: "编辑信息", 96 iconCls: "icon-edit", 97 modal: true,//遮罩层 98 width: 600, 99 height: 400, 100 buttons: [ 101 { 102 text: "编辑", 103 iconCls: "icon-edit", 104 handler: function () { 105 var parm = $("#fm_dg").serialize(); 106 var pp = decodeURIComponent(parm, true); 107 $.post("/Ajax/EmpHandler.ashx", { "action": "edit", data: pp }, function (data) { 108 $.messager.show({ 109 title: "提示", 110 msg: data 111 }); 112 $("#tab").datagrid("reload"); 113 $("#dd_dg").window("close"); 114 }); 115 } 116 }, 117 { 118 text: "取消", 119 iconCls: "icon-cancel", 120 handler: function () { 121 $("#dd_dg").window('close'); 122 } 123 } 124 ] 125 }); 126 } else { 127 $.messager.alert('提示', '请选中一行在进行编辑'); 128 } 129 }
后台一般处理程序代码如下:
1 namespace myOracle.UI.Ajax 2 { 3 using Bll; 4 using System.Data; 5 using System.Text; 6 using Utility; 7 using Model; 8 /// <summary> 9 /// EmpHandler 的摘要说明 10 /// </summary> 11 public class EmpHandler : IHttpHandler 12 { 13 EmpBll bll = new EmpBll(); 14 public void ProcessRequest(HttpContext context) 15 { 16 context.Response.ContentType = "text/plain"; 17 string action = context.Request["action"]; 18 switch (action) 19 { 20 case "query": 21 Query(); 22 break; 23 case "del": 24 Del(); 25 break; 26 case "add": 27 Add(); 28 break; 29 case "edit": 30 Edit(); 31 break; 32 } 33 } 34 35 private void Edit() 36 { 37 StringBuilder sb = new StringBuilder(); 38 //遍历获取传递过来的字符串 39 foreach (string s in HttpContext.Current.Request.Form.AllKeys) 40 { 41 sb.AppendFormat("{0}:{1}\n", s, HttpContext.Current.Request.Form[s]); 42 } 43 string ss = sb.ToString(); 44 string[] str = ss.Split('&'); 45 string id = str[0].Split('=')[1];//表单的隐藏域id 46 string empno = str[1].Split('=')[1]; 47 string ename = str[2].Split('=')[1]; 48 string job = str[3].Split('=')[1]; 49 //string sex = str[3].Split('=')[1] == "1" ? "男" : "女"; 50 int mgr = int.Parse(str[4].Split('=')[1]); 51 string hiredate = str[5].Split('=')[1]; 52 if(hiredate.IndexOf('+')!=-1) 53 { 54 string[] hd=hiredate.Split('='); 55 hiredate = hd[0]; 56 } 57 int sal = int.Parse(str[6].Split('=')[1]); 58 int comm = int.Parse(str[7].Split('=')[1]); 59 int deptno = int.Parse(str[8].Split('=')[1]); 60 Emp model = new Emp() 61 { 62 EmpNo = int.Parse(id), 63 EName = ename, 64 Job = job, 65 Mgr = mgr, 66 Hiredate = Convert.ToDateTime(hiredate), 67 Sal = sal, 68 Comm = comm, 69 DeptNo = deptno 70 }; 71 bll.Update(model); 72 HttpContext.Current.Response.Write("修改成功！"); 73 } 74 75 private void Add() 76 { 77 StringBuilder sb = new StringBuilder(); 78 //遍历获取传递过来的字符串 79 foreach (string s in HttpContext.Current.Request.Form.AllKeys) 80 { 81 sb.AppendFormat("{0}:{1}\n", s, HttpContext.Current.Request.Form[s]); 82 } 83 string ss = sb.ToString(); 84 string[] str = ss.Split('&'); 85 string id = str[0].Split('=')[1];//表单的隐藏域id 86 string empno = str[1].Split('=')[1]; 87 string ename = str[2].Split('=')[1]; 88 string job = str[3].Split('=')[1]; 89 //string sex = str[3].Split('=')[1] == "1" ? "男" : "女"; 90 int mgr = int.Parse(str[4].Split('=')[1]); 91 string hiredate = str[5].Split('=')[1]; 92 int sal = int.Parse(str[6].Split('=')[1]); 93 int comm = int.Parse(str[7].Split('=')[1]); 94 int deptno = int.Parse(str[8].Split('=')[1]); 95 96 Emp model = new Emp() 97 { 98 EmpNo = int.Parse(empno), 99 EName = ename, 100 Job = job, 101 Mgr = mgr, 102 Hiredate = Convert.ToDateTime(hiredate), 103 Sal = sal, 104 Comm = comm, 105 DeptNo = deptno 106 }; 107 bll.Add(model); 108 HttpContext.Current.Response.Write("添加成功！"); 109 } 110 111 private void Del() 112 { 113 //获取到选中行的id 114 string id = HttpContext.Current.Request["id"]; 115 int count = 0; 116 count = bll.DeleteList(id); 117 if (count > 0) 118 { 119 HttpContext.Current.Response.Write("共删除了" + count + "条数据"); 120 } 121 else 122 { 123 HttpContext.Current.Response.Write("error"); 124 } 125 } 126 127 private void Query() 128 { 129 //一页显示几行数据 130 string pageSize = HttpContext.Current.Request["rows"]; 131 //当前页 132 string pageIndex = HttpContext.Current.Request["page"]; 133 134 DataTable dt = DbHelper.GetDataTableFromIDataReader(bll.GetDataReaderByPage("", int.Parse(pageSize), int.Parse(pageIndex))); 135 int totalCount=bll.GetCount(null); 136 string JsonStr=JSonHelper.CreateJsonParameters(dt, true,totalCount); 137 HttpContext.Current.Response.Write(JsonStr); 138 } 139 140 public bool IsReusable 141 { 142 get 143 { 144 return false; 145 } 146 } 147 } 148 }
本文仅用于学习;
END.
