JQuery Ajax動(dòng)態(tài)生成Table表格

更新時(shí)間：2015年09月22日 09:53:08 作者：憂憂夏天

實(shí)現(xiàn)過程是這樣的：前臺(tái)通過jquery的ajax調(diào)用一般處理程序(Handler),獲取表格需要顯示的信息，然后轉(zhuǎn)換成json格式返回給前臺(tái)，前臺(tái)獲取到數(shù)據(jù)后循環(huán)構(gòu)建表格的行，最好把行附加到表里。感興趣的朋友一起看看吧

前言：

　　本示例大概功能是前臺(tái)通過JQuery的Ajax調(diào)用一般處理程序(Handler)，獲取表格需要顯示的信息，然后轉(zhuǎn)換成json格式返回給前臺(tái)，前臺(tái)獲取到數(shù)據(jù)后循環(huán)構(gòu)建表格的行，最好把行附加到表里。

目標(biāo)：

　　a 熟悉簡(jiǎn)單JQuery Ajax的使用

　　b 了解如何構(gòu)造基本的Json格式的數(shù)據(jù)（構(gòu)建Json也可以通過第三方的dll）

　　c 熟悉下handler的基本用法

1 簡(jiǎn)單效果圖

2 前臺(tái)代碼

<%@ 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">
    //獲取發(fā)布模塊類型
    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;
    }
  }
}

以上代碼超簡(jiǎn)單吧，JQuery Ajax動(dòng)態(tài)生成Table表格的內(nèi)容就全部完成了，希望對(duì)大家有所幫助。

您可能感興趣的文章: