JQuery Ajax动态生成Table表格
程序员文章站
2022-06-14 15:18:13
前言：
本示例大概功能是前台通过jquery的ajax调用一般处理程序(handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循...
前言：
本示例大概功能是前台通过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;
}
}
}
以上代码超简单吧，jquery ajax动态生成table表格的内容就全部完成了，希望对大家有所帮助。