前言
用asp.net结合easyui做个一个数据网格的页面，包括对数据的增删改查，界面如下：
 一、UI界面
先写UI界面，代码如下，记得引入相关js和css文件
  1. <body>  
    2. 

  2.     <table id="tb1"></table>  
    3. 

  3.     <div id="tb" style="padding:5px">  
    4. 

  4.         <div style="margin-bottom:5px">  
    5. 

  5.             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="reload()">刷新</a>  
    6. 

  6.             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="Add()">添加</a>
    7. 

  7.             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="edit()">修改</a>
    8. 

  8.             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="destroy()">删除</a>  
    9. 

  9.         </div>  
    10. 

  10.         <div>  
    11. 

  11.             查询名称：<input type="text" id="Eq" name="Eq" style="width:150px"/>  
    12. 

  12.             <select id="order" class="easyui-combobox" style="width:100px">  
    13. 

  13.                 <option value="asc">升序</option>  
    14. 

  14.                 <option value="desc">降序</option>  
    15. 

  15.             </select>  
    16. 

  16.             <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="obj.search()">查询</a>  
    17. 

  17.         </div>  
    18. 

    19. 

  19.     </div>  
    20. 

    21. 

  21.     <%-- 弹窗  Start--%>  
    22. 

  22.      <div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px"  data-options="closed:true,buttons:'#dlg-buttons'">  
    23. 

  23.      <div class="ftitle">设备信息</div>  
    24. 

  24.      <form id="fm" method="post" novalidate="novalidate">  
    25. 

  25.          <div class="fitem">  
    26. 

  26.              <label>产品编号:</label>  
    27. 

  27.              <input id="ProductID" name="ProductID" class="easyui-validatebox" data-options="required:false"/>  
    28. 

  28.          </div>  
    29. 

  29.          <div class="fitem">  
    30. 

  30.              <label>产品名称:</label>  
    31. 

  31.              <input id="Name" name="Name" class="easyui-validatebox" data-options="required:true"/>  
    32. 

  32.          </div>  
    33. 

  33.          <div class="fitem">  
    34. 

  34.              <label>描述:</label>  
    35. 

  35.              <input id="Description" name="Description" class="easyui-validatebox" data-options="required:true"/>  
    36. 

  36.          </div>  
    37. 

  37.          <div class="fitem">  
    38. 

  38.              <label>种类:</label>  
    39. 

  39.              <input id="Category" name="Category" class="easyui-validatebox" data-options="required:true"/>  
    40. 

  40.          </div>  
    41. 

  41.          <div class="fitem">  
    42. 

  42.              <label>价格:</label>  
    43. 

  43.              <input id="Price" name="Price" class="easyui-validatebox" data-options="required:true,validType:'intOrFloat'"/>  
    44. 

  44.          </div>  
    45. 

  45.      </form>  
    46. 

  46.  </div>  
    47. 

  47.  <div id="dlg-buttons">  
    48. 

  48.      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="save()" style="width:90px">Save</a>  
    49. 

  49.      <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>  
    50. 

  50.  </div>  
    51. 

  51.  <%-- 弹窗  End --%> 
    52. 

  52.     
    53. 

  53. </body>
二、JS加载
关于datagrid的加载，我用js，要记住列名要和数据源对应
  1. $(function () {
    2. 

  2.     $('#tb1').datagrid({
    3. 

  3.         url: '../Handler/GetDataFormSql.ashx',
    4. 

  4.         width: 1200,
    5. 

  5.         title: '管理',
    6. 

  6.         method: 'get',
    7. 

  7.         toolbar: '#tb',
    8. 

  8.         //rownumbers: true,
    9. 

  9.         singleSelect:true,
    10. 

  10.         columns: [[
    11. 

  11.             { field: 'ProductID', title: '编号', width: 150 },
    12. 

  12.             { field: 'Name', title: '名称', width: 150 },
    13. 

  13.             { field: 'Description', title: '描述', width: 250 },
    14. 

  14.             { field: 'Category', title: '种类', width: 150 },
    15. 

  15.             { field: 'Price', title: '价格', width: 150 }
    16. 

  16.         ]],
    17. 

  17.         pagination: true,
    18. 

  18.         pageSize: 20,
    19. 

  19.         pageList: [20, 30 , 40]
    20. 

  20.     });
    21. 

  21. })
三、一般处理程序
GetDataFormSql.ashx 文件内容：
  1.  public void ProcessRequest(HttpContext context)
    2. 

  2.         {
    3. 

  3.             context.Response.ContentType = "text/plain";
    4. 

    5. 

  5.             int page = 1, rows = 10;
    6. 

    7. 

  7.             //EasyUI自带的两个参数rows与page ,表示当前页与行数  
    8. 

  8.             if (context.Request.QueryString["rows"] != null)
    9. 

  9.             {
    10. 

  10.                 rows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
    11. 

  11.             }
    12. 

  12.             if (context.Request.QueryString["page"] != null)
    13. 

  13.             {
    14. 

  14.                 page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
    15. 

  15.             }
    16. 

    17. 

  17.             //查询分页 stratIndex endIndex  
    18. 

  18.             int stratIndex, endIndex;
    19. 

  19.             stratIndex = (page - 1) * rows + 1;
    20. 

  20.             endIndex = page * rows;
    21. 

    22. 

  22.             //查询排序 key order  
    23. 

  23.             string key = "", order = "desc";  
    24. 

  24.             if (context.Request.QueryString["key"] != null)  
    25. 

  25.             {  
    26. 

  26.                 key = context.Request.QueryString["key"].ToString().Trim();  
    27. 

  27.             }  
    28. 

  28.             if (context.Request.QueryString["order"] != null)  
    29. 

  29.             {  
    30. 

  30.                 order = context.Request.QueryString["order"].ToString().Trim();  
    31. 

  31.             }
    32. 

    33. 

  33.             //设置模糊查询
    34. 

  34.             StringBuilder sqlWhere = new StringBuilder();
    35. 

  35.             if (key != "") {
    36. 

  36.                 sqlWhere.AppendFormat("upper(ProductID) like '%{0}%' or "+
    37. 

  37.                                                             "upper(Name) like '%{0}%' or "+
    38. 

  38.                                                             "upper(Description) like '%{0}%' or " +
    39. 

  39.                                                             "upper(Category) like '%{0}%' or " +
    40. 

  40.                                                             "upper(Price) like '%{0}%'",key);
    41. 

  41.             }
    42. 

    43. 

  43.             //查询数据库  
    44. 

  44.             DAL.SqlHelper sqlhelper = new DAL.SqlHelper();
    45. 

  45.             //获取查询数据的行数  
    46. 

  46.             int count = sqlhelper.EUGetRecordCount(sqlWhere.ToString());
    47. 

  47.             //封装数据到dataset  
    48. 

  48.             DataSet ds = sqlhelper.GetListByPagebykey(sqlWhere.ToString(), order, stratIndex, endIndex);
    49. 

  49.             //将dataset转化为Json格式  
    50. 

  50.             string strToJon = DAL.ToJson.DatasetJson(ds, count);
    51. 

  51.             context.Response.Write(strToJon);
    52. 

  52.             context.Response.End();  
    53. 

  53.         }
三、DAL数据访问层
接下来就是数据访问层SqlHelper的代码
  1. public int EUGetRecordCount(string key)
    2. 

  2.         {
    3. 

  3.             StringBuilder strSql = new StringBuilder();
    4. 

  4.             strSql.Append("select count(1) FROM Products ");
    5. 

  5.             if (key.Trim() != "")
    6. 

  6.             {
    7. 

  7.                 strSql.Append("where " + key);
    8. 

  8.             }
    9. 

  9.             object obj = DBHelper.GetSingle(strSql.ToString());
    10. 

  10.             if (obj == null)
    11. 

  11.             {
    12. 

  12.                 return 0;
    13. 

  13.             }
    14. 

  14.             else
    15. 

  15.             {
    16. 

  16.                 return Convert.ToInt32(obj);
    17. 

  17.             }
    18. 

  18.         }
    19. 

  19. public DataSet GetListByPagebykey(string Key, string order, int startIndex, int endIndex)
    20. 

  20.         {
    21. 

  21.             StringBuilder strSql = new StringBuilder();
    22. 

  22.             strSql.Append("SELECT * FROM ( ");
    23. 

  23.             strSql.Append(" SELECT ROW_NUMBER() OVER (");
    24. 

  24.             if (!string.IsNullOrEmpty(Key.Trim()))
    25. 

  25.             {
    26. 

  26.                 strSql.Append("order by T." + Key+" " + order);
    27. 

  27.             }
    28. 

  28.             else
    29. 

  29.             {
    30. 

  30.                 strSql.Append("order by T.ProductID asc");
    31. 

  31.             }
    32. 

  32.             strSql.Append(")AS Row, T.*  from  Products T ");
    33. 

  33.             if (!string.IsNullOrEmpty(Key.Trim()))
    34. 

  34.             {
    35. 

  35.                 strSql.Append(" WHERE " + Key);
    36. 

  36.             }
    37. 

  37.             strSql.Append(" ) TT");
    38. 

  38.             strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
    39. 

  39.             return DBHelper.Query(strSql.ToString());
    40. 

  40.         }
四、辅助方法
还需要dataset转json的代码，其实这个可以从网上找到
  1. public class ToJson
    2. 

  2.     {
    3. 

  3.         /// <summary>
    4. 

  4.         /// DataSet转换成Json格式  
    5. 

  5.         /// </summary>  
    6. 

  6.         /// <param name="ds">DataSet</param> 
    7. 

  7.         /// <returns></returns>  
    8. 

  8.         public static string DatasetJson(DataSet ds, int total = -1)
    9. 

  9.         {
    10. 

  10.             StringBuilder json = new StringBuilder();
    11. 

    12. 

  12.             foreach (DataTable dt in ds.Tables)
    13. 

  13.             {
    14. 

  14.                 json.Append("{\"total\":");
    15. 

  15.                 if (total == -1)
    16. 

  16.                 {
    17. 

  17.                     json.Append(dt.Rows.Count);
    18. 

  18.                 }
    19. 

  19.                 else
    20. 

  20.                 {
    21. 

  21.                     json.Append(total);
    22. 

  22.                 }
    23. 

  23.                 json.Append(",\"rows\":");
    24. 

  24.                 json.Append(DataTableJson(dt));
    25. 

  25.                 json.Append("]}");
    26. 

  26.             } return json.ToString();
    27. 

  27.         }
    28. 

  28.         private static string DataTableJson(DataTable dt)
    29. 

  29.         {
    30. 

  30.             StringBuilder jsonBuilder = new StringBuilder();
    31. 

  31.             jsonBuilder.Append("[");
    32. 

  32.             for (int i = 0; i < dt.Rows.Count; i++)
    33. 

  33.             {
    34. 

  34.                 jsonBuilder.Append("{");
    35. 

  35.                 for (int j = 0; j < dt.Columns.Count; j++)
    36. 

  36.                 {
    37. 

  37.                     jsonBuilder.Append("\"");
    38. 

  38.                     jsonBuilder.Append(dt.Columns[j].ColumnName);
    39. 

  39.                     jsonBuilder.Append("\":\"");
    40. 

  40.                     jsonBuilder.Append(dt.Rows[i][j].ToString());
    41. 

  41.                     jsonBuilder.Append("\",");
    42. 

  42.                 }
    43. 

  43.                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    44. 

  44.                 jsonBuilder.Append("},");
    45. 

  45.             }
    46. 

  46.             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    47. 

  47.             return jsonBuilder.ToString();
    48. 

  48.         }
    49. 

  49.     }
到这就大致实现了网格加载的功能，还剩四个增删改查的按钮功能，这里只列出增加数据的数据访问层代码，其中应用了SqlParameter参数化SQL，可以防止SQL注入
  1.  public int Add(Products model)
    2. 

  2.         {
    3. 

  3.             StringBuilder strSql = new StringBuilder();
    4. 

  4.             strSql.Append("insert into Products(");
    5. 

  5.             strSql.Append("Name,Description,Category,Price)");
    6. 

  6.             strSql.Append(" values (");
    7. 

  7.             strSql.Append("@Name,@Description,@Category,@Price)");
    8. 

  8.             strSql.Append(";select @@IDENTITY");
    9. 

  9.             SqlParameter[] parameters = {  
    10. 

  10.                 new SqlParameter("@Name", SqlDbType.NVarChar,255),  
    11. 

  11.                 new SqlParameter("@Description", SqlDbType.NVarChar,255),  
    12. 

  12.                 new SqlParameter("@Category", SqlDbType.NVarChar,255),  
    13. 

  13.                 new SqlParameter("@Price ", SqlDbType.Decimal,255),  
    14. 

  14.         };
    15. 

  15.             //parameters[0].Value = model.ProductID;
    16. 

  16.             parameters[0].Value = model.Name;
    17. 

  17.             parameters[1].Value = model.Description;
    18. 

  18.             parameters[2].Value = model.Category;
    19. 

  19.             parameters[3].Value = model.Price;
    20. 

    21. 

  21.             object obj = DBHelper.GetSingle(strSql.ToString(), parameters);
    22. 

  22.             if (obj == null)
    23. 

  23.             {
    24. 

  24.                 return 0;
    25. 

  25.             }
    26. 

  26.             else
    27. 

  27.             {
    28. 

  28.                 return Convert.ToInt32(obj);
    29. 

  29.             }
    30. 

  30.         }

EasyUI笔记（六）数据表格的更多相关文章

  1. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  2. 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  3. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  4. Jquery EasyUI datagrid后台数据表格生成及分页详解

    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...

  5. （五）EasyUI使用——datagrid数据表格

    DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...

  6. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  10. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

随机推荐

  1. 曹工说Spring Boot源码（13）-- AspectJ的运行时织入（Load-Time-Weaving），基本内容是讲清楚了（附源码）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  2. this和static

    [this] 指的是明确的标记本类的结构 当前正在调用类中方法的对象,不是一个固定的 java中以“{}”为界限.如果现在属性名称和参数名称重名,那么默认情况下,如果没有加任何的限制,指的是最近的“{ ...

  3. 实验10: RIP

    实验7-1 :  RIPV1 实验目的通过本实验可以掌握:1. 在路由器上启动RIPv1 路由进程2. 启用参与路由协议的接口,并且通告网络3. 理解路由表的含义4. 查看和调试RIPv1 路由协议相 ...

  4. C#中? 和 ??的区别

    背景 最近在调试C#项目的时候,发现一个比较关于??的特殊用法,当时把我给惊到了,所以特意用这篇短短的笔记来记录一下我的解惑过程: 示例代码: showsomething(isNameNull ?? ...

  5. ICC中对Skew进行Debug的好工具--Interactive CTS Window

    本文转自:自己的微信公众号<集成电路设计及EDA教程> ​以后打算交替着推送多种EDA工具的教程而不只是单纯针对某个工具,依次来满足不同粉丝的需求. 这里分享一篇多年之前写的推文,虽然时间 ...

  6. 9. HanLP《自然语言处理入门》笔记--9.关键词、关键句和短语提取

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 9. 信息抽取 信息抽取是一个宽泛的概念,指的是从非结构化文本中提取结构化信息的一 ...

  7. Java 添加、替换、删除PDF中的图片

    概述 本文介绍通过java程序向PDF文档添加图片,以及替换和删除PDF中已有的图片.另外,关于图片的操作还可参考设置PDF 图片背景.设置PDF图片水印.读取PDF中的图片.将PDF保存为图片等文章 ...

  8. wordpress 如何正确升级

    http://www.admin5.com/article/20141230/578710.shtml 正确的版本升级应该是,备份数据库和文件,然后禁用所有的插件后在执行升级.这样也避免不了升级过后启 ...

  9. [python]bytes和str

    Python 3.6.1 (v3.6.1:69c0db5050, Mar 21 2017, 01:21:04) [GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] ...

  10. DOCKER 学习笔记9 Kubernetes (K8s) 生产级容器编排 上

    前言 在上一节的学习中.我们已经可以通过最基本的 Docker Swarm 创建集群,然后在集群里面加入我们需要运行的任务 以及任务的数量 这样我们就创建了一个服务. 当然,这样的方式在我们本地虚拟机 ...