jquery实现点击GridView弹出可以拖拉的div，异步处理后台数据并返回结果显示在div里
前台页面代码：<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web._Default" %><html><head runat="server"> <title>弹出明细的div效果</title> <script src="jquery-1.3.2.js" type="text/javascript"></script> <style type="text/css"> table tr td { padding: 10px; } </style> <script type="text/javascript"> $(function() { $("#GridView1 tr td").click(function() { //获取点击的文本 var val = $(this).text(); var before_val = $(this).prev("td");//获取点击的单元格当前行的前一列 alert("前一列值：" + before_val.text());//获取前一列值 //**************************BEGIN**************************** var index = $(this).cellIndex; //点击单元格的当前列index var head_text = $("#GridView1 tr th:eq(" + index + ")").text(); //表头的列头内容 alert("所在列名："+head_text);//这里就是表头内容，你点击那个单元格所在列的列表头(比如我这里的测试数据表头有：id、name、age) //**********************END********************************** //清空提示的div $("#tips").remove(); //获取div距离左边值 var left = $(this).offset().left + 10; //获取div距离顶端的值 var top = $(this).offset().top + 25; //动态创建div，并添加到body里 $("body").append(create_div(left, top)); //添加拖动事件 drag_div("tips"); //a标签的关闭事件 $("#tips a").click(function() { //$("#tips").fadeOut("slow");//有效果的关闭 $("#tips").remove(); //没效果的关闭 }); //异步请求 $.ajax({ type: "POST", url: "DataRespones.ashx", //将后台操作放在此文件里 data: "name=" + val,//这里是传递到后台的参数，格式为：key=value 有多个参数就用&隔开，如何前台获取到的数值你不能传到后台，那我无语了。 beforeSend: function() { $("#tips").append("<span id='s' style='font-size:12px;'>请稍后……</span>"); //增加超时后提示 }, success: function(msg) { $("span").remove(); $("#tips").append("<span>通过异步请求返回的值：</span><span style='color:red;'>" + msg + "</span>"); }, complete: function() { $("#tips #s").remove(); } }); }); }); //拖动div function drag_div(id) { var _move, _x, _y; $("#" + id).mousedown(function(e) { _move = true; _x = e.pageX - parseInt($("#" + id).css("left")); _y = e.pageY - parseInt($("#" + id).css("top")); $("#" + id).fadeTo(20, 0.25); //点击后开始拖动并透明显示 }); $(document).mousemove(function(e) { $("#" + id).css("cursor", "move"); if (_move) { var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置 var y = e.pageY - _y; $("#" + id).css({ top: y, left: x }); //控件新位置 } }).mouseup(function() { $("#" + id).css("cursor", "default"); _move = false; $("#" + id).fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明 }); } //创建提示div function create_div(left, top) { var html = "<div id='tips' style='left:" + left + "px;top:" + top + "px;width:120px;height:100px;font-size:12px; padding:5px; border:1px solid #9ECD2A;position:absolute;background:#EDECE1;'><a href='javascript:void(0)'>关闭</a><br/><br/></div>"; return html; } </script></head><body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" Width="200" Height="50" HorizontalAlign="Center" RowStyle-HorizontalAlign="Center"> </asp:GridView> </div> </form></body></html>
后台ashx代码：
using System;using System.Collections;using System.Data;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Xml.Linq;using System.Threading;namespace Web{ public class DataRespones : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = string.Empty; string name=context.Request["name"];//从前台发送过来的值 result = SimulationDataBase(name);//将获取到的值再去查数据库，将查询的值以字符串形式返回给前台。 context.Response.Write(result); } public bool IsReusable { get { return false; } } /// <summary> /// 模拟操作数据库(根据你的实际情况将数据库操作放在此处操作，或以同样的方式自己创建一个方法) /// </summary> /// <param name="name">前台传过来的值</param> /// <returns>返回给前台用的字符串</returns> private string SimulationDataBase(string name) { string temp = string.Empty; switch (name) { case "张三": temp= "好好学习"; Thread.Sleep(2000);//人为手工模拟超时延迟。前台会出现"请稍后……"字样 break; case "王五": temp = "天天向上"; break; default: temp = "没有可查询的数据"; break; } return temp; } }} 完整的项目代码以下：
页:
[1]