JQuery Ajax動態生成Table表格

來源：懂視網責編：小采時間：2020-11-27 22:52:06

JQuery Ajax動態生成Table表格

JQuery Ajax動態生成Table表格:前言：本示例大概功能是前臺通過JQuery的Ajax調用一般處理程序(Handler)，獲取表格需要顯示的信息，然后轉換成json格式返回給前臺，前臺獲取到數據后循環構建表格的行，最好把行附加到表里。目標： a 熟悉簡單JQuery Ajax的使用 b 了解如何構造

推薦度：

點擊下載本文 文檔為doc格式

導讀JQuery Ajax動態生成Table表格:前言：本示例大概功能是前臺通過JQuery的Ajax調用一般處理程序(Handler)，獲取表格需要顯示的信息，然后轉換成json格式返回給前臺，前臺獲取到數據后循環構建表格的行，最好把行附加到表里。目標： a 熟悉簡單JQuery Ajax的使用 b 了解如何構造

前言：

　　本示例大概功能是前臺通過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表格的內容就全部完成了，希望對大家有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JQuery Ajax動態生成Table表格

推薦度：

點擊下載本文 文檔為doc格式

標簽：表格 table ajax

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

JQuery Ajax動態生成Table表格

JQuery Ajax動態生成Table表格

JQuery Ajax動態生成Table表格

最新推薦

猜你喜歡

熱門推薦