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

浏览数：49 / 时间：2015年06月12日

初学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         try
21         {
22             SqlCommand sqlcmd = new SqlCommand(sqlStr, con);
23             SqlDataAdapter sqldata = 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         finally
32         {
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="Scripts/jquery-easyui-1.3.6/jquery.min.js"></script>
10     <script src="Scripts/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
11     <link href="Scripts/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />
12     <link href="Scripts/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet" />
13     <script src="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>