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;
}
}

}
复制代码
阅读更多
博主设置当前文章不允许评论。

博主推荐

换一批

没有更多推荐了,返回首页