zoukankan      html  css  js  c++  java
  • JQuery 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=" 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;
    }
    }

    }

  • 相关阅读:
    Filter and Listener
    Cookie Session
    怎样快速将一台电脑虚拟机导入另外一台电脑
    网页下载文件服务端代码
    图片验证码生成代码
    Request实战
    Response
    设置页眉页脚的距离
    页眉页脚的设置
    节的设置
  • 原文地址:https://www.cnblogs.com/xqhppt/p/1865279.html
Copyright © 2011-2022 走看看