jQuery EasyUI+ashx实现数据库的CIUD操作

 

jQuery EasyUI+ashx实现数据库的CIUD操作

对上一个小项目做一个回顾总结,涉及到了jQuery EasyUI+ashx实现数据库的CIUD操作,和大家分享一下。基本思路是用easyui做前端,ashx做后端,中间使用json格式交换数据,其中json主要使用Newtonsoft.Json来序列化和反序列化,为简单起见,后端没有分层,数据都是靠拼接sql,使用一个简单封装的DBHelper来时间数据库的操作。

1、数据库表tb_Provider结构

[sql]  view plain  copy
  1. CREATE TABLE [dbo].[tb_Provider](  
  2.     [PrID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [PrName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  4.     [PrPeople] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  5.     [PrPhone] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  6.     [PrFax] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  7.     [PrRemark] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  8.     [Editer] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  9.     [EditDate] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,  
  10.  CONSTRAINT [PK_tb_Provider] PRIMARY KEY CLUSTERED   
  11. (  
  12.     [PrID] ASC  
  13. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ONON [PRIMARY]  
  14. ON [PRIMARY]  

其中PrID是整形自动增长的主关键字,其他字段都为字符串类型。

2、对应的实体Provider.cs

[csharp]  view plain  copy
  1. using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.HtmlControls;  
  9. using System.Web.UI.WebControls;  
  10. using System.Web.UI.WebControls.WebParts;  
  11. using System.Xml.Linq;  
  12.   
  13. /// <summary>  
  14. ///Provider 的摘要说明  
  15. /// </summary>  
  16. public class Provider  
  17. {  
  18.     public Provider()  
  19.     {  
  20.         //  
  21.         //TODO: 在此处添加构造函数逻辑  
  22.         //  
  23.     }  
  24.     
  25.     public int PrID { getset; }  
  26.     public string PrName { getset; }  
  27.     public string PrPeople { getset; }  
  28.     public string PrPhone { getset; }  
  29.     public string PrFax { getset; }  
  30.     public string PrRemark { getset; }  
  31.     public string Editer { getset; }  
  32.     public string EditDate { getset; }  
  33. }  

3、前端界面Provider.aspx

[html]  view plain  copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Provider.aspx.cs" Inherits="sys_Provider" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head id="Head1" runat="server">  
  7.     <title>供应商管理</title>  
  8.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  9.     <link rel="stylesheet" href="easyui/themes/default/easyui.css" type="text/css" media="screen" />  
  10.     <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css" media="screen" />  
  11.     <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />  
  12.       
  13.     <script src="easyui/jquery-1.7.2.min.js" type="text/javascript"></script>  
  14.     <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>  
  15.     <script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>  
  16.     <script src="js/myValid.js" type="text/javascript"></script>  
  17.     <style type="text/css">  
  18.         input,textarea{  
  19.             width:200px;  
  20.             border:1px solid #ccc;  
  21.             padding:2px;  
  22.             font-size:12px;  
  23.         }  
  24.         .grid{  width: 100%; font-size:12px; border:1px solid #8DB2E3; border-collapse: collapse}  
  25.         .grid td,.grid th{ border:1px solid #8DB2E3;padding:3px;   }  
  26.     </style>  
  27.       
  28.     <script src="js/Provider.js" type="text/javascript"></script>  
  29. </head>  
  30. <body class="easyui-layout">  
  31. <div region="center" style="padding:5px;" border="false">  
  32.   
  33.     <table id="tt" fit="true">  
  34.     </table>  
  35.       
  36.     <div id="data-window" class="easyui-window" data-options="title:'供应商信息设置',iconCls:'icon-edit',modal:true,maximizable:false,minimizable:false"  
  37.      style="background:#fafafa;width:410px;height:300px;padding:5px;">  
  38.         <div class="easyui-layout" data-options="fit:true">  
  39.         <div data-options="region:'center',border:false" style="padding:10px;background:#fff;border:1px solid #ccc;">  
  40.             <form method="post">  
  41.             <table class="grid">  
  42.                      <tr>  
  43.                         <td colspan="2"><input id="PrID" name="PrID" type="hidden" />  
  44.                         </td>  
  45.                     </tr>  
  46.                     <tr>  
  47.                       
  48.                         <td>供应商名称:  
  49.                         </td>  
  50.                         <td><input name="PrName" class="easyui-validatebox" data-options="required:true"></input>  
  51.                         </td>  
  52.                     </tr>  
  53.                     <tr>  
  54.                         <td>联系人:  
  55.                         </td>  
  56.                         <td><input name="PrPeople" class="easyui-validatebox" data-options="required:true"></input>  
  57.                         </td>  
  58.                     </tr>  
  59.                     <tr>  
  60.                         <td>联系电话:  
  61.                         </td>  
  62.                         <td><input name="PrPhone" class="easyui-validatebox" data-options="required:true,validType:'tel'"></input>  
  63.                         </td>  
  64.                     </tr>  
  65.                     <tr>  
  66.                         <td>传真:  
  67.                         </td>  
  68.                         <td><input name="PrFax" class="easyui-validatebox" data-options="validType:'tel'"></input>  
  69.                         </td>  
  70.                     </tr>  
  71.                     <tr>  
  72.                         <td>备注:  
  73.                         </td>  
  74.                         <td>  
  75.                         <textarea name="PrRemark" class="easyui-validatebox"  style="height:42px;font-size:12px;" ></textarea>  
  76.                         </td>  
  77.                     </tr>                   
  78.                       
  79.                           
  80.                 </table>  
  81.             </form>  
  82.         </div>  
  83.         <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">  
  84.             <a href="javascript:void(0)"  class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="saveData()" id="btn-save">保存</a>  
  85.             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeWindow()" id="btn-cancel">取消</a>  
  86.         </div>  
  87.         </div>  
  88.     </div>  
  89.       
  90.     <div id="search" title="搜索" iconCls="icon-search" modal="true" maximizable="false" minimizable="false" style="background:#fafafa;width:380px;height:100px;">  
  91.         <div style="padding:20px 20px 20px 20px;">  
  92.             <input id="ss"></input>  
  93.             <div id="mm" style="width:120px">  
  94.                 <div data-options="name:'PrName',iconCls:'icon-ok'">供应商名称</div>  
  95.                 <div data-options="name:'PrPeople'">联系人</div>  
  96.                 </div>  
  97.         </div>  
  98.     </div>  
  99.       
  100. </div>  
  101. </body>  
  102. </html>  

其中页面主要有一个datagrid(table tt)和两个window,myValid.js是一个自定义表单验证,详情可以google疯狂秀才,Provider.js在下面。

4、前端JS脚本Provider.js

[javascript]  view plain  copy
  1. $(function(){  
  2.     grid = $('#tt').datagrid({  
  3.         pageSize:15,  
  4.         pageList:[10,15,20,30],  
  5.         fit: true,//自动大小    
  6.         rownumbers:true,//行号   
  7.         url:'ashx/ProviderHandler.ashx',  
  8.         //loadMsg:'数据装载中......',    
  9.         singleSelect:true,//单行选取  
  10.         pagination:true,//显示分页  
  11.         frozenColumns:[[  
  12.                   {field:'PrID',title:'编号',width:40},  
  13.                   {field:'PrName',title:'供应商名称',width:100,sortable:true},  
  14.                   {field:'PrPeople',title:'联系人',width:100},  
  15.                   {field:'PrPhone',title:'联系电话',width:100},  
  16.                   {field:'PrFax',title:'传真',width:100}  
  17.                         ]],  
  18.         columns:[[  
  19.                   {field:'PrRemark',title:'备注',width:100},  
  20.                   {field:'Editer',title:'修改人',width:100},  
  21.                   {field:'EditDate',title:'修改日期',width:100}  
  22.                   ]],  
  23.         toolbar:[{  
  24.             text:'新增',  
  25.             iconCls:'icon-add',  
  26.             handler:newData  
  27.         },'-',{  
  28.             text:'修改',  
  29.             iconCls:'icon-edit',  
  30.             handler:editData  
  31.         },'-',{  
  32.             text:'删除',  
  33.             iconCls:'icon-remove',  
  34.             handler:delData  
  35.         },'-',{  
  36.             text:'查询',  
  37.             iconCls:'icon-search',  
  38.             handler:newSearch  
  39.         },'-',{  
  40.             text:'刷新',  
  41.             iconCls:'icon-reload',  
  42.             handler:reLoad  
  43.         }]  
  44.     });  
  45.   
  46.     //设置分页控件   
  47.     var p = grid.datagrid('getPager');   
  48.     $(p).pagination({   
  49.         pageSize: 15,//每页显示的记录条数,默认为10   
  50.         pageList: [10,15,20,30]//可以设置每页记录条数的列表   
  51.     });  
  52.   
  53.     win = $('#data-window').window({  
  54.         closed:true  
  55.     });  
  56.     form = win.find('form');  
  57.       
  58.     $('#ss').searchbox({    
  59.         width:300,  
  60.         searcher:function(value,name){    
  61.             //alert(value + "," + name);   
  62.             grid.datagrid('load', { "searchKey": name, "searchValue": value });  
  63.             //alert(value + "," + name);   
  64.         },    
  65.         menu:'#mm',    
  66.         prompt:'请输入关键字'   
  67.     });  
  68.       
  69.     search = $('#search').window({  
  70.         closed:true  
  71.     });  
  72. });  
  73.   
  74. var grid;  
  75. var win;  
  76. var form;  
  77. var search;  
  78. //显示搜索窗口  
  79. function newSearch(){  
  80.     search.window('open');  
  81. }  
  82. //重新加载datagrid  
  83. function reLoad(){  
  84.     grid.datagrid('load', {url:'ashx/ProviderHandler.ashx'});  
  85. }  
  86. //显示新增数据窗口  
  87. function newData(){  
  88.     win.window('open');  
  89.     form.form('clear');  
  90.     form.url = 'ashx/ProviderActionHandler.ashx?action=add';  
  91. }  
  92. //显示编辑数据窗口  
  93. function editData(){  
  94.     var row = grid.datagrid('getSelected');  
  95.     if (row){  
  96.         win.window('open');  
  97.         form.form('load',row);  
  98.         form.url = 'ashx/ProviderActionHandler.ashx?action=edit';  
  99.     } else {  
  100.         $.messager.show({  
  101.             title:'警告',   
  102.             msg:'请先选择数据记录。'  
  103.         });  
  104.     }  
  105. }  
  106. //保存新增或者修改的数据  
  107. function saveData(){  
  108.  if(form.form('validate'))  
  109.  {  
  110.     var query=createParam();  
  111.     $.post(form.url, query,  
  112.         function(result) {  
  113.              if (result.status==1) {  
  114.                grid.datagrid('reload');  
  115.                 win.window('close');  
  116.                 $.messager.show({  
  117.                     title:'提示',   
  118.                     msg:'数据记录保存成功。'  
  119.                 });  
  120.              } else {  
  121.                $.messager.alert('错误',result.msg,'error');  
  122.              }  
  123.      },'json');  
  124.    }  
  125. }  
  126. //删除记录,参数是记录的主关键字  
  127. function delData(){  
  128.     var row = grid.datagrid('getSelected');  
  129.     if (row){  
  130.         $.messager.confirm('Confirm''您确定要删除该数据吗?'function(r) {  
  131.             if (r){  
  132.              $.post('ashx/ProviderActionHandler.ashx?action=del', { id: row.PrID },   
  133.                     function(result) {  
  134.                       if (result.status==1) {  
  135.                           grid.datagrid('reload');  
  136.                         } else {  
  137.                             $.messager.alert('错误',result.msg,'error');  
  138.                         }  
  139.                     },  
  140.                   'json');  
  141.             }  
  142.         });  
  143.     } else {  
  144.         $.messager.show({  
  145.             title:'警告',   
  146.             msg:'请先选择数据记录。'  
  147.         });  
  148.     }  
  149. }  
  150. function closeWindow(){  
  151.     win.window('close');  
  152. }  
  153. //将表单序列化为json  
  154. function createParam()  
  155. {  
  156.     var query = form.serializeArray();  
  157.     query = convertArray(query);  
  158.     return "json=" + JSON.stringify(query);  
  159. }  
  160.   
  161. //主要是推荐这个函数。它将jquery系列化后的值转为name:value的形式。  
  162. function convertArray(o) {   
  163.     var v = {};  
  164.     for (var i in o) {  
  165.         if (o[i].name != '__VIEWSTATE') {  
  166.             if (typeof (v[o[i].name]) == 'undefined')  
  167.                 v[o[i].name] = o[i].value;  
  168.             else  
  169.                 v[o[i].name] += "," + o[i].value;  
  170.         }  
  171.     }  
  172.     return v;  
  173. }  

懂easyui的肯定都能看懂,其中主要是进行了数据的增加、修改、删除以及查询。

5、后端查询ProviderHandler.ashx

[csharp]  view plain  copy
  1. <%@ WebHandler Language="C#" Class="ProviderHandler" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Text;  
  6. using System.Collections;  
  7. using System.Data;  
  8.   
  9. public class ProviderHandler : IHttpHandler  
  10. {  
  11.   
  12.     public void ProcessRequest(HttpContext context)  
  13.     {  
  14.         int pageSize = Convert.ToInt32(context.Request["rows"]);//通过这个获取得到pageSize  
  15.         int pageNum = Convert.ToInt32(context.Request["page"]);//通过这个获取得到pageNum  
  16.         string keyname = context.Request["searchKey"];//查询的关键字  
  17.         string keyvalue = context.Request["searchValue"];//查询的字段  
  18.   
  19.         var sort = context.Request["sort"];//排序字段  
  20.         var order = context.Request["order"];//升序降序  
  21.   
  22.         string condition = " where 1=1";//查询条件  
  23.         if (keyname != null)  
  24.         {  
  25.             condition += " and " + keyname + " like '%" + keyvalue + "%'";  
  26.         }  
  27.   
  28.         string sqlcount = "select count(*) from tb_Provider" + condition;  
  29.         string sql = "select * from tb_Provider" + condition;  
  30.   
  31.         string mysort = "PrID";//排序情况  
  32.         if (sort != null)  
  33.         {  
  34.             mysort = sort + " " + order;  
  35.         }  
  36.   
  37.         int count = DBHelper.GetScalar(sqlcount);  
  38.         DataTable dt = DBHelper.ExecuteProcQuery("proc_QueryPagination", sql, pageNum, pageSize, "PrID", mysort);//存储过程  
  39.   
  40.         Hashtable ht = new Hashtable();  
  41.         ht.Add("total", count);  
  42.         ht.Add("rows", dt);  
  43.         string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht);//序列化datatable  
  44.   
  45.   
  46.         context.Response.Clear();  
  47.         context.Response.ContentEncoding = Encoding.UTF8;  
  48.         context.Response.ContentType = "application/json";  
  49.         context.Response.Write(strJson);  
  50.         context.Response.Flush();  
  51.         context.Response.End();  
  52.   
  53.     }  
  54.   
  55.     public bool IsReusable  
  56.     {  
  57.         get  
  58.         {  
  59.             return false;  
  60.         }  
  61.     }  
  62.   
  63. }  

主要通过context.Request获取前端传过来的参数使用分页存储过程proc_QueryPagination查询数据,再使用Newtonsoft.Json序列化后返回给前台。

6、用于分页查询的存储过程proc_QueryPagination

[sql]  view plain  copy
  1. CREATE PROCEDURE [dbo].[proc_QueryPagination]  
  2. (  
  3. @SQL nVARCHAR(4000), --不带排序语句的SQL语句  
  4. @Page int--页码  
  5. @RecsPerPage int--每页容纳的记录数  
  6. @ID VARCHAR(255), --需要排序的不重复的ID号  
  7. @Sort VARCHAR(255) --排序字段及规则  
  8. )  
  9. AS  
  10.   
  11. DECLARE @Str nVARCHAR(4000)  
  12.   
  13. SET @Str='SELECT TOP '+CAST(@RecsPerPage AS VARCHAR(20))+' * FROM   
  14. ('+@SQL+') T WHERE T.'+@ID+' NOT IN (SELECT TOP '+CAST((@RecsPerPage*(@Page-1))   
  15. AS VARCHAR(20))+' '+@ID+' FROM ('+@SQL+') T9 ORDER BY '+@Sort+') ORDER BY '+@Sort  
  16.   
  17. PRINT @Str  
  18.   
  19. EXEC sp_ExecuteSql @Str  
注意存储过程的参数。

7、后端增删改ProviderActionHandler.ashx

[csharp]  view plain  copy
  1. <%@ WebHandler Language="C#" Class="ProviderActionHandler" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Text;  
  6. using System.Data;  
  7. using System.Web.UI.WebControls;  
  8. using System.Web.SessionState;  
  9. using Newtonsoft.Json;  
  10. using Newtonsoft.Json.Converters;  
  11.   
  12. public class ProviderActionHandler : IHttpHandler, IRequiresSessionState  
  13. {  
  14.   
  15.     public void ProcessRequest(HttpContext context)  
  16.     {  
  17.         context.Response.ContentType = "text/plain";  
  18.         var action = context.Request["action"];  
  19.         switch (action)  
  20.         {  
  21.             case "add":  
  22.                 {  
  23.                     add(context);  
  24.                     break;  
  25.                 }  
  26.             case "edit":  
  27.                 {  
  28.                     edit(context);  
  29.                     break;  
  30.                 }  
  31.             case "del":  
  32.                 del(context);  
  33.                 break;  
  34.             default:  
  35.                 break;  
  36.         }  
  37.     }  
  38.   
  39.     private void add(HttpContext context)  
  40.     {  
  41.         var json = HttpContext.Current.Request["json"];  
  42.         var jsetting = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };  
  43.         Provider single = (Provider)JsonConvert.DeserializeObject<Provider>(json, jsetting);//反序列化  
  44.   
  45.         Admin admin = (Admin)context.Session["AdminUser"];  
  46.         string sql = "insert into tb_Provider(PrName,PrPeople,PrPhone,PrFax,PrRemark,Editer,EditDate) values('" + single.PrName  
  47.             + "','" + single.PrPeople + "','" + single.PrPhone + "','" + single.PrFax + "','" + single.PrRemark  
  48.             + "','" + admin.UserName + "','" + DateTime.Now.ToString() + "')";  
  49.         result rs = new result();  
  50.         if (DBHelper.ExecuteCommand(sql) == 1)  
  51.         {  
  52.             rs.status = 1;  
  53.             rs.msg = "添加成功!";  
  54.         }  
  55.         else  
  56.         {  
  57.             rs.status = 0;  
  58.             rs.msg = "服务器繁忙,请稍后再试!";  
  59.         }  
  60.         rs.item = "[]";  
  61.         string strJson = JsonConvert.SerializeObject(rs);  
  62.   
  63.         context.Response.Clear();  
  64.         context.Response.ContentEncoding = Encoding.UTF8;  
  65.         context.Response.ContentType = "application/json";  
  66.         context.Response.Write(strJson);  
  67.         context.Response.Flush();  
  68.         context.Response.End();  
  69.     }  
  70.   
  71.     private void edit(HttpContext context)  
  72.     {  
  73.         var json = HttpContext.Current.Request["json"];  
  74.         var jsetting = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };  
  75.         Provider single = (Provider)JsonConvert.DeserializeObject<Provider>(json, jsetting);//反序列化  
  76.   
  77.         Admin admin = (Admin)context.Session["AdminUser"];  
  78.         string sql = "update tb_Provider set PrName='" + single.PrName  
  79.             + "',PrPeople='" + single.PrPeople + "',PrPhone='" + single.PrPhone + "',PrFax='" + single.PrFax + "',PrRemark='" + single.PrRemark  
  80.             + "',Editer='" + admin.UserName + "',EditDate='" + DateTime.Now.ToString() + "' where PrID=" + single.PrID;  
  81.         result rs = new result();  
  82.         if (DBHelper.ExecuteCommand(sql) == 1)  
  83.         {  
  84.             rs.status = 1;  
  85.             rs.msg = "修改成功!";  
  86.         }  
  87.         else  
  88.         {  
  89.             rs.status = 0;  
  90.             rs.msg = "服务器繁忙,请稍后再试!";  
  91.         }  
  92.         rs.item = "[]";  
  93.         string strJson = JsonConvert.SerializeObject(rs);  
  94.   
  95.         context.Response.Clear();  
  96.         context.Response.ContentEncoding = Encoding.UTF8;  
  97.         context.Response.ContentType = "application/json";  
  98.         context.Response.Write(strJson);  
  99.         context.Response.Flush();  
  100.         context.Response.End();  
  101.     }  
  102.   
  103.     private void del(HttpContext context)  
  104.     {  
  105.         var id = HttpContext.Current.Request["id"];  
  106.   
  107.         string sql = "delete from tb_Provider where PrID='" + id + "'";  
  108.         result rs = new result();  
  109.         if (DBHelper.ExecuteCommand(sql) == 1)  
  110.         {  
  111.             rs.status = 1;  
  112.             rs.msg = "删除成功!";  
  113.         }  
  114.         else  
  115.         {  
  116.             rs.status = 0;  
  117.             rs.msg = "服务器繁忙,请稍后再试!";  
  118.         }  
  119.         rs.item = "[]";  
  120.         string strJson = JsonConvert.SerializeObject(rs);  
  121.   
  122.         context.Response.Clear();  
  123.         context.Response.ContentEncoding = Encoding.UTF8;  
  124.         context.Response.ContentType = "application/json";  
  125.         context.Response.Write(strJson);  
  126.         context.Response.Flush();  
  127.         context.Response.End();  
  128.     }  
  129.   
  130.     public bool IsReusable  
  131.     {  
  132.         get  
  133.         {  
  134.             return false;  
  135.         }  
  136.     }  
  137.   
  138. }  

主要实现增删改功能,其中增加修改时,用到了Newtonsoft.Json反序列化json。

8、实现效果

jQuery EasyUI+ashx实现数据库的CIUD操作_第1张图片

jQuery EasyUI+ashx实现数据库的CIUD操作_第2张图片

jQuery EasyUI+ashx实现数据库的CIUD操作_第3张图片

jQuery EasyUI+ashx实现数据库的CIUD操作_第4张图片

9、总结

如果你跟我一样,美工很烂的话,使用easyui来做界面会是一个不错的选择,我的学习线路是JavaScript-》jquery-》easyui,当然同类的界面框还有DWZ等的也都是不错的选择。

你可能感兴趣的:(jquery,EasyUI+ashx实现)