首页 > 代码库 > jquery easyUI datagrid 通过一般处理程序绑定数据库

jquery easyUI datagrid 通过一般处理程序绑定数据库

初学easyui,搞了三天,终于将datagrid与后台数据库绑定成功,界面有点不太美观,以后继续努力。

后台一般处理程序取数据代码

 1 <%@ WebHandler Language="C#" Class="jsonSms_group" %> 2  3 using System; 4 using System.Web; 5 using System.Configuration; 6 using System.Data; 7 using System.Data.SqlClient; 8 using Newtonsoft.Json; 9 10 public class jsonSms_group : IHttpHandler {11 12 13     string conStr = ConfigurationManager.AppSettings["DBConnection"];14     string sqlStr = "select Id,QunNum,MastQQ from QunList81";15     16     public void ProcessRequest (HttpContext context) {17         context.Response.ContentType = "text/plain";18         SqlConnection con = new SqlConnection(conStr);19         con.Open();20         try21         {22             SqlCommand sqlcmd = new SqlCommand(sqlStr, con);23             SqlDataAdapter sqldata = http://www.mamicode.com/new SqlDataAdapter();24             sqldata.SelectCommand = sqlcmd;25             DataSet ds = new DataSet();26             sqldata.Fill(ds);27             string json = JsonConvert.SerializeObject(ds.Tables[0]);28             context.Response.Write(json);29             //return ds;30         }31         finally32         {33             con.Close();34         }35     }36  37     public bool IsReusable {38         get {39             return false;40         }41     }42 43 }
View Code

前台代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2  3 <!DOCTYPE html> 4  5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8     <title></title> 9     <script src=http://www.mamicode.com/"Scripts/jquery-easyui-1.3.6/jquery.min.js"></script>10     <script src=http://www.mamicode.com/"Scripts/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>11     <link href=http://www.mamicode.com/"Scripts/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />12     <link href=http://www.mamicode.com/"Scripts/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet" />13     <script src=http://www.mamicode.com/"Scripts/jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js"></script>14 </head>15 <body>16     <form id="form1" runat="server">17     <div>18         <table id="tt" class="easyui-datagrid"  19         url="jsonSms_group.ashx"  20         title="部门组织表" iconCls="icon-save"  21         rownumbers="true" pagination="true">  22             <thead>  23                 <tr>  24                     <th field="Id" width="80">编号</th>  25                     <th field="QunNum" width="80">群号</th>  26                   <th field="MastQQ" width="80" align="right">QQ</th>  27                </tr>  28             </thead>  29         </table>  30     </div>31     </form>32 </body>33 </html>
View Code

将dataset 数据转换为json格式de字符串,用到了Newtonsoft.Json.dll插件,这个插件在网上可以下载到,然后在一般处理程序中添加using Newtonsoft.Json应用即可。