JQuery Ajax动态生成表格

前言：

　　本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：

　　a 熟悉简单JQuery Ajax的使用

　　b 了解如何构造基本的Json格式的数据（构建Json也可以通过第三方的dll）

　　c 熟悉下handler的基本用法

1 简单效果图

2 前台代码

代码

<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " DialogAjax.aspx.cs " Inherits = " JQueryTest_DialogAjax " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title ></ title >

< link href ="../JQueryUi/jquery-ui-1.8.5.custom.css" rel ="stylesheet" type ="text/css" />

< script src ="../JQueryUi/jquery-1.4.2.min.js" type ="text/javascript" ></ script >
< script src ="../JQueryUi/jquery-ui-1.8.5.custom.min.js" type ="text/javascript" ></ script >

< style type ="text/css" >
#divTb
{
width : 800px ;
border : 1px solid #aaa ;
margin : 0 auto ;
}
.even { background : #CCCCCC ; }
.odd { background : #FFFFFF ; }

</ style >

< script type ="text/javascript" >

// 获取发布模块类型
function getModuleInfo() {
$.ajax({
type: " GET " ,
dataType: " json " ,
url: " ../Handler/TestHandler.ashx?Method=GetModuleInfo " ,
// data: { id: id, name: name },
success: function (json) {
var typeData = json.Module;
$.each(typeData, function (i, n) {
var tbBody = ""
var trColor;
if (i % 2 == 0 ) {
trColor = " even " ;
}
else {
trColor = " odd " ;
}
tbBody += " <tr class=' " + trColor + " '><td> " + n.ModuleNum + " </td> " + " <td> " + n.ModuleName + " </td> " + " <td> " + n.ModuleDes + " </td></tr> " ;
$( " #myTb " ).append(tbBody);
});
},
error: function (json) {
alert( " 加载失败 " );
}
});
}

$( function () {
getModuleInfo();
});
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div id ="divTb" >
< table id ="myTb" style =" width:100%" >
</ table >
</ div >
</ form >
</ body >
</ html >

3 Handler代码

代码

<% @ WebHandler Language = " C# " Class = " TestHandler " %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;

using DataDAL;
using DataEnity;

public class TestHandler : IHttpHandler {
HttpRequest Request;
HttpResponse Response;

public void ProcessRequest (HttpContext context) {
// 不让浏览器缓存
context.Response.Buffer = true ;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays( - 1 );
context.Response.AddHeader( " pragma " , " no-cache " );
context.Response.AddHeader( " cache-control " , "" );
context.Response.CacheControl = " no-cache " ;
context.Response.ContentType = " text/plain " ;

Request = context.Request;
Response = context.Response;

string method = Request[ " Method " ].ToString();
System.Reflection.MethodInfo methodInfo = this .GetType().GetMethod(method);
methodInfo.Invoke( this , null );
}

public void GetModuleInfo()
{
StringBuilder sb = new StringBuilder();
string jsonData = string .Empty;

List < Module > lsModule = ModuleDAL.GetModuleList();

sb.Append( " {\ " Module\ " :[ " );

for ( int i = 0 ; i < lsModule.Count; i ++ )
{
jsonData = " {\ " ModuleNum\ " : " + " \ "" + lsModule[i].ModuleNum + " \ "" + " ,\ " ModuleName\ " : " + " \ "" + lsModule[i].ModuleName + " \ "" + " ,\ " ModuleDes\ " : " + " \ "" + lsModule[i].ModuleDes + " \ "" + " }, " ;
sb.Append(jsonData);
}

if (lsModule.Count > 0 )
sb = sb.Remove(sb.Length - 1 , 1 );

sb.Append( " ]} " );
Response.Write(sb);

}

public bool IsReusable
{
get {
return false ;
}
}

}

 

转载于:https://www.cnblogs.com/xqhppt/archive/2010/10/30/1865279.html