JQuery Ajax动态生成Table表格

前端技术 2023/09/08 AJAX

前言：

　　本示例大概功能是前台通过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表格的内容就全部完成了，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/20776

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案