JQuery Ajax动态生成表格

齐晓威_518

浏览: 607393 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery使用心得与体会

前言：

　　本示例大概功能是前台通过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">

#divTb

{

width:800px;

border:1px solid #aaa;

margin:0 auto;

}

.even{background:#CCCCCC;}

.odd{background:#FFFFFF;}

</style>

//获取发布模块类型

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>

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

}

查看图片附件

分享到：

JSON 字符串与 java 对象的转换 | 前台JS获取后台的Json数据，动态创建tabl ...

2013-12-04 22:43
浏览 1751
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论