JQuery Ajax动态生成表格

最新推荐文章于 2022-01-06 18:16:02 发布

临海听风_518

最新推荐文章于 2022-01-06 18:16:02 发布

阅读量160

点赞数

分类专栏： jquery使用心得与体会文章标签： javascript json xhtml ViewUI

本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84509550

版权

jquery使用心得与体会专栏收录该内容

56 篇文章 0 订阅

订阅专栏

前言：

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

}

临海听风_518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Ajax动态生成表格

前言：　　本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。目标：　　a 熟悉简单JQuery Ajax的使用　　b 了解如何构造基本的Json格式的数据（构建Json也可以通过第三方的dll）　　c 熟悉下handler的基本用法...
复制链接

扫一扫

专栏目录